Bildstorlekar och viktgränser för nyhetsbrev

Håll varje bild i nyhetsbrevet under 100 KB, anpassa storleken till dubbla visningsbredden och använd JPG eller PNG i stället för WebP. Gmail klipper av meddelanden där HTML-koden (Hypertext Markup Language) överstiger cirka 102 KB och ersätter resten med länken Visa hela meddelandet.

De flesta avsändare upptäcker klippgränsen den hårda vägen, oftast när avregistreringslänken och spårningspixeln hamnar under avklippningen. Bilder är ofta orsaken, antingen för att de är inbäddade direkt i meddelandet eller för att kodstrukturen runt dem har vuxit under flera kampanjer.

Vad Gmails klippgräns faktiskt mäter

Gmail mäter meddelandets HTML-källkod, inte bilderna som det länkar till. Ett nyhetsbrev som länkar till 10 stora fotografier håller sig väl inom gränsen, medan ett meddelande med tung styling direkt i koden och inbäddade bilder inte gör det.

Skillnaden är viktig eftersom lösningen ser annorlunda ut. Länkade bilder räknas inte in i siffran på 102 KB, så klippning orsakas oftast av upprepade inline-stilar, långa spårningsparametrar på varje länk eller bilder inbäddade som base64-data. Att ta bort inbäddade bilder och rensa i HTML-koden löser klippningen, medan komprimering av länkade fotografier löser laddningstiden.

Rekommenderade bildstorlekar för e-post

Designa e-postmeddelandet med en bredd på 600 pixlar och exportera bilder i 1200 pixlar för högupplösta skärmar. Standarden på 600 pixlar har gällt i åratal eftersom den passar förhandsgranskningen i alla e-postklienter för datorer utan att kräva horisontell scrollning.

Att fördubbla exportbredden täcker högupplösta skärmar och räcker gott. Export i 3 gånger visningsbredden lägger bara till vikt som ingen e-postklient återger bättre, och e-post är den enda kanalen där varje kilobyte laddas ner på en mobil.

Varför WebP fortfarande är fel val för e-post

Stödet för WebP i e-postklienter är fortfarande ojämnt, och i synnerhet Outlook förblir opålitligt. E-post är en av få platser där de trygga gamla formaten fortfarande är rätt val.

Alla webbläsare stöder WebP, vilket får många att anta att e-postklienter också gör det. Outlook för datorer renderar meddelanden med en helt annan motor, och flera företagssystem för e-post rensar bort eller misslyckas med format de inte känner igen. En trasig bild i ett nyhetsbrev kostar mycket mer än de 30 procent i filstorlek du sparar med WebP, så JPG och PNG är fortfarande det rätta valet här.

Formatval i e-postmeddelandet

Använd JPG för fotografier och PNG för logotyper, knappar och allt som innehåller text. Regeln är densamma som på webben, och konsekvenserna blir tydligare eftersom e-postbilder ofta är små.

• JPG för produktfoton, headerbilder och alla bilder av verkliga miljöer.
• PNG för logotyper, ikoner och grafik med plana färger eller skarpa textkanter.
• Animerad GIF endast när animationen tillför ett mervärde, och hålls under 1 MB.
• Undvik WebP och AVIF, eftersom inget av dem renderas tillförlitligt i alla e-postklienter.
• Undvik SVG helt, eftersom de flesta e-postklienter blockerar det av säkerhetsskäl.

Bilder är blockerade som standard i många klienter

Många mottagare ser ditt e-postmeddelande med bilderna avstängda, så meddelandet måste fungera även som ren text. Både e-postsystem på företag och integritetsmedvetna användare blockerar externa bilder tills läsaren aktivt väljer att ladda dem.

Skriv alt-text på varje bild, eftersom blockerade bilder visar den texten i stället. Placera aldrig avgörande information, som erbjudanden, sista datum eller uppmaningar till handling, enbart i en bild. Ett nyhetsbrev som helt byggs upp av en enda stor bild blir en tom rektangel för en stor del av mottagarna, och det fungerar dessutom dåligt med skärmläsare.

Hur du förbereder bilder för nyhetsbrev

Följ dessa 7 steg för att hålla nyhetsbrevet snabbt och lättläst.

