Als eigenaar van een webshop wil je graag dat je website snel en soepel werkt voor je klanten. Er zijn veel aspecten die de laadtijden van jouw webshop bepalen, afbeeldingen zijn er ook een. Het niet optimaliseren van afbeeldingen in een Magento 2 webshop kan voor verminderde prestaties zorgen, wat niet nodig is. Dit zien wij ook veel voorbij komen. Maar hoe zorg je ervoor dat je afbeeldingen snel laden en toch van goede kwaliteit zijn? In deze blog leggen we meer uit over de soorten afbeeldingen en geven een paar tips om zelf aan de slag te gaan met het optimaliseren van jouw afbeeldingen.
Verschillende soorten afbeeldingen in Magento 2
Er zijn vier verschillende soorten productafbeeldingen in een Magento 2 webshop. Deze hebben allemaal hun eigen functie en grootte. We lopen ze kort langs:
- Base image: Een base image is de originele afbeelding die dient als basis voor andere afbeeldingsformaten op een Magento 2 webshop. Dit is ook de prominente foto op een productpagina.
- Thumbnail image: Een thumbnail image is een kleine afbeelding die wordt gebruikt om een voorbeeld van een grotere afbeelding weer te geven.
- Small image: Een small image is een middelgrote afbeelding die wordt gebruikt als de productafbeelding in het categorie overzicht.
- Swatch image: Een swatch image is een kleine kleur of textuur afbeelding die wordt gebruikt om een productkenmerk te visualiseren.
Welke bestandstypen worden gebruikt voor afbeeldingen?
Door de jaren heen zijn er veel ontwikkelingen in de soorten bestandstypen die gebruikt worden op websites en daarbuiten. De meest voorkomende bestandstypes zijn JPG en PNG. JPG-bestanden zijn handig voor afbeeldingen met veel details en kleuren, maar kunnen wel kwaliteitsverlies ervaren bij hoge compressie. PNG-bestanden zijn ideaal voor afbeeldingen met transparante achtergronden en tekst, maar kunnen groter zijn dan JPG-bestanden.
Daarnaast is er WebP, een ‘relatief nieuw’ bestandstype dat speciaal ontwikkeld is voor het web door Google. WebP-bestanden zijn kleiner gecomprimeerd dan JPG en kunnen tot 26% schelen in grootte, terwijl de kwaliteit van de afbeelding behouden blijft. WebP is dus een goede keuze voor het optimaliseren van afbeeldingen op een Magento 2 webshop.
Perfecte grootte op elk device met source sets
Desktop, tablet of mobile. Elk scherm heeft een andere grootte. Het inladen van een desktop afbeelding op een mobile device kost veel tijd en de afbeelding heeft een onnodig hoge resolutie. Dit voorkom je door gebruik te maken van source sets. Een source set is een set van afbeeldingen met verschillende formaten en resoluties die worden aangeboden aan de browser.
Met behulp van de source set bepaald de browser op basis van het formaat van het scherm welke afbeelding het beste past. Op deze manier hoeft er minder data over het netwerk te worden verstuurd, waardoor de laadtijd van de pagina wordt verminderd.
Waarom moet je je afbeeldingen optimaliseren voor je Magento 2 webshop?
Het optimaliseren van afbeeldingen voor je Magento 2 webshop is iets waar je absoluut mee bezig moet zijn. In je Magento webshop toon je namelijk (afhankelijk van je catalogus grootte) veel producten met afbeeldingen, die natuurlijk allemaal geladen moet worden.
Het optimaliseren van je afbeeldingen is daarom cruciaal voor een snelle en efficiënte webshop. Niet geoptimaliseerde afbeeldingen kunnen leiden tot langere laadtijden. Dat is niet alleen frustrerend voor bezoekers, maar het kan ook leiden tot een slechtere ranking in zoekmachines omdat die ook kijken naar de laadtijden van jouw pagina’s.
Bovendien kan het verbruik van serverruimte resulteren in extra kosten (zonde!). Door afbeeldingen te optimaliseren, kan je webshop sneller laden en beter presteren, wat weer kan bijdragen aan een hoger conversieratio en meer tevreden klanten.
Afbeeldingen optimaliseren, hoe dan? Deze tips hebben we voor jou!
Weet je niet waar je moet beginnen? Dat snappen wij helemaal. Met deze vijf tips kan je zelf aan de slag gaan met het optimaliseren van jouw afbeeldingen.
Tip 1: WebP format gebruiken
Zoals we ook wel eerder hebben benoemd is WebP een relatief nieuwe en innovatieve technologie voor afbeeldingscompressie. Het biedt een veel kleinere bestandsgrootte dan JPG, met weinig verlies in kwaliteit. Het kan soms wel 26% schelen in bestandsgrootte. Dit kan de laadtijd van je webshop aanzienlijk verbeteren. Gelukkig is WebP ook beschikbaar in Magento 2 met behulp van de Webp module van Yireo. Je kunt zelfs de kwaliteit van de afbeeldingen instellen voor het beste resultaat.
Tip 2: Vectors (SVG) gebruiken
Naast JPG en PNG, zijn er nog andere bestandstypen die je kunt gebruiken voor je afbeeldingen. SVG is zo’n type, en het is vooral handig voor iconen en andere eenvoudige afbeeldingen. Vaak worden volledige font pakketten ingeladen alleen voor de iconen. Dit kost veel ruimte en werkt erg vertragend. SVG iconen kun je los in de code plaatsen, wat het inladen van volledige icon libraries overbodig maakt. Nog een voordeel van SVG is dat ze altijd scherp zijn, ongeacht hoe ver je inzoomt.
Tip 3: SEO vriendelijke bestandsnamen
Dit is dan wel geen technische verbetering, maar wel iets wat onze SEO specialisten graag willen meegeven als tip. Zorg ervoor dat je bestandsnamen SEO-vriendelijk zijn en gerelateerd zijn aan de inhoud van de afbeelding. Dit helpt zoekmachines de afbeeldingen beter te begrijpen en kan leiden tot hogere posities binnen image search in zoekmachines. Maar vergeet ook de ALT tekst niet!
Tip 4: CDN voor minder serverbelasting
Wanneer een afbeelding geladen wordt, wordt deze opgevraagd bij de server. Een Content Delivery Network (CDN) kan helpen om de serverbelasting te verminderen. Een CDN is een netwerk van servers die je afbeeldingen (en andere bestanden) vanaf een locatie dichter bij de eindgebruiker levert. Dit betekent dat je afbeeldingen sneller kunnen laden en de prioriteit van je server elders ligt dan het serveren van afbeeldingen aan de eindgebruiker.
Het gebruik van een CDN is vooral handig als je website internationaal opereert en je buitenlandse klanten snel wilt bedienen. Door de afbeeldingen op een server in het betreffende land op te slaan waar veel klanten vandaan komen, kan de laadtijd omlaag worden gebracht.
Tip 5: Lazy loading & Fetch Priority
Langzaam laden? Je wilt juist dat alle afbeeldingen snel worden geladen. Maar wanneer het device direct alle afbeeldingen van een pagina inlaadt, kost dit veel MB’s. Lazy Loading zorgt ervoor dat alleen de afbeeldingen tot aan de fold van de pagina worden opgehaald, pas als de gebruiker verder scrollt worden de overige afbeeldingen geladen. Met Fetch Priority kan je enkele afbeeldingen een hoge prioriteit meegeven, zodat deze juist als eerste worden geladen. Denk hierbij aan een banner afbeelding bovenaan je pagina.
Deze techniek was vroeger nogal complex met javascript, maar tegenwoordig zit het in de meeste browsers ingebouwd. Nu moet het natuurlijk door de developer wel juist worden geconfigureerd! Helaas zit deze functie niet standaard in Magento.
Geef die afbeeldingen een hoge prioriteit!
Het optimaliseren van je afbeeldingen kan veel performance schelen. Bezoekers hebben een korte aandachtsspanne en haken na enkele seconden laden al af. Hoe erg is het wanneer een webshop in stukken laadt? Wij zijn erg kritisch over het optimaliseren van afbeeldingen en zijn continu op zoek naar nieuwe mogelijkheden om de performance te verbeteren. Wil je graag de afbeeldingen in jouw Magento 2 webshop optimaliseren en je performance verbeteren? Wij kijken graag met je mee!
