Bilder i nyhetsbrev: en praktisk guide

Ge varje bild en tydlig uppgift

Ett produktfoto kan visa en ny vara. En evenemangsbild kan hjälpa läsaren att föreställa sig platsen eller aktiviteten. Ett diagram kan förklara en förändring tydligare än ett textstycke. Välj bilden efter vad den hjälper läsaren att förstå i just det här mejlet.

Fundera på vad som skulle gå förlorat om du tog bort bilden. Är den bara dekoration kan en mindre bild eller ingen bild alls ge budskapet mer plats. Visar fotot en viktig produktdetalj, välj en vinkel där detaljen syns tydligt även på en mobil.

Den här guiden handlar om bilder som visas i nyhetsbrevet. För foton som skickas som nedladdningsbara bilagor finns vår guide till att komprimera bilder för e-post.

Skriv det viktigaste även utanför bilden

Skriv rubrik, viktig information och huvudlänk som text i nyhetsbrevsredigeraren, till exempel i Moosend. Vid en rea behöver rabatt, villkor och slutdatum finnas där; för ett evenemang gäller det datum, plats och bokningslänk. En reklambild kan stödja informationen, men bör inte vara det enda stället där den finns.

Välj alt-text efter bildens uppgift:

• Ett foto som tillför användbar information: beskriv detaljen läsaren behöver, till exempel produktens synliga form eller en egenskap.
• En rent dekorativ bild: lämna alt-texten tom om bilden inte tillför information och inte är en länk. W3C:s guide till dekorativa bilder förklarar varför onödiga beskrivningar kan störa den som använder skärmläsare.
• En bild som är länkens enda innehåll: ange destination eller handling, till exempel ”Se den blå muggen”, i stället för att bara beskriva utseendet. Se W3C:s guide till funktionella bilder.

Alt-text ersätter inte mejlets vanliga text: vissa appar visar den inte i alla situationer. Mailchimp förklarar begränsningarna. Fler exempel finns i vår guide till alt-text.

Anpassa bilden till din e-postmall

Börja med måtten som rekommenderas för mallens bildblock. Ett foto som fyller hela spaltbredden och ett litet produktkort behöver olika bildfiler. Beskär en kopia för det tillgängliga utrymmet utan att sträcka motivet. Använd vid behov beskärningsverktyget.

Skilj på bredden som visas i mejlet och filens pixelmått. Om ett foto visas 600 pixlar brett kan du jämföra filer som är 600 och 1200 pixlar breda, men visa båda i samma 600 pixlar breda utrymme. Den bredare filen ger fler bildpixlar för en högupplöst skärm; den ska inte göra mejlet bredare. Den kräver också ett tillräckligt stort original och kan innebära en större fil att ladda ned. Måtten är exempel: följ mallens råd och jämför de mottagna mejlen. Mailchimps rekommendationer varierar mellan mallar och innehållsblock.

Kontrollera både att nyhetsbrevstjänsten accepterar filen och att bilden visas i det mottagna mejlet i apparna du testar. En lyckad uppladdning bevisar inte att bilden visas rätt för mottagarna. JPEG är en praktisk utgångspunkt för foton; PNG passar för transparens och grafik. Mailchimp rekommenderar JPG, PNG eller GIF i sin guide till mallbilder. Läs din egen tjänsts råd innan du återanvänder en bildfil från webbplatsen.

Om du använder en animerad GIF ska första bildrutan fungera på egen hand. Vissa mottagare kan bara se den; Microsofts animationsguide förklarar hur animationsinställningar kan orsaka detta i Outlook. Lägg inte ett nödvändigt steg eller ett erbjudande enbart i senare bildrutor.

Kontrollera både bildernas detaljer och deras sammanlagda filstorlek. Flera stora bilder kan göra mejlet långsamt att ladda. Vår guide till att minska filstorleken beskriver hur du gör mindre kopior.

Exempel: presentera en ny produkt

Tänk dig en butik med heminredning som presenterar en ny blå keramikmugg. Följande versioner använder samma produktfoto:

