Smush.it in actie met het Byte logo

Smush.it in actie met het Byte logo

Update april 2015: sinds maart 2015 bestaat de tool Smush.it niet meer. Meer info hierover vind je op geekwire.com. Een mogelijk alternatief is ReSmush.it.

 

Afbeeldingen optimaliseren is belangrijk om de snelheid van je website te verbeteren. De zoekmachines geven aan dat de snelheid van je website belangrijk is. Een tragere website zal een lagere positie krijgen in de zoekresultaten dan een snellere website met dezelfde content. Maar ook de bezoekers van je website kunnen het zeer waarderen dat je een snelle website hebt. Duurt het inladen van een pagina te lang, dan zal de bezoeker afhaken. In deze blogpost wordt beschreven hoe je de snelheid van je website kunt verbeteren door het optimaliseren van je afbeeldingen in verschillende CMS door middel van Smush.it.

Afbeeldingen optimaliseren met Smush.it

Een belangrijke lijst om de snelheid van je website te optimaliseren is beschreven in “Best Practices for Speeding Up Your Web Site” van Yahoo. Veruit de meeste tijd van het inladen van een website gaat zitten in het downloaden van plaatjes, stylesheets, scripts en andere bestanden. Reduceer je dit aantal componenten, dan is het aantal HTTP-requests dus ook minder en zal de pagina op zijn beurt ook sneller inladen. Als je vervolgens die bestanden nog kleiner weet te maken, dan heb je nog meer tijdwinst. Op de pagina van Yahoo worden verschillende technieken beschreven waaronder het optimaliseren van je afbeeldingen. Hiervoor kan je de service Smush.it van Yahoo! gebruiken.

Smush.it gebruikt optimalisatietechnieken speciaal voor plaatjes om onnodige bits en bytes te verwijderen, zonder de kwaliteit noch uiterlijk van de afbeelding te wijzigen.

Smush.it gebruikt de volgende algoritmes voor het optimaliseren van de afbeeldingen:

  • ImageMagick: om het type afbeelding te bepalen en GIF naar PNG te converteren.
  • pngcrush: verwijdert ongewenste code van PNG bestanden. Er wordt getest met andere PNG optimalisatietools als pngout, optipng, pngrewrite om nog betere PNG optimalisatie te kunnen leveren.
  • jpegtran: verwijdert alle meta data van JPEGs (tijdelijk uitgeschakeld) en zet, indien mogelijk, het bestand om naar progressive JPEGs.
  • gifsicle: optimalisatie van animated GIF door herhalende pixels uit verschillende frames te verwijderen.

Vooraf afbeeldingen optimaliseren

Bij de oplevering van de website kan de webbouwer rekening houden het formaat van de afbeeldingen.
De afbeeldingen kunnen vooraf geoptimaliseerd worden met Smush.it. Maar dan… na vertrek van de webbouwer is het aan de beheerder van de website om bij het plaatsen van nieuwe content de afbeeldingen te optimaliseren.

De werkwijze voor de contentbeheerder is dan als volgt:

  • schrijf de pagina/blogpost
  • maak of zoek een bijbehorende afbeelding
  • ga naar www.smush.it en optimaliseer de afbeelding
  • download de afbeelding
  • verwerk de geoptimaliseerde afbeelding in de pagina/blogpost

Maar waarom zou je dat doen als de software van je website dit ook zou kunnen? Omdat de software dit out-of-the-box namelijk vaak niet kan. Vraag de bouwer van je website om hiermee rekening te houden of laat het alsnog inbouwen. Minder data om te versturen draagt immers bij aan een snellere website.

Afbeeldingen optimaliseren in WordPress

Met de WordPress plugin “WP Smush.it” wordt elke afbeelding die je toevoegt aan een pagina of blogpost direct op de achtergrond door Smush.it gehaald en geoptimaliseerd. Installatie is eenvoudig zelf te doen via WordPress installatie pagina in de backend van je eigen WordPress website. Zoek op “WP Smush.it” en installeer. Via “instellingen >> media” kun je het automatisch laten smushen van afbeeldingen activeren / uitschakelen.

wordpress-smushit

plugin WP_Smush.it op WordPress.org

Afbeeldingen optimaliseren in Joomla

Met de commerciële Joomla extensie “jomCDN” wordt elke afbeelding die je aan content toevoegt in een externe CDN geplaatst waarbij deze direct met Smush.it geoptimaliseerd wordt. Je kunt deze betaalde extensie aanschaffen via corephp.com en daarna via de Joomla installer installeren. Op het tabblad “guide” van de productpagina van jomCDN op corephp.com staat uitgelegd hoe je vervolgens deze extensie aan een CDN kunt koppelen.

joomla-smushit

extensie jomCDN op Joomla.org

Het zou mooi zijn als er voor Joomla eenzelfde oplossing zou bestaan als WordPress: het in de achtergrond optimaliseren van afbeeldingen op moment van uploaden. Een dergelijke extensie heb ik niet kunnen vinden. Welke developer zou deze willen maken? Dan voegen we de link naar de extensie toe aan deze blogpost.

Afbeeldingen optimaliseren in Magento

Ook hiervoor heb ik geen extensie kunnen vinden waarmee je bij het uploaden van de afbeeldingen deze direct laat optimaliseren via Smush.it. Dan wordt het dus zelf maken. In oktober 2009 heeft Frank Broersen van PitGroup de blogpost “Snelheid optimalisatie: afbeeldingen compressie” geschreven. Hij heeft een API geschreven waarmee de afbeeldingen gecomprimeerd kunnen worden. Deze kan als volgt gebruikt worden:

Geef aan PHP de afbeelding mee plus de locatie waar de geoptimaliseerde afbeelding moet worden opgeslagen en de API doet de rest. De API is te downloaden via de bovengenoemde blogpost, maar voor het gemak ook aan deze blogpost toegevoegd. Zie hieronder. Dank aan Frank Broersen voor het delen van zijn kennis.

Download de PitGroup Smush It API.

Oproep aan developers

Zoals je in de blogpost hebt kunnen lezen is er op dit moment alleen voor WordPress een developer geweest die het mogelijk gemaakt heeft om afbeeldingen direct bij het uploaden via Smush.it te optimaliseren. Het zou natuurlijk mooi zijn als dat voor Joomla en Magento ook zou komen. In Joomla zie ik dat voor me als een plugin die geïnstalleerd wordt in de editor JCE. In Magento zie ik dat voor me als extensie die de image uploader uitbreidt.

Welke developer heeft er al een dergelijke uitbreiding gemaakt en wil dit delen met de rest van de wereld?

 

 

 

Scan je eigen Magento shop op veiligheidslekken