Website / webshop optimalisatie tip : lossless image compressie
Iedereen die mij een beetje kent weet dat ik een ware passie heb voor snelheid. In alles. Ik ben ongeduldig, rij graag net ietsjes te hard en hou dan ook van snelle auto’s, vliegtuigen, achtbanen, snowboarden en alles wat maar een beetje te maken heeft met snelheid. En dat geldt ook voor de websites die ik bouw. Ik krijg er een kick van om een zo “snappy” mogelijke website neer te zetten. Natuurlijk valt er een hoop te optimaliseren in de hard- en software configuratie van de webserver en de geheugen allocaties, het gebruik van SSD harddisks en zo meer, maar er zijn ook een aantal basics die de snelheid van jouw website of webshop aanzienlijk kunnen verbeteren. En daarmee dus ook de user experience. Ik heb het hier over lossless image compressie, het verkleinen van de bestandsgrootte van de plaatjes op je website of webwinkel, zonder te hoeven inboeten op kwaliteit (lossless). Ik geef je graag wat tips.
Online tools
Middels een aantal online tools zoals kraken.io of smush.it kan je (nieuwe) bestanden gemakkelijk online verkleinen. Er zijn ook plugins beschikbaar om via een API dit automatisch in WordPress voor je te laten regelen. Upload je JPEG, PNG of GIF bestanden en er zal een zip-filetje worden gemaakt met de gecomprimeerde bestanden.
Via de shell = lekker snel
Echte speedfreaks zoals ik doen het liever via de shell, want dat is wel zo snel. Wat heb je daarvoor nodig? Niet bijzonder veel. Volg de onderstaande instructies als je een ubuntu of vergelijkbare OS hebt voor je webserver.
sudo apt-get install jpegoptim
Ga vervolgens naar de gewenste folder (wp-content/uploads/2014/08) en gebruik het volgende commando om al je JPEGs te optimizen. Heb je er meer dan 100.000 gebruik dan wat asterisken (1*.jpg) als alternatief.
jpegoptim *.jpg
Nu je alle JPEGs hebt gehad is het tijd voor de PNG bestanden. Hier heb je een andere tool voor nodig, deze werkt overigens ook voor GIF (maakt van GIF dan .PNG bestanden). Deze installeer je als volgt:
sudo apt-get install optipng
Ook hier kan je weer naar je upload / images folder gaan om alle plaatjes te comprimeren.
optipng *.png
Ohja, voor de meer geduldigen en die-hard optimalisatie freaks met de volgende commando’s kan je ook het compression level aanpassen (70 of 65% bijvoorbeeld) :
Voor een loss van maximaal 25% gebruik je:
jpegoptim --max=75 *.jpg
Voor een loss van 30% gebruik je (PNG) :
optipng -o7 *.png
Veel snelheids plezier. Je zal zien dat de bouncerate zal dalen en je conversie zal stijgen. Al is het maar een beetje. Tevens scheelt dit natuurlijk enorm in je download. Gemiddeld zie ik zo’n 20% optimalisatie! Dus.. zeker de moeite waard. Ohja, maak wel eerst even een backup van je images als je zeker wilt zijn van bepaalde kwaliteitsniveaus!
PS. Als je veel images hebt dan geeft hij wel eens een fout “argumentlist too long” gebruik dan het onderstaande bash commando :
for i in 'seq 0-9'a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0; do jpegoptim $i*.jpeg ; done
En mijn nieuwe favoriet, let ook op de rechten van de images, daar ben ik al een keer mee in de mist gegaan met bovenstaande commando (owner werd Root en rechten veranderden):
find /your/path/ -iname '*.jpg' -exec jpegoptim --strip-all -p {} \; -exec chmod 644 {} \; -exec chown www-data:www-data {} \;
find /your/path/ -iname '*.png' -exec optipng -o7 -preserve {} \; -exec chmod 644 {} \; -exec chown www-data:www-data {} \;
