Afbeeldingen optimaliseren voor Magento 2: 4 tips

* Deze blog is afkomstig van onze partner Skyberate. Lees hier meer over de veranderingen van Skyberate.

Afbeeldingen optimaliseren voor Magento 2: 4 tips

Nog te veel webshops gebruiken verouderde, niet-geoptimaliseerde afbeeldingen die niet bijdragen aan de laadtijd van de pagina. Terwijl iedereen zich focust op het SEO vriendelijk inrichten van de pagina, besteden ze te weinig aandacht aan een van de belangrijkste factoren om de paginalaadtijd te verbeteren: geoptimaliseerde afbeeldingen.

Wil je meer bezoekers aantrekken en wil je dat deze langer op je webshop blijven, start vandaag nog met het optimaliseren van afbeeldingen. Het optimaliseren van afbeeldingen leidt tot een snellere website en een hogere positie in de SERP. Een kans die anno 2021 veel webshops nog laten liggen.

In deze blog behandelen we de voordelen van het optimaliseren van afbeeldingen, welk bestandstype je het beste kunt gebruiken en geven we je een viertal tips waarmee je direct aan de slag kunt.

Waarom is het optimaliseren van afbeeldingen voor Magento 2 belangrijk?

Het optimaliseren van afbeeldingen voor Magento 2 brengt een aantal voordelen met zich mee. Het is daarom belangrijk dat iedere webshop dit onderwerp serieus aanvliegt en consistent blijft doen. Het optimaliseren van afbeeldingen heeft de volgende voordelen:

1. Afbeeldingen met een kleine bestandsgrootte zorgen voor een betere gebruikerservaring omdat de content sneller geladen wordt;
2. Afbeeldingen met een kleine bestandsgrootte zorgen voor kortere laadtijden;
3. Een betere gebruikerservaring en korte laadtijden zorgen voor meer conversie;
4. Zoekmachines houden van snelle websites en plaatsen deze hoger in de SERP;
5. Verbruik van minder opslag en bandbreedte.

Zoals je leest maken afbeeldingen onderdeel uit van je zoekmachine-optimalisatie (SEO) en conversie-optimalisatie. Daar draait het uiteindelijk om. Ze hebben invloed op je ranking, vindbaarheid en spelen een belangrijke rol in de manier waarop bezoekers je webshop ervaren.

Waar moet je opletten bij het optimaliseren van afbeeldingen?

We hebben vijf belangrijke punten opgeschreven waarmee je rekening moet houden bij het optimaliseren van afbeeldingen. Gebruik ze als checklist, elke keer voordat je nieuwe afbeeldingen uploadt. Dan kan het niet misgaan.

Bestandsgrootte: Naast video’s zijn hoogstwaarschijnlijk afbeeldingen over het algemeen verantwoordelijk voor de grootte van je webpagina. Er zijn verschillende bewerkingsprogramma’s en tools die je kunt inzetten om de afbeeldingen kleiner te maken, zonder kwaliteitsverlies. Vooral bewerkingsprogramma’s zoals Photoshop en Gimp zijn hiervoor geschikt. Of online tools zoals TinyPNG, TinyJPG of Optimizilla. Over het algemeen wil je dat afbeeldingen niet groter zijn dan 500kb. Om de bestandsgrootte te drukken kun je de afmeting van de afbeelding verkleinen of de afbeelding comprimeren. Let er wel op dat dit afbeeldingskwaliteit wordt gewaarborgd.

Let er op dat je voor sommige platforms niet gebruik te maken van externe tools maar deze kennen zelf zogeheten ‘Image optimizers’. Later meer hierover.

Afbeelding afmeting: Net als het optimaliseren van de bestandsgrootte, wil je ook de afmeting optimaliseren. Doorgaans hebben afbeeldingen een hoge resolutie en een grote afmeting, vaak groter dan nodig is. Wanneer je een foto maakt met een mobiele telefoon of digitale camera kan deze zomaar een grootte van 3000 x 3000 pixels hebben terwijl de afbeelding op je webshop maar 300 x 300 pixels is. Een te grote afbeelding kan leiden tot een ongewenste bestandsgrootte wat leidt tot een vertraging in de laadtijd van je webpagina.

Doorgaans wil je dat afbeeldingen een maximale breedte van 1500 pixels hebben. En headers en achtergrondafbeeldingen niet breder dan 2500 pixels. Experimenteer met deze afmetingen totdat je de juiste balans in afmeting en bestandsgrootte hebt gevonden.