1. Designa e-postmeddelandet med en bredd på 600 pixlar, som alla klienter på datorer återger utan scrollning.
2. Beskär varje bild till exakt den form den ska ha i layouten.
3. Ändra storleken till dubbla visningsbredden, men inte mer.
4. Konvertera till JPG för fotografier eller PNG för grafik som innehåller text.
5. Komprimera varje fil till ett mål under 100 KB.
6. Lagra bilderna på din e-postplattform eller på din egen server i stället för att bädda in dem i meddelandet.
7. Skicka ett test till Gmail, Outlook och en mobil innan du schemalägger kampanjen.

Meddelandets totala vikt är viktigare än enskilda bilder

Håll hela meddelandet under 600 KB inklusive bilder, eftersom prenumeranter öppnar nyhetsbrev på mobilen, ofta med dålig uppkoppling. Ett nyhetsbrev på 5 MB laddas långsamt och stängs innan det ens har renderats.

Räkna bilderna innan du komprimerar något. Ett nyhetsbrev med 12 fotografier på 100 KB vardera ligger redan på 1,2 MB, vilket tyder på att layouten behöver färre bilder snarare än mindre bilder. Att minska antalet bilder förbättrar vanligtvis både prestanda och läsbarhet, eftersom långa och bildtunga nyhetsbrev sällan läses ända till slutet.

Mörkt läge ändrar hur bilder ser ut

Flera klienter inverterar eller justerar färger i mörkt läge, och en logotyp på vit bakgrund blir en lysande rektangel i ett mörkt meddelande. Testa varje kampanj i mörkt läge före utskick.

Använd PNG-filer med genomskinlig bakgrund för logotyper och ikoner så att de smälter in rätt oavsett färg. Undvik bilder med vit bakgrund där designen förutsätter att sidan bakom också är vit. Fotografier är i regel säkra eftersom klienter sällan ändrar fotoinnehåll, medan ren grafik och bilder med text är där problemen med mörkt läge brukar uppstå.

Retina-skärmar och bildskärpa

Exportera i dubbla visningsbredden så att bilderna håller sig skarpa på högupplösta skärmar, och komprimera sedan hårdare för att kompensera för de extra pixlarna. En bild på 1200 pixlar med kvalitet 70 ser oftast bättre ut och väger mindre än en bild på 600 pixlar med kvalitet 95.

Ange breddattributet i HTML-koden till visningsstorleken i stället för filens faktiska storlek, så att klienten renderar bilden i 600 pixlar men utnyttjar den extra detaljrikedomen. Om breddattributet utelämnas visar vissa klienter bilden i dess fulla pixelstorlek, vilket förstör layouten på datorer.

Att kontrollera en kampanj före utskick

• Skicka ett test till Gmail, Outlook, Apple Mail och minst en mobiltelefon.
• Granska testet med blockerade bilder och bekräfta att meddelandet fortfarande går att förstå.
• Kontrollera att meddelandet inte klipps i Gmail, som visar länken Visa hela meddelandet vid avklippningen.
• Säkerställ att varje bild har en alt-text som beskriver vad den visar.
• Kontrollera återgivningen i mörkt läge, särskilt för logotyper och ren grafik.
• Räkna ihop den totala vikten för alla bilder och bekräfta att den håller sig under 600 KB.

Förbereda en kampanj i ett enda flöde

Bearbeta alla bilder i nyhetsbrevet tillsammans så att hela kampanjen delar samma specifikation. Ett nyhetsbrev innehåller vanligtvis 5 till 15 bilder, och den som skickar veckovis förbereder hundratals bilder under ett år.

Ställ in bredden och KB-målet en gång, släpp in bilderna och få tillbaka varje fil anpassad. Allt körs i din webbläsare på din egen processor, så ovisade erbjudanden, prenumerantlistor sparade som bilder och kampanjarbete för kunder når aldrig en server. För en byrå som förbereder en lansering innebär den lokala hanteringen att man undviker läckor som ingen komprimeringsvinst i världen skulle kunna motivera.

Spara en mallmapp med rätt dimensionerade platshållare för varje återkommande layoutblock, som headern, raden för produkter i 2 kolumner och logotypen i sidfoten. Avsändare som skickar varje vecka återanvänder samma 4 eller 5 former om och om igen, och att anpassa nytt bildmaterial till en befintlig specifikation tar mindre tid än att bestämma måtten på nytt inför varje kampanj.