# Animerade e-posthuvuden: GIF som laddas snabbt och ser bra ut [Canonical HTML page](https://gradiently.design/sv/guide/animated-email-header) Rörelse högst upp i ett mejl märks, men inkorgar är kinkiga. Ett bra animerat huvud är lätt, kort och ger ändå full mening om det aldrig rör sig alls. ## The short version - Ett animerat e-posthuvud är nästan alltid en GIF, eftersom de flesta e-postklienter visar animerade GIF och mycket få spelar upp video. - Vissa skrivbordsversioner av Outlook för Windows visar bara första rutan i en GIF, så första rutan måste fungera som en komplett design. - En vanlig huvudstorlek är 1200×600 pixlar, visad i 600 pixlars bredd så att den förblir skarp på skärmar med hög täthet. - Att hålla GIF-filen lätt spelar roll eftersom stora bilder laddas långsamt på mobildata, och korta loopar med lite rörelse väger minst. - Viktiga ord som erbjudanden, datum och knappar hör hemma i levande HTML-text under huvudet, inte bara inuti animationen. Ett **animerat e-posthuvud** bör vara en GIF, ungefär 1200×600 pixlar visad i 600 bredd, med en kort loop, måttlig filvikt och en första ruta som fungerar som en färdig design på egen hand. Den sista regeln är den folk missar: vissa skrivbordsversioner av Outlook för Windows visar bara första rutan i en animerad GIF, och den som har bilder blockerade ser inget annat än din alt-text. Designa för de läsarna först och lägg sedan till rörelse som en bonus för alla andra. ## Därför är animerade e-posthuvuden GIF Stöd för video i e-post är sällsynt och opålitligt. Animerad GIF, ett bildformat, visas i de flesta klienter, från Apple Mail till Gmail. Nyare format som animerad WebP har ojämnare stöd i inkorgar. Så GIF är fortfarande det praktiska valet, med alla sina gränser: högst 256 färger per ruta och större filer än video. De gränserna formar designen. Hela jämförelsen finns i [GIF eller MP4](https://gradiently.design/sv/guide/gif-vs-mp4). | Inställning | Rekommendation | Varför | | --- | --- | --- | | Format | GIF | Spelas i de flesta e-postklienter, video oftast inte | | Designstorlek | 1200×600 px | Dubbla visningsbredden för skarpa, täta skärmar | | Visningsbredd | 600 px | Standardbredden på en e-postkropp | | Looplängd | 2 till 5 sekunder | Korta loopar väger mindre och känns ändå levande | | Bildfrekvens | 10 till 15 bilder/s | Mjukt nog för glidande färg och enkla avslöjanden | | Filvikt | Så lätt du kan göra den | Stora huvuden laddas långsamt på mobildata | Startpunkter för ett huvud som laddas snabbt och ser skarpt ut. Om vikten betyder mer än skärpan, exportera GIF-filen i 600 px bredd. ## Designa första rutan som reservlösning Behandla första rutan som e-posthuvudet och animationen som ett extra. Om dina ord sveps in från ingenting ser en Outlook-läsare ett tomt färgblock. Om din produkt dyker upp vid sekund två ser de aldrig produkten. Lägg allt som spelar roll på skärmen i ruta ett och låt sedan rörelsen ske runt den. Nyhetsbrevshuvud med texten oktobernumret och en liten etikett fältanteckningar över en gradient Ruta ett: komplett. Varje ord är på plats, så en läsare som bara ser den här rutan missar ingenting. Samma nyhetsbrevshuvud senare i loopen, med gradientens färg förskjuten bakom stilla ord Mitt i loopen: orden står kvar medan färgen skiftar bakom dem. Rörelsen ger stämning, inte information. - **Orden stilla, bakgrunden rörlig.** Glidande färg bakom en fast rubrik är det mest pålitliga animerade huvud som finns. - **En liten rörelse.** Ett ord som byts, en rad som understryker sig själv, ett mjukt skifte i ljuset. En idé per huvud. - **Sluta där du började.** En loop som hoppar tillbaka till början ser trasig ut. Låt sista rutan leda in i första, som i [sömlös loopvideo](https://gradiently.design/sv/guide/seamless-loop-video). - **Inget blixtrande.** Håll ljusförändringar långsamma. Snabbt blixtrande ljus är obehagligt och kan vara skadligt. ## Håll GIF-filen lätt Det mesta av en GIF-fils vikt kommer från pixlar som ändras mellan rutorna. Ett huvud där hela rutan rör sig är tungt, medan ett där en långsam gradient glider bakom stilla ord är mycket lättare, eftersom kodaren bara kan lagra det som ändrats. Att halvera bredden fyrdubblar ungefär pixlarna, så bestäm tidigt om det här huvudet behöver vara 1200 px eller om 600 px räcker. 1. **Designa i 1200×600** Lägg ut huvudet med alla ord på plats i första rutan. 2. **Håll loopen kort** Två till fem sekunder, där varje rörelse fullbordar en hel cykel. 3. **Exportera som GIF i 10 till 15 bilder/s** Använd en palett byggd av själva animationen, inte en generisk. 4. **Kontrollera vikten** Om den är tung, prova 600 px bredd, färre rutor eller mindre rörelse innan du sänker kvaliteten. 5. **Kontrollera första rutan för sig** Öppna GIF-filen i ett bildprogram som bara visar första rutan, eller skicka ett test till Outlook på Windows. De detaljerade exportkommandona och inställningarna för palett och dithering finns i [animerade GIF](https://gradiently.design/sv/guide/gif-maker-tips). ## HTML för ett animerat e-posthuvud Koda huvudet som en vanlig bild i en tabellcell. Ange visningsbredden både i attributet och i stilen så att varje klient anpassar storleken rätt, ge den en beskrivande alt-text och sätt en bakgrundsfärg på cellen som matchar GIF-filens första ruta. När bilder blockeras ser läsarna då din färg och dina ord, inte en tom ruta. ```html
The October issue: new work, three reads and a studio update
``` En GIF på 1200×600 visad i 600×300. Cellens färg matchar första rutan, och den formgivna alt-texten läses bra om bilderna är av. > **Levande text under huvudet** Lägg erbjudandet, datumet och knappen som riktig HTML-text under bilden. Den visas med bilder av, kan läsas av skärmläsare och sökas i inkorgen, och förblir skarp i alla storlekar. ## Mörkt läge och blockerade bilder Mörkt läge kan ändra färgerna runt ditt huvud men lämnar oftast själva bilden ifred. Ett huvud med egen fullständig bakgrundsfärg håller i båda lägena, medan ett med genomskinlig eller vit kant kan bli en ljus ruta på en mörk skärm. CSS-gradienter bakom bilden är inte pålitliga mellan klienter, så baka in gradienten i GIF-filen och använd en enfärgad reserv. [Gradienter i e-post](https://gradiently.design/sv/guide/gradients-in-email) tar upp alternativen. ### Undvik - Ord som visas först efter första rutan - En tung GIF där hela rutan rör sig - Genomskinliga kanter som krockar i mörkt läge - Tom eller generisk alt-text som ”huvud” - Erbjudandet och knappen bara inuti bilden ### Gör - En första ruta som är en komplett design - Stilla ord över långsamt rörlig färg - En fullständig bakgrundsfärg i bilden - Alt-text som säger det huvudet säger - Levande HTML-text för allt folk agerar på I Gradiently kan du designa huvudet i e-posthuvudets storlek på en rörlig Mark, hålla orden stilla medan Marken glider bakom dem och exportera det som GIF i Pro. Eftersom bakgrunden är en unik Mark du äger ser huvudet ut som ditt varumärke i stället för en mall som andra nyhetsbrev delar. För stilla huvuden och layout, se [design av e-posthuvuden](https://gradiently.design/sv/guide/email-header-design). ## FAQ ### Fungerar animerade GIF i e-post? I de flesta e-postklienter, ja. Vissa skrivbordsversioner av Outlook för Windows visar bara första rutan, så designa den rutan så att den fungerar på egen hand. ### Vilken storlek ska ett animerat e-posthuvud ha? Designa det i 1200×600 pixlar och visa det i 600 pixlars bredd. Om filvikten betyder mer än skärpan på täta skärmar, exportera GIF-filen i 600×300 i stället. ### Kan jag använda video i ett e-posthuvud? Video spelas i mycket få e-postklienter, så det är inget pålitligt val. Använd en animerad GIF, eller en stillbild som länkar till videon. ### Varför animeras inte min e-post-GIF i Outlook? Vissa Outlook-versioner för Windows visar bara första rutan i animerade GIF. Det är en gräns i klienten, inte i din fil, och därför ska första rutan bära hela budskapet. ### Hur gör jag en e-post-GIF mindre? Förkorta loopen, sänk bildfrekvensen till cirka 10 till 15 bilder/s, håll det mesta av rutan stilla och överväg att exportera i 600 px bredd.