Laadtijd: Zoals bij ‘Bestandsgrootte’ en ‘Afbeelding afmeting’ aangegeven zijn afbeeldingen hoogstwaarschijnlijk voor een groot deel verantwoordelijk voor de laadtijd van je webpagina. Hoe groter de bestanden, des te langer het duurt voordat de webpagina geladen is. Bezoekers die lang moeten wachten haken snel af. Daarom heeft Google destijds besloten om laadtijden mee te laten wegen in het rankingsproces. Een snelle webshop rankt hoger. Via Google PageSpeed Insights kun je per webpagina zien welke afbeeldingen optimalisatie nodig hebben.

Unieke afbeeldingen: Kies eigen, unieke afbeeldingen. Bij tekst wordt vaak gesproken over duplicate content en hoe het schadelijk kan zijn voor je ranking. Dit geldt hetzelfde voor afbeeldingen. Zorg voor eigen, unieke afbeeldingen in je webshop. Neem bij voorkeur dus niet de afbeeldingen over van leveranciers, maar ga uit van eigen kracht.

Alt-tags: Door alt-tags toe te voegen aan afbeeldingen begrijpen zoekmachines beter wat er op de webpagina staat en daardoor rank je beter. Gebruik zoektermen die aansluiten bij de tekst op de webpagina. Als je bijvoorbeeld zoekwoorden onderzoek hebt gedaan voor het bouwen van de pagina kun je de zoekwoorden terug laten komen in de alt-tags.

Welke bestandstype gebruik je voor afbeeldingen?

Voordat we overgaan tot het comprimeren van afbeeldingen hebben we voor je in kaart gebracht wanneer je welk bestandstype inzet. Kies je voor JPG/JPEG of voor PNG?

Wanneer gebruik je JPG/JPEG

Voor de meeste webshops is JPG (of JPEG) de meest ideale keuze. JPG is ideaal voor fotografie en andere beelden met complexe kleuren. Gebruik een JPG-bestandstype voor de volgende soorten afbeeldingen:

• Pagina’s en blogs (enkel bij afbeeldingen met veel complexe kleuren)
• Producten
• Banners en diavoorstellingen

Wanneer gebruik je PNG

Zoals bij JPG aangegeven gebruik je het bestandstype voor afbeeldingen met complexe kleuren. Zoals je vast al had geraden gebruik je PNG bij afbeeldingen met weinig complexe kleuren, zoals pictogrammen. Een voordeel van PNG is dat het afbeeldingen een transparante achtergrond kan geven. Dit maakt een PNG-bestandstype ideaal voor:

• Logo’s
• Pictogrammen
• Pagina en blogs (enkel bij vlakke afbeeldingen zonder complexe kleuren)

4 tips voor het optimaliseren van afbeeldingen in Magento 2

Starten met het optimaliseren van afbeeldingen in Magento 2? Volg dan één of meerdere van de onderstaande tips.

Tip 1: Handmatige afbeelding optimalisatie

De meest voor de hand liggende en meest gebruikelijke manier om afbeeldingen te optimaliseren: Is het handmatig optimaliseren van afbeeldingen met behulp van Photoshop en Gimp of gratis online tools.

De online tools TinyPNG, TinyJPG of Optimizilla zijn gratis afbeelding optimalisatieprogramma’s waarmee je de grootte van afbeeldingen tot het minimum kunt beperken. Bij alle drie de programma’s kun je tot 20 afbeeldingen uploaden en comprimeren. De tools zijn eenvoudig te gebruiken en aan te raden voor iedere webshop.

Photoshop is een welbekend fotobewerkingsprogramma, alleen niet gratis. Wil je gebruik maken van Photoshop, dan dien je daar een licentie voor af te nemen. Heb je niet de mogelijkheid om een licentie voor Photoshop te kopen? Dan kun je gebruik maken van Gimp. Gimp is een soortgelijk fotobewerkingsprogramma als Photoshop, alleen dan gratis.

Tip 2: Omzetten naar WebP-afbeeldingen

Je vraagt je vast af wat WebP-afbeeldingen zijn, vooral omdat we net spraken over JPG/ JPEG en PNG. Het WebP-bestandstype is ontwikkeld door Google. Dit bestandstype is speciaal voor het internet ontworpen en heeft meer compressie dan de gemiddelde JPG- en PNG-afbeeldingen.

