Over best practices voor e-mailafbeeldingen

Leer meer over best practices bij het gebruik van afbeeldingen in Klaviyo E-mail, waaronder aanbevelingen voor de grootte en hoe je afbeeldingen toevoegt. 

Best practices voor het gebruik van afbeeldingen in e-mail

Houd rekening met het volgende bij het maken van afbeeldingen voor gebruik in e-mail:

• Klaviyo ondersteunt JPEG, PNG en GIF afbeeldingsbestanden. Je kunt ook een WebP-bestand uploaden en ervoor kiezen dat Klaviyo het automatisch voor je converteert naar een PNG-bestand. Over het algemeen worden PNG-bestanden het beste weergegeven op verschillende apparaten, vooral voor afbeeldingen die tekst bevatten.  
• De maximale bestandsgrootte van afbeeldingen die door Klaviyo wordt ondersteund is 10MB. We raden echter aan om afbeeldingen te gebruiken die 1MB of kleiner zijn, omdat grotere afbeeldingen langzaam kunnen laden, wat leidt tot een slechte ontvangerservaring. De ingebouwde afbeeldingscompressietool van Klaviyo kan helpen bij het verkleinen van de bestandsgrootte van geüploade afbeeldingen zonder de kwaliteit noemenswaardig te schaden. 
• Op het web is het gebruik van een resolutie van 72 dpi de beste werkwijze. Probeer je afbeeldingen tussen 600 en 1000 px in de breedte te houden en minder dan 2000px in de hoogte voor afbeeldingen over de hele breedte, om een balans te vinden tussen afbeeldingskwaliteit en laadsnelheid. Afbeeldingen die minder zijn dan de volledige breedte van de e-mail kunnen kleiner zijn dan 600px.
• Merk op dat een afbeelding over de volledige breedte bij 72 dpi vaak groter zal zijn dan 1MB, en het verkleinen van de afbeelding kan resulteren in een afbeelding die zichtbaar wazig of van lage kwaliteit is. Houd bij het kiezen van afbeeldingen voor je berichten rekening met de afweging tussen afbeeldingskwaliteit en laadtijd: grote afbeeldingen verschijnen misschien niet meteen als iemand je e-mail opent, vooral als ze een langzame internetverbinding hebben. 
• Voeg altijd alt-tekst toe aan je afbeeldingen. Bepaalde inboxen, waaronder Outlook en Apple Mail, geven geen afbeeldingen weer totdat een ontvanger aangeeft dat hij ze wil zien. Het opnemen van alt-tekst helpt ontvangers die deze inboxen gebruiken om te begrijpen wat de bedoeling is van een afbeelding, en ondersteunt ook de toegankelijkheid. 

Een afbeeldingsblok invoegen

Een afbeelding toevoegen aan een template:

1. Sleep een afbeeldingsblok naar het voorbeeldcanvas en selecteer vervolgens welke afbeelding u wilt opnemen.
2. Zodra je het afbeeldingsblok hebt geplaatst, wordt je gevraagd om je afbeelding toe te voegen:

• Een of meer afbeeldingen in het blok plaatsen voor directe upload
• Uw computer doorzoeken om een of meer afbeeldingen te vinden en te uploaden
• Importeren vanaf een URL
• Een afbeelding kiezen uit je afbeeldingenbibliotheek
• Een afbeelding kiezen uit je productcatalogus (als je geïntegreerd bent met een e-commerce platform of een aangepaste catalogus hebt gesynchroniseerd)
• Een plaatshouder-URL of variabele reeks invoegen als je wilt dat een afbeelding dynamisch wordt ingevuld (alleen voor flow)

Als je een afbeelding uploadt, is de maximale grootte die je kunt uploaden 10 MB.

Automatische compressie van afbeeldingsbestanden

Klaviyo bevat een automatische afbeeldingscompressie als onderdeel van het uploadproces van afbeeldingen om je te helpen een balans te vinden tussen heldere afbeeldingen en snelle laadtijden. Merk op dat deze functie niet wordt ondersteund voor gifs.

Als je een afbeelding uploadt, worden in de stap Controleren je originele bestand en een gecomprimeerde versie ter vergelijking weergegeven. Elk voorbeeld toont de bestandsgrootte, samen met het procentuele verschil ertussen. Met de schakelaar boven de afbeeldingen kun je kiezen welke versie je wilt uploaden en Klaviyo voegt een Aanbevolen badge toe aan de voorgestelde keuze. Je kunt dit echter opheffen als je merkt dat de gecomprimeerde versie minder duidelijk is, wat kan gebeuren met kleinere originele bestanden.

