# Animerte e-postheadere: GIF-er som laster raskt og ser bra ut [Canonical HTML page](https://gradiently.design/nb/guide/animated-email-header) Bevegelse øverst i en e-post blir lagt merke til, men innbokser er kresne. En god animert header er lett, kort og gir fortsatt full mening om den aldri beveger seg i det hele tatt. ## The short version - En animert e-postheader er nesten alltid en GIF, fordi de fleste e-postprogrammer viser animerte GIF-er og svært få spiller video. - Noen skrivebordsversjoner av Outlook for Windows viser bare den første rammen i en GIF, så den første rammen må fungere som et komplett design. - En vanlig headerstørrelse er 1200×600 piksler, vist med 600 piksler bredde så den holder seg skarp på skjermer med høy tetthet. - Det er viktig å holde GIF-en lett, fordi store bilder laster sakte på mobildata, og korte looper med lite bevegelse veier minst. - Viktige ord som tilbud, datoer og knapper hører hjemme i levende HTML-tekst under headeren, ikke bare inne i animasjonen. En **animert e-postheader** bør være en GIF på rundt 1200×600 piksler vist med 600 i bredde, med en kort loop, beskjeden filvekt og en første ramme som fungerer som et ferdig design alene. Den siste regelen er den folk overser: noen skrivebordsversjoner av Outlook for Windows viser bare den første rammen i en animert GIF, og alle som har blokkert bilder ser bare alt-teksten din. Design for disse leserne først, og legg så til bevegelse som en bonus for alle andre. ## Hvorfor animerte e-postheadere er GIF-er Videostøtte i e-post er sjelden og upålitelig. Animert GIF, et bildeformat, vises i de fleste programmer, fra Apple Mail til Gmail. Nyere formater som animert WebP har mer ujevn støtte i innbokser. Derfor er GIF fortsatt det praktiske valget, med alle sine begrensninger: høyst 256 farger per ramme og større filer enn video. De begrensningene former designet. Hele sammenligningen finner du i [GIF eller MP4](https://gradiently.design/nb/guide/gif-vs-mp4). | Innstilling | Anbefaling | Hvorfor | | --- | --- | --- | | Format | GIF | Spilles i de fleste e-postprogrammer; video gjør stort sett ikke det | | Designstørrelse | 1200×600 px | Dobbel visningsbredde for skarpe skjermer med høy tetthet | | Visningsbredde | 600 px | Standardbredden på en e-post | | Looplengde | 2 til 5 sekunder | Korte looper veier mindre og føles fortsatt levende | | Bildefrekvens | 10 til 15 fps | Jevnt nok for drivende farge og enkle avsløringer | | Filvekt | Så lett du klarer | Store headere laster sakte på mobildata | Utgangspunkt for en header som laster raskt og ser skarp ut. Betyr vekt mer enn skarphet, eksporter GIF-en med 600 px bredde. ## Design den første rammen som reserveløsning Behandle den første rammen som e-postheaderen og animasjonen som et tillegg. Toner ordene dine inn fra ingenting, ser en Outlook-leser en tom fargeblokk. Dukker produktet opp etter to sekunder, ser de aldri produktet. Sett alt som betyr noe på skjermen i ramme én, og la så bevegelsen skje rundt det. Header for nyhetsbrev med teksten Oktoberutgaven og en liten etikett Feltnotater over en gradient Ramme én: komplett. Hvert ord er på plass, så en leser som bare ser denne rammen, går ikke glipp av noe. Den samme nyhetsbrevheaderen senere i loopen, med gradientfargen forskjøvet bak ordene som står stille Midt i loopen: ordene står i ro mens fargen skifter bak dem. Bevegelsen gir stemning, ikke informasjon. - **Ordene i ro, bakgrunnen i bevegelse.** Drivende farge bak en fast overskrift er den mest pålitelige animerte headeren som finnes. - **Én liten bevegelse.** Et ord som skifter, en linje som understreker seg selv, et mykt skifte i lyset. Én idé per header. - **Slutt der du begynte.** En loop som hopper tilbake til starten, ser ødelagt ut. La den siste rammen lede inn i den første, som i [sømløs loopvideo](https://gradiently.design/nb/guide/seamless-loop-video). - **Ingen blinking.** Hold endringer i lysstyrke langsomme. Rask blinking er ubehagelig og kan være skadelig. ## Slik holder du GIF-en lett Mesteparten av vekten i en GIF kommer fra piksler som endres mellom rammene. En header der hele rammen beveger seg, er tung; en der en langsom gradient driver bak stillestående ord, er mye lettere, fordi koderen bare trenger å lagre det som endret seg. Å halvere bredden gir omtrent en firedel så mange piksler, så avgjør tidlig om headeren trenger 1200 px eller om 600 px er nok. 1. **Design i 1200×600** Sett opp headeren med alle ord på plass i den første rammen. 2. **Hold loopen kort** To til fem sekunder, der hver bevegelse fullfører en hel syklus. 3. **Eksporter som GIF i 10 til 15 fps** Bruk en palett bygget fra selve animasjonen, ikke en generisk en. 4. **Sjekk vekten** Er den tung, prøv 600 px bredde, færre rammer eller mindre bevegelse før du senker kvaliteten. 5. **Sjekk ramme én alene** Åpne GIF-en i et bildeprogram som bare viser den første rammen, eller send en test til Outlook på Windows. De detaljerte eksportkommandoene og innstillingene for palett og dithering finner du i [animerte GIF-er](https://gradiently.design/nb/guide/gif-maker-tips). ## HTML for en animert e-postheader Kod headeren som et vanlig bilde i en tabellcelle. Sett visningsbredden både i attributtet og i stilen så alle programmer får riktig størrelse, gi den beskrivende alt-tekst, og sett en bakgrunnsfarge på cellen som matcher den første rammen i GIF-en. Når bilder er blokkert, ser leserne da fargen og ordene dine, ikke en tom boks. ```html
The October issue: new work, three reads and a studio update
``` En GIF på 1200×600 vist i 600×300. Cellefargen matcher den første rammen, og den stilsatte alt-teksten leses godt hvis bilder er slått av. > **Levende tekst under headeren** Sett tilbudet, datoen og knappen i ekte HTML-tekst under bildet. Den vises med bilder av, kan leses av skjermlesere og søkes i inne i innboksen, og forblir skarp i alle størrelser. ## Mørk modus og blokkerte bilder Mørk modus kan endre fargene rundt headeren, men lar som regel selve bildet være i fred. En header med sin egen fulle bakgrunnsfarge holder i begge moduser; en med gjennomsiktig eller hvit kant kan ende som en lys boks på en mørk skjerm. CSS-gradienter bak bildet er ikke pålitelige på tvers av programmer, så bak gradienten inn i GIF-en og bruk en ensfarget reserve. [Gradienter i e-post](https://gradiently.design/nb/guide/gradients-in-email) dekker alternativene. ### Unngå - Ord som bare dukker opp etter den første rammen - En tung GIF der hele rammen beveger seg - Gjennomsiktige kanter som kolliderer i mørk modus - Tom eller generisk alt-tekst som «header» - Tilbudet og knappen bare inne i bildet ### Gjør - En første ramme som er et komplett design - Stillestående ord over langsomt bevegelig farge - En full bakgrunnsfarge i bildet - Alt-tekst som sier det headeren sier - Levende HTML-tekst for alt folk skal handle på I Gradiently kan du designe headeren i størrelsen for e-postheadere på en Mark i bevegelse, holde ordene i ro mens Marken driver bak dem, og eksportere den som GIF med Pro. Fordi bakgrunnen er en unik Mark du eier, ser headeren ut som merkevaren din og ikke som en mal andre nyhetsbrev deler. For stillestående headere og oppsett, se [design av e-postheader](https://gradiently.design/nb/guide/email-header-design). ## FAQ ### Fungerer animerte GIF-er i e-post? I de fleste e-postprogrammer, ja. Noen skrivebordsversjoner av Outlook for Windows viser bare den første rammen, så design den rammen slik at den fungerer alene. ### Hvilken størrelse bør en animert e-postheader ha? Design den i 1200×600 piksler og vis den med 600 piksler bredde. Betyr filvekt mer enn skarphet på skjermer med høy tetthet, eksporter heller GIF-en i 600×300. ### Kan jeg bruke video i en e-postheader? Video spilles i svært få e-postprogrammer, så det er ikke et pålitelig valg. Bruk en animert GIF, eller et stillbilde som lenker til videoen. ### Hvorfor animeres ikke e-post-GIF-en min i Outlook? Noen Outlook-versjoner for Windows viser bare den første rammen i animerte GIF-er. Det er en begrensning i programmet, ikke i filen din, og derfor bør den første rammen bære hele budskapet. ### Hvordan gjør jeg en e-post-GIF mindre? Gjør loopen kortere, senk bildefrekvensen til rundt 10 til 15 fps, hold det meste av rammen i ro og vurder å eksportere med 600 px bredde.