Voor het converteren van afbeeldingen naar een WebP-bestandstype kun je de Magento 2 WebP Images Extension gebruiken. Met deze extensie kun je de huidige en toekomstige afbeeldingen automatisch naar WebP converteren. WebP-afbeeldingen zijn tot wel 50% kleiner dan JPG en PNG.

Nu vraag je je vast af waarom je een extensie moet gebruiken in plaats van de afbeeldingen met een online converter te converteren naar WebP.

Helaas ondersteunen nog niet alle servers en browsers het gebruik van WebP-afbeeldingen, hierbij gaat het vooral om oude browsers zoals IE en KaiOS. Met de Magento 2-extensie worden JPG- en PNG-afbeeldingen niet vervangen. Het maakt gewoon een kopie. Mensen die je webshop bezoeken via een browser die WebP-afbeeldingen nog niet ondersteunt, krijgen gewoon de originele JPG of PNG-afbeelding te zien. JPG en PNG zijn dus nog steeds relevant. Deze extensie zorgt daarmee niet alleen voor een betere gebruikerservaring en een snelle website, maar ook voor afbeeldingen van hoge kwaliteit, ongeacht de browser.

Test de module eerst zorgvuldig op een Magento 2 ontwikkelomgeving. Mocht er iets misgaan, dan heeft dat geen effect op je live-website.

Tip 3: Maak gebruik van Lazy Loading

Naast het omzetten van afbeeldingen naar het gewenste bestandstype, is er nog een manier om de webpagina sneller te maken. De meeste webshops kennen veel afbeeldingen per webpagina, welke allemaal geladen worden bij het bezoeken van de webpagina. Dit kan het laden van de webpagina vertragen. Met ‘Lazy Loading’ worden afbeeldingen pas geladen zodra deze ‘in beeld zijn’. In programmeertaal spreken we over afbeeldingen ‘above the fold’ en ‘below the fold’ – binnen en buiten beeld. Je zegt daarmee tegen de browser dat de afbeeldingen pas getoond hoeven te worden zodra de bezoeker naar dat deel van de pagina scrolt.

Voor het toepassen van Lazy Loading kun je de Magento 2 Image Lazy Load Extension gebruiken. Deze module is volledig compatibel met de Magento 2 WebP Images Extension module.

Test ook deze module zorgvuldig op een Magento 2 ontwikkelomgeving. Wanneer het duidelijk is dat het een toegevoegde waarde is voor de gebruikerservaring en laadtijd, voer je de wijzigingen door op je live-omgeving.

Tip 4: Gebruik een Magento Image Optimizer

Standaard biedt Magento 2 een tweetal image optimizers aan, namelijk: PHP GD2 en ImageMagick. Welke Image Optimizer staat ingesteld voor je Magento webshop kun je vinden onder: Stores > Settings > Configuration > Admin > Developer > Image Processing Settings. In de meeste gevallen staat standaard PHP GD2 ingesteld. Liever gebruik maken van een andere Image Optimizer? Kies bij het dropdown menu voor ImageMagick. Als je het dropdown menu niet kunt gebruiken moet je Use System value uitvinken. Flush na het wisselen van Image Optimizer de afbeelding catalogus om de wijziging van kracht te maken.

Wanneer kies je voor welke Image Optimizer?

Als je webshop gebruik maakt van veel grote afbeelding is PHP GD2 waarschijnlijk de juiste keuze. Daarintegen ondersteunt ImageMagick grotere afbeeldingsformaten en is beter in het produceren van afbeeldingen van hogere kwaliteit. Toch heeft Imagemagick ook zijn nadelen. Hoewel de Image Optimizer afbeeldingen van hogere kwaliteit produceert, gaat dat in sommige gevallen ten koste van de bestandsgrootte. Die we juist graag klein willen houden in verband met de laadtijd van de pagina. Heeft de pagina veel grote afbeeldingen, dan wil je misschien liever PHP GD2 gebruiken. Heeft de pagina weinig afbeeldingen en wil je dat deze superscherp getoond worden, dan is Imagemagick de optimizer voor jou.

Kortom

Of je er nu voor kiest om afbeeldingen handmatig te optimaliseren of gebruik te maken van tools, dat het moet gebeuren is duidelijk. Met het optimaliseren van afbeeldingen zet je de volgende stap in het verbeteren van je webshop.

We hopen dat dit artikel je heeft kunnen overtuigen van de voordelen van het optimaliseren van afbeeldingen. En de handvaten geeft om ermee aan de slag te gaan.