Bildehåndtering i e-postklienter

Hver <img> trenger et beskrivende alt-attributt. Når bilder blokkeres, vises alternativ tekst i plassholderboksen — velskrevet alternativ tekst fyller det visuelle tomrommet med budskapet som bildet skulle ha formidlet.

Uten eksplisitte dimensjoner klapper plassholderen sammen, og layouten forskyves når bildet lastes inn. Angi begge attributtene (samt den tilsvarende inline-stilen), slik at cellen reserverer plass uansett om bildet noen gang lastes inn.

Outlook setter inn et lite mellomrom under inline-bilder. Bruk style="display:block" på hver <img> for å fjerne mellomrommet og sikre en jevn vertikal rytme på tvers av alle klienter.

Eldre klienter legger til en blå kant rundt <a><img></a>. Angi border="0" som attributt på bildet og style="border:0" inline, slik at bilder pakket inn i handlingsoppfordringer gjengis uten uønskede kanter.

E-postklienter har ikke noe konsept om «denne siden». Hver image src må være en absolutt https://-URL som peker til et offentlig tilgjengelig CDN. Lokale stier, relative stier og http://-URL-er (blandet innhold) kan slutte å laste uten noen synlig feilmelding.

Bruk en rask bildevert med geografisk distribusjon. Noen klienter henter bilder via proxyer (Gmail), som legger til sitt eget hurtigbufferlag. Førsteparts-CDN-er unngår langsom lasting fra opprinnelsesserveren og sørger for at bilder lastes inn jevnt på tvers av regioner.

For heltebakgrunner bør CSS background-image kombineres med en bgcolor som samsvarer med den dominerende fargetonen. Hvis bildet blokkeres, viser cellen fortsatt en fornuftig farge, og tekst lagt over bgcolor forblir lesbar — slik unngår du katastrofen med hvit tekst på en hvit blokk.

Gjengi bilder i 2x-oppløsning og skaler dem ned via width-attributtet, slik at de ser skarpe ut på skjermer med høy DPI: En kilde på 600x600 som vises med width="300" height="300", ser skarp ut på Retina. Ulempen er økt båndbreddebruk, så hold filstørrelsene små med komprimering på nivå med WebP.

Animerte GIF-er fungerer i de fleste klienter, bortsett fra Outlook (som bare viser det første bildet). Utform det første bildet slik at det gir mening som et statisk bilde — overskriften, CTA-en eller den viktigste verdien må være lesbar selv uten resten av animasjonen.

Behandle bilder som en forbedring, ikke som selve budskapet. Bruk absolutte https-URL-er, angi width/height/display:block/border:0, skriv meningsfull alternativ tekst, bruk et raskt CDN, kombiner bakgrunner med bgcolor-reserver, utform bilder i 2x-oppløsning for Retina, og husk at Outlook stopper GIF-er på det første bildet.