# Design av toppbilder til e-post med gradienter [Canonical HTML page](https://gradiently.design/nb/guide/email-header-design) Toppbildet er det første noen ser etter emnefeltet, i en innboks du ikke kontrollerer. Godt design tar høyde for blokkerte bilder, mørk modus og små skjermer fra starten. ## The short version - Et standard toppbilde til e-post er 1200 ganger 600 piksler, vist i 600 pikslers bredde for å holde seg skarpt på skjermer med høy pikseltetthet. - Støtten for CSS-gradienter varierer mellom e-postklienter, så et toppfelt med gradient er vanligvis et bilde med en ensfarget bakgrunn som reserve. - Noen e-postklienter blokkerer bilder som standard, så hvert toppbilde trenger beskrivende alt-tekst og en bakgrunnsfarge bak. - Mørk modus kan endre fargene rundt toppbildet, men vanligvis ikke inni bildet, så gi toppbilder en egen bakgrunn og test i begge moduser. - Legg viktige ord som tilbud, datoer og handlingsoppfordringer i ekte HTML-tekst under toppbildet, ikke bare inni bildet. Godt **design av toppbilder til e-post** begynner med innboksens begrensninger. Lag toppbildet i 1200 ganger 600 piksler og vis det i 600 pikslers bredde, så det blir skarpt på skjermer med høy pikseltetthet. Fordi e-postklienter håndterer CSS-gradienter ulikt, legger du gradienten inni bildet og setter en matchende ensfarget bakgrunn bak. Legg til beskrivende alt-tekst for lesere med bilder av, sjekk i mørk modus og behold viktige ord som ekte tekst under bildet. Denne guiden dekker størrelser, bilde eller CSS, mørk modus, filstørrelse og alt-tekst, med HTML du kan tilpasse. For den tekniske siden av gradienter i HTML-e-post, se [gradienter i e-post](https://gradiently.design/nb/guide/gradients-in-email). ## Størrelse på toppbilder til e-post De fleste e-postoppsett er rundt 600 piksler brede, en bredde som passer godt i leseruter på datamaskiner og skaleres ned på telefoner. Eksporter toppbilder i dobbelt størrelse, 1200 ganger 600, og sett visningsbredden til 600 i HTML-en. Formen 2:1 gir plass til en kort overskrift eller logo uten å skyve innholdet under første skjermbilde på telefoner. - E-posttoppbilde 1200×600: 1200 × 600 - E-postsignatur 600×200: 600 × 200 - Bloggbanner 1200×600: 1200 × 600 Formater for toppbilde og signatur i e-post. Toppbildet har samme størrelse som et bloggbanner, så ett design kan brukes til begge. > **Kortere er ofte bedre** På en telefon kan et høyt toppbilde fylle hele første skjermbilde. Hvis det mest skal skape stemning, vurder en lavere beskjæring, slik at første linje av e-posten er synlig uten rulling. ## Bilde eller CSS: bygg et e-posttoppfelt med gradient På nett er en gradient én linje CSS. I e-post er det mindre pålitelig: noen klienter viser `background-image: linear-gradient(...)`, andre ignorerer det. De praktiske alternativene står under. | Tilnærming | Slik virker det | Avveining | | --- | --- | --- | | Toppfelt som bilde | Gradienten og eventuell grafikk bakt inn i et bilde på 1200×600 | Ser likt ut overalt der bilder lastes; ord inni det forsvinner når bilder er av | | CSS-gradient og ekte tekst | En tabellcelle med gradientbakgrunn og HTML-tekst oppå | Lett og tilgjengelig; faller tilbake til en ensfarget bakgrunn der gradienter ikke støttes | | Kombinasjon | Et gradientbilde for stemning, ekte tekst for budskapet under eller på en ensfarget reservebakgrunn | Mest robust: alltid leselig, vanligvis vakkert | De fleste merkevarer bruker kombinasjonen: bildet bærer uttrykket, HTML-en bærer ordene. ```html
Autumn edit: new colours for the season
Our autumn colours are here. See the new range this weekend.
``` Et kombinert toppfelt. Cellen har en ensfarget bakgrunn og en gradient bak bildet, så blokkerte bilder fortsatt viser merkevarefarge og formatert alt-tekst. Budskapet gjentas som ekte tekst under. ## Design toppbilder til e-post for mørk modus I mørk modus endrer mange e-postapper fargene rundt toppbildet: hvite bakgrunner kan bli mørke og mørk tekst lys. Bilder forblir vanligvis uendret. Det skaper to klassiske problemer: et toppbilde med hvit bakgrunn lyser som en lyskasse i en mørk innboks, og en gjennomsiktig logo med mørke streker forsvinner mot en bakgrunn som nå er mørk. ### Unngå - Toppbilder med helt hvit bakgrunn - Gjennomsiktige PNG-logoer med mørke streker - Viktige ord bare inni bildet - Tynn, lys tekst på en blek gradient ### Gjør dette - Et toppbilde med egen mellommørk eller dyp bakgrunn - Logoer på en ensfarget form, eller en lys og en mørk versjon - Budskapet gjentatt som ekte tekst - Sterk kontrast inne i selve bildet - Dyp fiolett: `linear-gradient(135deg, #2a1b6b 0%, #7c3aed 100%)` - Dyp blågrønn: `linear-gradient(135deg, #0f3d3e 0%, #1f8a78 100%)` - Bær til korall: `linear-gradient(135deg, #7a1f3d 0%, #e0555c 100%)` - Natt til blått: `linear-gradient(135deg, #1e2a52 0%, #3f6fd8 100%)` Gradienter som passer både lyse og mørke innbokser: dype nok til ikke å blende om natten, mettede nok til å virke lyse om dagen. Mellommørke til dype gradienter som disse er det tryggeste valget. De blender ikke i en mørk innboks, og hvit tekst inni dem forblir leselig i begge moduser. [Design for mørk modus](https://gradiently.design/nb/guide/dark-mode-design) dekker de overordnede prinsippene. ## Filstørrelse, alt-tekst og ordene som betyr noe Hold toppbildene lette: eksporter JPEG for fotografiske eller kornete gradienter og PNG for flat grafikk med tekst, og komprimer dem. Store, jevne gradienter kan få fargebånd ved hard komprimering, og litt korn i designet hjelper dem å tåle den; se [fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding). Skriv alt-tekst som sier det toppbildet sier, ikke hvordan det ser ut: *Høstutgaven: nye farger for sesongen*, ikke *lilla banner*. Sett bildets skriftegenskaper slik at alt-teksten vises i leselig størrelse og farge på reservebakgrunnen når bilder er av. Et bredt e-posttoppbilde med nyhetsbrevtittel og utgavenummer på en dyp gradient Et toppbilde til nyhetsbrev på 1200 ganger 600: navnetopp, utgavenummer og én linje. Et bredt e-posttoppbilde som kunngjør søndagsåpent på en varm gradient Et kunngjøringstoppbilde: budskapet er kort nok til å gjentas som ekte tekst under. ## Sjekkliste for toppbilder til e-post 1. **Design i 1200 ganger 600** Vis i 600 pikslers bredde. Hold ordene store nok til å leses på en telefon i den størrelsen. 2. **Gi det en egen bakgrunn** Ingen ren hvitfarge og ingen gjennomsiktighet rundt kantene, så mørk modus ikke gjør det til en lyskasse. 3. **Sett en reservefarge** En `bgcolor` på cellen i en farge fra gradienten, slik at blokkerte bilder fortsatt følger merkevarens uttrykk. 4. **Skriv ordentlig alt-tekst** Budskapet, ikke en beskrivelse av bildet. 5. **Gjenta budskapet som ekte tekst** Datoer, tilbud og handlingsoppfordringer som HTML-tekst under toppbildet. 6. **Test i begge moduser** Send test-e-poster til appene leserne dine bruker, i lys og mørk modus, med bilder på og av. I Gradiently er størrelsene Toppbilde til e-post (1200 ganger 600) og signatur (600 ganger 200) innebygd, og kopier til størrelser gjør et ferdig sosialt innlegg til et matchende toppbilde for e-posten på [lanseringsdagen](https://gradiently.design/nb/guide/launch-day-graphics). ## FAQ ### Hvilken størrelse bør et toppbilde til e-post ha? 1200 ganger 600 piksler, vist i 600 pikslers bredde i e-postens HTML. Den doble oppløsningen holder bildet skarpt på skjermer med høy pikseltetthet. ### Fungerer CSS-gradienter i e-post? I noen e-postklienter, ikke alle. Legg gradienten i et bilde eller bruk CSS med en ensfarget `bgcolor` som reserve, og test i appene leserne dine bruker. ### Hvordan får jeg et e-posttoppbilde til å fungere i mørk modus? Gi toppbildet en egen mellommørk eller dyp bakgrunn fremfor hvit eller gjennomsiktig, hold sterk kontrast inni bildet og gjenta viktige ord som ekte tekst. ### Hva bør alt-teksten til et e-posttoppbilde si? Det toppbildet sier, for eksempel overskriften eller tilbudet, slik at lesere med blokkerte bilder fortsatt får budskapet.