Afbeeldingen comprimeren

Afbeeldingen comprimeren

Dit jaar hebben we al een aantal malen gesproken over de snelheid van Magento, het gebruik van Pingdom tools en Google Page Speed Insights.

Een lange laadtijd gaat vaak gepaard met de vele CSS en Javascripts, maar ook met grote mooie afbeeldingen. Toch zorgen die grote mooie scherpe afbeeldingen voor een langere laadtijd en wellicht ook een ongeduldige bezoeker die weg klikt. Weg conversie..

Sommige punten zijn snel zelf te verbeteren. Hier licht ik het optimaliseren van de afbeelding graag even uit.

Het comprimeren van afbeeldingen kan zelf gedaan worden. Om dit zelf aan te pakken heb ik een voorbeeld hieronder geplaatst. Ik heb een kleine test op http://www.jpegreducer.com/ gedaan met 1 afbeelding die nu online staat en die voor komt in de adviezen van Google:

Het originele beeld is 36.32 KB.

orig

Een lagere compressie op de afbeeldingen levert het volgende resultaat:

90

De afbeelding is nu 18.44kb (+/- 70% kleiner). Je kan je voorstellen, wanneer dit met elke afbeelding wordt gedaan (voor elke shop), het inladen van de pagina’s een stuk sneller zullen gaan.

Voor het optimaliseren van de afbeeldingen zijn er niet alleen online scripts en programma’s te vinden. Deze kan je ook gewoon voor jouw PC of Mac vinden. Twee voorbeelden zijn Fileminimizer voor Windows en ImageOptim voor de Mac.

Zo zijn er ook wat lastigere trucs om de afbeeldingen sneller in te laden. Bij de snelheid van een pagina wordt door Google gekeken naar het aantal HTTP-requests. De browser laadt één voor één de afbeeldingen binnen je webshop. Jouw webshop is sneller geladen, wanneer er minder afbeeldingen zijn en dus minder HTTP-requests zijn. Er zal in sommige gevallen goed gebruik gemaakt kunnen worden van een CSS Sprite. Één grote afbeelding met allemaal verschillende buttons, statussen en icoontjes.

Zo zijn er nog meer technische verbeteringen die je kan maken aan je webshop. Er zijn bijvoorbeeld ook modules die dit automatiseren. Dit is een eenmalige tijdsintensieve aanbesteding, waarna alle afbeelding in het vervolg gecomprimeerd kunnen worden.

Heb je afbeeldingen al gecomprimeerd? Een kleine test gedaan? Is je laadtijd nog steeds meer dan 2 seconden? Vertel het ons en samen maken we de laadtijd onder die 2 seconden!