Snelheid optimalisatie: afbeeldingen compressie

Geschreven door Frank Broersen op 21 / 10 / 2009

Om onze websites zo snel mogelijk te maken, en ook na oplevering te houden, zijn een aantal tools geschreven die ervoor zorgen dat van alle mogelijke onderdelen KB's afgesnoept worden. In dit blog wordt een onderdeel van het optimaliseren behandeld, namelijk het verkleinen van de afbeelding grootte door middel van Yahoo Smush.It.

Smush it Api

Bij het basen van een website wordt wanneer deze goedgekeurd is altijd een optimalisatieronde gehouden. De ySlow plugin voor Firefox geeft je een goed inzicht van alle onderdelen die in de layout geladen worden, en de grootte van deze onderdelen.

Daarbij krijg je een aantal hulpmiddelen aangereikt om de snelheid van je website te verhogen, bijvoorbeeld SmushIt van Yahoo. Deze tool verwijderd onnodige data die bij de afbeeldingen wordt opgeslagen, waardoor afbeeldingen tot wel 80% kleiner kunnen worden.

Nadat een website aan de klant is opgeleverd en de klant zelf afbeeldingen gaat toevoegen, worden deze niet meer goed verkleind. Smush It biedt geen functionaliteit tot het automatiseren van het comprimeren van afbeeldingen, dus hebben we hier zelf een api voor geschreven, die als volgt gebruikt kan worden.

<?php

require_once('SmushIt.php');

$smush = new SmushIt;

$smush->base = 'http://www.pitgroup.nl/demo/smushit/';

if( !$smush->smush('img/image.png','img/image-smushed.png') ) {

  echo $smush->msg;

} else {

  echo 'saved: ' . $smush->savings . 'kb (' . $smush->savings_perc . '%)';

}

Je geeft aan php de afbeelding mee, en de url van waar je de gecompressde afbeelding wilt opslaan, en de api doet de rest.

Download: download de Smush It Api hier.
Demo: bekijk de demo hier.