Dit artikel is zowel toepasbaar voor Joomla alsook Wordpress, Drupal of wat voor site dan ook. Zeker als je veel plaatjes gebruikt is het optimaliseren van je plaatjes erg belangrijk. In dat geval bestaat vaak meer dan de helft van het gewicht van je site uit plaatjes. Door deze te optimaliseren kun je grote stappen maken bij het winnen van performance. Als je ook nog minder ervaren gebruikers plaatjes laat uploaden zijn deze ook nog vaak veel te groot. Weliswaar kunnen ze met de editor het plaatje al slepend veel kleiner maken, maar er worden dan veel te grote plaatjes ingeladen. Je zou moeten zien te voorkomen dat grote plaatjes worden geupload. Voor mobiele apparaten zou je hier nog meer rekening mee moeten houden.

Correct bestandsformaat voor je plaatjes

Zorg dat je het correcte formaat gebruikt voor je plaatjes als je ze aan het prepareren bent. je hebt grofweg de volgende opties:

  • GIF: Klein, maar prima voor kleine plaatjes en plaatjes met uniform kleurverloop, zoals icoontjes of logo's
  • JPG/JPEG: deze zijn wat groter, maar de enige optie als je foto's gebrukt. Binnen dit formaat kun je met Photoshop kiezen voor Progressive JPG of Baseline (in te stellen in Save for Web in Photoshop). Progressive JPG plaatjes herken je doordat ze eerst een beetje blurry laden, en dan geleidelijk scherper worden, terwijl baseline plaatjes beginnen vanaf de bovenste rand en dan naar beneden toe geleidelijk het plaatje laden. Progressive is de door Webpagetest.org en Google PageSpeed geadviseerde oplossing. Het nadeel hiervan is dan weer dat progresiive wat meer rekenkracht van de browser vergt, wat mogelijk nadelig is op oudere smartphones. Persooonlijk zou ik kiezen voor progresive, als dat is wat Google adviseert.
  • PNG: Kies deze voor kleine plaatjes of plaatjes met transparantie
  • SVG: SVG staat voor Scalable Vector Graphics. Het is een vector bestand, dus de afmetingen zijn vrij klein, en je kunt er onbeperkt mee schalen. Als je de kans krijgt, gebruik deze, maar er zitten wat meer haken en ogen aan (browsersupport).

In vrijwel alle gevallen kun je bij het opslaan kiezen voor een bepaalde kwaliteit van het plaatje. 100% heb je op het web eigenlijk nooit nodig, 40% tot 60% voldoet meestal prima, en het scheelt vaak tientallen procenten in de bestandsgrootte.

Joomla Hosting tip: Siteground

Joomlaseo.com laadt in 0.5 - 1 seconden en heeft een Pingdom score van 100%!!! Daarom bevelen we Siteground hosting aan. Snelle servers, goede support, gratis SSL, etc. En niet duur...

 

Gebruik JCE met "remove imageEXIF data"

De JCE editor bevat sinds versie 2.5.10 een optie die je een hoop kB's kan schelen. De optie zit behoorlijk verborgen, maar het kan een hoop gewicht schelen. De optie verwijdert de zogenaamde EXIF data van plaatjes tijdens het uploaden. Kijk maar eens naar het effect hiervan tijdens het uploaden van een plaatje voor en na het aanzetten van de parameter:

Je ziet dat ik ongeveer 30% heb gewonnen, en de kwaliteit is niet aangetast. De optie is beschikbaar in alle JCE versies. Om het te activeren: ga naar Editor Profiles >> Editor Parameters >> Filesystem en zet de Remove Image EXIF data parameter op Yes:

Lossless compressie van je plaatjes

Zelfs als je je plaatjes netjes hebt aangemaakt blijken ze nog veel onnodige informatie te bevatten. Dit betreft allerlei metadata als het cameramodel, de datum, enzovoorts. Ook save for Web verwijdert dit niet volledig. Als je deze metadata ook nog eens volledig kunt verwijderen zijn je plaatjes vaak nog weer een stuk kleiner. Vooral PNG plaatjes worden soms meer dan de helft verkleind. Er zijn allerlei tooltjes voor beschikbaar. Van oudsher is de bekendste Smush.it en hij doet prima werk:

TinyPNG voor PNG files en Tinyjpg.com voor JPG doen deze compressie vaak nog beter. Bij een vergelijking scoort TinyPNG veel beter dan Smush.it:

Dan is er nog een nieuwkomer op dit gebied: Kraken.io. Kraken kan zowel PNG als JPG bestanden aan. Je kunt ze in 1 keer allemaal tegelijk aanbieden, wat het optimlaliseren ook in batch erg snel laat verlopen.  Kraken heeft ook een PRO versie met nog meer mogelijkheden (plus een Wordpress plugin), maar de basic webinterface is meestal goed genoeg. Momenteel is dit mijn favoriet. Met JCH-Optimize Pro kun je nu zelfs vanuit Joomla je plaatjes optimaliseren.

Tenslotte zijn er nog een paar vergelijkbare tools: Media4x.com en Compressor.io. Beide kunnen zowel PNG als JPG plaatjes aan, maar niet in bulk.

Ook zijn er freeware tools die je gratis kunt installeren op je desktop:

Dan nog een laatste tip hierover: als je je website laat checken op GT-Metrix en je klikt op de regel Optimize images dan krijg je direct een linkje naar de geoptimaliseerde versie van je plaatjes.

Joomla Hosting tip: Siteground

Joomlaseo.com laadt in 0.5 - 1 seconden en heeft een Pingdom score van 100%!!! Daarom bevelen we Siteground hosting aan. Snelle servers, goede support, gratis SSL, etc. En niet duur...

 

Base64 encoded images

Een enigszins technische oplossing om om te gaan met (kleine) plaatjes is base64 encoding. De winst zit hem hierbij niet zozeer in het gewicht dat je bespaart, maar in het aantal zogenaamde HTTP-requests: je hoeft het plaatje namelijk helemaal niet te downloaden, het zit al gecodeerd in je HTML. De bron van het plaatje is dus niet een plaatje, maar een lange string:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAI0lEQVR42mNgGHBwPF7nPwgTUsdEd5uZ6O7noezHgYtHmgEA5lgXNZwaK2gAAAAASUVORK5CYII=" alt="" />

Dit is bijvoorbeel de code die ik soms gebruik om background-image voor list-items te maken, en het resulteert keurig in dit plaatje:

Het voordeel bij kleine plaatjes dus dat het een HTTP-request scheelt. Het in de browser opbouwen van dit plaatje kost echter wel rekenkracht van de browser. Bij wat grotere plaatjes werkt dit dan niet goed. Bij wat grotere plaatjes kost dan alleen het opbouwen van het plaatje meerdere seconden... Gebruik het alleen bij plaatjes kleiner dan 1 tot 3 kB. Ook voor base64 plaatjes heb je weer online generatoren die de code voor je kunnen aanmaken. Upload gewoon een klein plaatje en je krijgt de benodigde code terug. Voorbeeld hiervan zijn www.b64.io, www.freeonlinetools24.com/base64-image of www.base64-image.de. Je kunt dit proces eventueel automatiseren met een plugin: Yireo ScriptMerge heeft een optie om plaatjes onder een zekere grens (standaard 2 kB) te encoderen.

Een opmerking met betrekking tot SEO: Google zal base-encoded images niet opnemen in de index. Aangezien de techniek toch alleen voor heel kleine plaatjes gebruikt kan worden zal dat geen probleem hoeven zijn. We hebben het dan bijvoorbeel over zaken als kleine logo's, kleine achtergrondafbeeldingen voor puur decoratieve doeleinden, en icoontjes voor social media, print en email, enzovoorts.

Gebruik plaatjes van de correcte afmeting in Joomla

Zorg dat de plaatjes zoals je die toont ook daadwerkelijk zo groot zijn, en resize geen hele grote plaatjes in je editor door gewoon de breedte / hoogte aan te passen. Anders moet je nog steeds een groot plaatje downloaden om een klein plaatje te tonen. Het beste is om ze vantevoren in de goede grootte te prepareren, voor je ze uploadt, maar zeker als je geen controle hebt over je gebruikers moet je afdwingen dat de plaatjes geresized worden bij het uploaden. Als je de JCE editor gebruikt kun je dit afdwingen. Je moet dan wel de JCE plugin Image Manager Extended installeren. Je kunt dan de plugin instellen op een maximale grootte in pixels. Vaak is 600px of 900px prima.

Ook zijn er extensies die hier op nog meer slimme manieren omgaan, of bijvoorbeeld wel grote plaatjes laten uploaden, maar bij het tonen een automatisch geresizede versie tonen.

Lazy load images

Naast de al beschreven opties kun je nog meer met je plaatjes doen. Lazy-loading is een mooie techniek hiervoor. Deze techniek zorgt ervoor dat alleen de plaatjes geladen worden die "boven de vouw" getoond worden. Zolang een gebruiker niet naar beneden scrolled worden de plaatjes niet geladen. Zeker pagina's met veel plaatjes laden hierdoor een stuk sneller. Voor de plaatjes lager op de pagina wordt een soort placeholder geladen van dezelfde afmetingen als het later te tonen plaatjes. Zodra je scrolled wordt het plaatje dan alsog geladen, je hebt het waarschijnlijk geregeld waargenomen. Er is alleen een klein stukje Javascript voor nodig. 

Je kunt deze techniek vrij makkelijk implementeren met extensies, zoals Lazy load for Joomla van Kubrik extensions (gratis). LLFJ biedt ook extra mogelijkheden om een aantal parameters specifieker in te stellen, zoals een trigger op class, component, URL, robots. In JCH-Optimize is trouwens ook een optie om dit aan te zetten.

Een tecniek die jer op lijkt maar mogelijk nog efficienter is is de defer images techniek (helaas geen Joomla plugin voor beschikbaar, dus zelf coderen).

Gebruik background images

Een klassieke methode om selectief plaatjes te laten laden is met achtergrondplaatjes. Het vereist wel wat handmatig coderen, dus het is niet handig om dit voor al je plaatjes te doen, maar voor bijvoorbeeld een paar grote plaatjes, of de plaatjes op de homepage zou dit een slimme techniek kunnen zijn. 

Stel, je hebt een plaatje van 400px breed en hoog. Toon deze dan als de achtergrond van een div die je ook instelt op 400 x 400 pixels. Met een media querie stel je dan in dat het achtergrondplaatje alleen geladen wordt op devices breder dan 468 pixels bijvoorbeeld. Op telefoons, die smaller zijn, wordt het plaatje dan inderdaad niet ingeladen. De div laat je dan ook verdwijnen natuurlijk. Met wat creativiteit kun je dit geheel zich ook nog wel responsive laten gedragen, maar dat gaat wat te ver voor dit onderdeel.

Responsive images

De meeste responsive websites laten een groot plaatje gewoon klein schalen op mobiele apparaten. Dit betekent dan wel dat er daadwerkelijk een groot plaatje geladen wordt op mobiele apparaten, meestal door de max-width op 100% te zetten. Eigenlijk zou je op een klein scherm ook een klein plaatje moeten laden. Dit kun je bereiken met de responsive images techniek. Browser-support is nog geen 100%, maar dit is waarschijnlijk wel de techniek van de toekomst. Je kunt het op 2 manieren toepassen:

1: srcset en sizes attributen in <img>:

<img src="/small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"  sizes="(min-width: 36em) 33.3vw, 100vw"  />

2: Het <picture element>:

<picture>
<source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="/fallback.jpg" alt="">
</picture>

Zoals je ziet heeft de <picture> element oplossing een fall-back oplossing voor unsupported browsers. Check responsiveimages.org voor meer informatie over deze techniek. 

Adaptive images

De gedachtengang achter responsive images wordt ook toegepast bij adaptive images. het plaatje wordt geladen op basis van de geconstateerde schermbreedte. Zo krijgt een groot scherm een groot plaatje en een klein scherm een kleine. Je kunt deze techniek toepassen met de extensie XT adaptive images. Je gebruikt verder op de normale manier plaatjes, en de plugin regelt dan per device het goede plaatje met wat Javascript. Deze techniek past Joostrap intussen ook toe in hun templates. 

Geavanceerde formaten

Tenslotte zijn er nieuwe formaten waarin plaatjes beschikbaar komen, zoals bijvoorbeeld WebP en BPG. Sommige hiervan zijn een stuk lichter, maar ze worden nog niet allemaal native ondersteund. WebP kun je trouwens met Yireo Scriptmerge on the fly laten genereren indien je server het ondersteunt. Wat de echte standaard wordt in plaatjes is nog even afwachten....