Beskär fotot i den andra versionen så att muggen och handtaget syns även på mobilen. Om fotot är en separat länk till produkten, ge länken lämplig alt-text och kontrollera vart både bildlänken och textlänken leder.

Testa mejlet som mottagaren ser det

Redigerarens förhandsvisning hjälper dig att ordna innehållet, men e-postappar kan visa samma meddelande på olika sätt. Skicka ett testmejl via nyhetsbrevstjänsten och öppna det mottagna mejlet på dator och mobil. Testa om möjligt de appar läsarna använder, till exempel Gmail, Outlook eller Apple Mail. Mailchimps guide till förhandsvisning och testning förklarar varför båda behövs.

• Kontrollera huvudmotivet och beskärningen. Syns ansikten, produkter och viktiga detaljer utan att bilden sträcks eller layouten blir bredare?
• Granska bilden i den visade storleken. Går den att förstå utan att zooma? Skriv även nödvändiga etiketter och diagramförklaringar i mejlets text.
• Prova ljust och mörkt läge där det finns. En mörk logotyp med transparent bakgrund kan bli svår att se på en mörk yta. Prova en version med en kontrasterande kontur eller en lämplig enfärgad bakgrund i själva bilden och kontrollera båda lägena. Mailchimps guide till mörkt läge tar upp logotypers kontrast och skillnader mellan appar.
• Visa mejlet med bilder blockerade om appen tillåter det. Läs innehållet som finns kvar, kontrollera alt-texten och se till att huvudlänken är tillgänglig.
• Följ länkarna. Kontrollera klickbara bilder och knappar separat; de kan leda till olika sidor.

Om en bild saknas, ta reda på orsaken

Gå igenom kontrollerna i ordning. Klassiska Outlook kan blockera externa bilder, enligt Microsofts nedladdningsguide. Gmail kan dölja bilder i meddelanden som verkar misstänkta; se Gmails bildinställningar.

1. Kontrollera om bilderna laddas i det mottagna testmejlet. Om appen erbjuder att visa eller ladda ned bilder, tillåt det för ditt eget testmejl. Dyker de upp var det appen som blockerade dem. Komprimering kan inte kringgå den inställningen.
2. Hitta bilden som inte visas i nyhetsbrevsredigeraren. Öppna bildblocket och kontrollera att rätt fil i bildbiblioteket är vald. Saknas filen, ladda upp en sparad kopia igen och välj den nya filen. För en externt lagrad bild, kontrollera adressen som blocket använder.
3. Kontrollera åtkomsten till en extern fil. Öppna bildens direkta adress i ett privat webbläsarfönster utan att logga in. En inloggningsruta eller delningssida är inte bildfilen. Använd tjänstens bildbibliotek eller en lämplig offentlig bildadress i stället. Ett lyckat test här visar att webbläsaren kommer åt filen utan inloggning, inte att alla e-postappar kan visa den.
4. Undersök skillnader mellan appar. Om filen går att nå men inte visas i en app, börja med den appens bildladdningsinställningar. Kontrollera sedan formatet mot tjänstens råd. Prova en JPEG-kopia för ett foto eller PNG när transparens behövs och lägg in den via ett vanligt bildblock. Om en egen mall fortfarande inte fungerar, be den som underhåller mallen att granska bildens HTML-kod.
5. Skicka ett nytt test efter ändringen. Öppna det i appen där problemet fanns. Kontrollera bilden, dess aktuella alt-text och både bildlänken och den separata textlänken, om de används.

Mailchimps felsökningsguide förklarar problem med bildadresser, begränsad åtkomst och visning. Följ din egen tjänsts instruktioner för att välja eller ersätta filer i bildbiblioteket.

Sista kontrollen före utskick

• Beskärning, detaljer och filstorlek passar mallen.
• Huvudbudskapet och länken fungerar utan bilder.
• Alt-texten passar varje bilds uppgift.
• Första bildrutan i en eventuell GIF fungerar ensam, och logotyper syns i både ljust och mörkt läge.
• Det slutliga testmejlet har kontrollerats i relevanta appar, även bildkällor och länkmål.