Merk op dat als de originele afbeelding wordt aanbevolen, het afbeeldingsvergelijkingspaneel standaard wordt gesloten. Als je meerdere afbeeldingen tegelijk hebt geüpload, moet je voor elke afbeelding apart bekijken en de gewenste optie kiezen.

Instellingen uploaden

Als je de beoordelingsstap wilt overslaan bij het uploaden van afbeeldingen, pas dan je Upload instellingen aan. Als je een afbeelding uploadt, zie je een knop Instellingen uploaden.

Je keuze wordt hier opgeslagen voor toekomstige uploads. Je kunt kiezen:

• Vergelijken (standaard): Bekijken en kiezen tussen originele en gecomprimeerde versies.
• Gebruik originelen: Upload altijd je originele bestanden; geen reviewstap.
• Gebruik gecomprimeerd: Upload altijd de automatisch gecomprimeerde versie van Klaviyo; geen controlestap.

Een afbeelding bijsnijden

Afbeeldingen in afbeeldingsblok, splitsblok en tabelblok kunnen eenvoudig worden bijgesneden.

1. Klik op het afbeeldingsblok.
2. Klik op 'Bijsnijden' onder het afbeeldingspictogram aan de linkerkant.
   
   U kunt ervoor kiezen om een afbeelding bij te snijden tot een cirkel, een vierkant of een rechthoek met een aangepaste breedte en hoogte. Wanneer u een afbeelding bijsnijdt in de editor, blijft de volledige afbeelding behouden, wat betekent dat u het bijsnijden op elk moment kunt aanpassen of ongedaan maken.
3. Wanneer u klaar bent met bijsnijden, klikt u op de pijl terug om uw wijzigingen toe te passen. 
   

Formaat van een afbeelding wijzigen

Om een afbeelding te vergroten of verkleinen, gebruikt u de schuifregelaars in het canvas. 

Afbeeldingen in geüploade HTML-sjabloon

Voor HTML-sjablonen die je kopieert naar Klaviyo (met uitzondering van Mailchimp-sjablonen), upload je tijdens het importeren een zipbestand met je afbeeldingen.

Specifiek voor Mailchimp-sjablonen geldt dat als je een template uploadt die afbeeldingen bevat die al in Mailchimp zijn geladen, Klaviyo automatisch al deze afbeeldingen overneemt.

Zodra je een afbeelding hebt geüpload, kun je de knop Afbeelding invoegen gebruiken om nieuwe afbeeldingen te uploaden voor die template:

Beeldkwaliteit

Als je je zorgen maakt dat je afbeeldingen in je sjabloon niet zo schoon of scherp worden weergegeven als je zou willen, kun je stappen ondernemen om de afbeeldingskwaliteit te verbeteren.

Een van de gangbare standaarden voor het verbeteren van de scherpte van een gerenderde afbeelding in een e-mail is het invoegen van een afbeelding van 2x de gewenste grootte en vervolgens de afbeeldingsgrootte te verkleinen in je template. Er zijn twee manieren om dit te benaderen:

1. Voeg een grote, scherpe versie van je afbeelding in je template in, klik dan op Bewerken en wijzig de grootte naar de gewenste afmetingen.
2. Een natuurlijke grotere afbeelding invoegen (d.w.z. 600px breed) en op een kleiner formaat weergeven (d.w.z. 300px breedte) met CSS; voor deze aanpak moet je je afbeelding in een tekstblok plaatsen en de CSS-broncode aanpassen

Soorten afbeeldingen

Klaviyo ondersteunen de volgende afbeeldingsmodellen: JPEG, PNG en GIF.

U kunt WebP-bestanden uploaden en de ingebouwde converter van Klaviyo gebruiken om ze te converteren naar PNG-bestanden. Conversie wordt echter niet ondersteund voor geanimeerde WebP-bestanden.

Als je andere bestandsformaten hebt, zoals PSD of SVG, dan moet je deze voor het uploaden converteren naar een ondersteund afbeeldingstype.

Lees meer over welke typen afbeeldingen het beste zijn voor je e-mail.

De afbeeldingenbibliotheek

Afbeeldingen die je uploadt naar Klaviyo zijn zaak onder Inhoud > Afbeeldingen & merk > Afbeeldingen. Het verwijderen van een afbeelding uit je afbeeldingenbibliotheek verwijdert de afbeelding niet uit een sjabloon waar deze momenteel wordt gebruikt. 

Extra hulpbronnen

• Zo voeg je een achtergrondafbeelding toe aan een e-mailtemplate of sectie
• Litmus: Gids voor bestandsgrootte en laadtijden van e-mail
• Waarom wordt mijn e-mail afgekapt?