Optimaliseren van afbeeldingen met Google Page Speed en jpegoptim

Het optimaliseren van afbeeldingen is een groot onderwerp. Moderne website, webshops, apps en webapplicaties maken steeds meer gebruik van afbeeldingen. Deze afbeeldingen worden niet alleen groter, maar ook mooier! Om een zo scherp mogelijke foto te plaatsen is het nodig om een foto van hoge kwaliteit te hebben.

photo credit: stallio via photopin cc

photo credit: stallio via photopin cc

Het grote nadeel hiervan is ( en zeker op een mobiele internetverbinding ) is de bestandsgrootte. Maar hoe zorg je er nu voor dat je een mooie grote afbeelding kan laten tonen zonder al te veel zichtbaar beeldverlies? Allereerst kun je controleren of je afbeeldingen geoptimaliseerd zijn, dit kun je doen met behulp van Google Page Speed. Deze dienst van Google bied je verschillende tools over hoe jij je website, webshop of webapplicatie kunt verbeteren.

Een van deze handige tools is Google Page Speed Insights. Tik hier het webadres van je webshop, website of webapplicatie in en Google Page Speed Insights zal de pagina analyseren voor je, geheel gratis.

Google Page Speed Insights

Google Page Speed Insights

Een van de meest interessante features van Google Page Speed Insights is het gedeelte “Optimize Images“. Deze vertelt je welke resources ( lees: afbeeldingen ) geoptimaliseerd kunnen worden, en hoeveel data traffic je dit kan gaan schelen. Dit geldt voor zowel mobiel als desktop gebruik.

Google Page Speed Insights analysing

Google Page Speed Insights analysing

In de afbeelding hieronder zie je dat de afbeeldingen op de homepage van de website marcobax.nl kunnen worden geoptimaliseerd, echter is de winst zo klein dat dit niet interessant genoeg is om door te voeren. Wanneer je een aantal megabytes kunt verkleinen, is het zeker aangeraden om de afbeeldingen te optimaliseren!

Google Page Speed Optimize Images

Google Page Speed Optimize Images

Het optimaliseren van je JPG bestanden met Jpegoptim

Let op: vanaf hier is het nodig om kennis te hebben van hosting, en GNU/Linux. De waarheid van het opslaan van een bestand in JPG formaat is dat je nooit 100% zeker weet hoeveel compressie goed is. Meestal speel ik met de instellingen totdat ik een balans heb gevonden tussen kwaliteit en bestandsgrootte. Het feit dat Google Page Speed een cijfer kan geven aan de compressie van je afbeeldingen geeft aan dat deze een of ander algoritme gebruikt om een waarde te hangen aan het lossless comprimeren van JPG en PNG afbeeldingen.

Het lossless opslaan van afbeeldingen houdt in dat de bestandsgrootte zo klein mogelijk kan worden gemaakt zonder al te veel (zichtbare) beeldverlies.

Je kunt heel gemakkelijk Jpegoptim in een GNU/Linux omgeving installeren. Je kunt Jpegoptim terug vinden in de “Graphics (universe)” wanneer je Ubuntu draait, installeer deze via:

Voor CentOS distributies voer je onderstaande commando’s in:

Wanneer je de optimalisatie van afbeeldingen over je website wil toepassen, of simpelweg de grootte van fotoalbums wil verkleinen, dan kun je onderstaand script uitvoeren. Deze scant recursief mappen en vind JPG bestanden. Deze bestanden worden direct geoptimaliseerd. Let op: de orginele bestanden worden overschreven met de geoptimaliseerde versie!

it script gebruikt de optie –strip-all om onnodige tekst informatie te verwijderen zoals EXIF data en comments. Deze zijn niet nodig voor webafbeeldingen, het is wel raadzaam om deze voor je eigen afbeeldingen te behouden.

Nog meer optimalisatie tools

Mocht je geinteresseerd zijn in nog meer optimalisatie tools, dan kan ik je onderstaande tools aanraden:

Optimalisatie van een aantal bestanden met behulp van een desktop applicatie ( Mac OS X ): ImageOptim sleep afbeeldingen naar deze app en deze worden automatisch geoptimaliseerd.
Optimalisatie van afbeeldingen in een WordPress installatie. Gebruik hiervoor Smush.it. Deze dienst van yahoo optimaliseert afbeeldingen volledig automatisch, en je kunt reeds bestaande afbeeldingen in de media manager ook optimaliseren. Enige nadeel is dat er 1 bestand per keer kan worden geoptimaliseerd, en deze mag niet groter zijn dan 1 megabyte.
Lossless optimaliseren van PNG bestanden: gebruik hiervoor TinyPNG. Deze verkleint PNG afbeeldingen sterk, werp wel eerst een blik op de resultaten aangezien je soms verschillen in kleuren kunt merken.

Extra tip van Arjen (eperium.com):
Deze gratis opensource tool optimaliseert afbeeldingen ook volledig automatisch. FastStone Photo Resizer

2 antwoorden

  1. Arjen 5 november 2014 / 11:04 am

    Goed artikel. Het optimaliseren van afbeeldingen speelt zeker een grote rol bij het verbeteren van de laadtijd van de pagina. Zelf wil ik graag de gratis tool: ‘FastStone Photo Resizer’ toevoegen aan de lijst. Deze gratis opensource tool optimaliseert afbeeldingen ook volledig automatisch. Daarnaast merk ik ook dat veel websites de verkeerde afbeeldingsformaten gebruiken. Afbeeldingen worden hierdoor met een te grote bestandsgroote ingeladen.

    • Marco Bax 5 november 2014 / 11:48 am

      Bedankt voor de goede tip Arjen, ik heb hem erbij gezet!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *