Een raadselachtige zaak: er was een koffer gevonden met het lichaam van een onbekende vrouw. De politie riep de hulp van het publiek in en plaatste een foto online. In no time raakte de politie-website echter overbelast.
screenshot website Limburg1
Te grote foto
Hoe kwam dit nou? Deels door het grote aantal bezoekers in korte tijd. Maar vooral omdat zij allemaal dezelfde ‘zware’ foto probeerden te openen. Dit zorgde voor zoveel dataverkeer, dat de webserver begon te roken. Het probleem was snel verholpen nadat de politie de foto van meerdere megabytes had vervangen door een verkleinde, gecomprimeerde variant.
Een goede les om altijd kritisch te kijken naar de grootte van de bestanden (foto’s, downloads) op je website. Hierbij gaat het om de bestandsgrootte (KB), niet om de afmetingen (pixels). Let op: je kunt een foto vaak schalen in de editor van je cms, maar daar wordt de bestandsgrootte niet kleiner van.
Voordelen van keinere bestanden:
- Snellere laadtijd van je webpagina’s, zodat bezoekers minder snel afhaken (b.v. bij een tragere mobiele verbinding)
- Minder dataverkeer, daardoor mogelijk lagere hostingkosten
- Betere positionering in zoekmachines, laadtijd is een ranking factor voor Google.
Hoe zie je de bestandsgrootte?
- Als je de bestanden offline heb staan, zie je in de Verkenner of Finder snel de grootte.
- In je browser kun je met je rechtermuisknop de eigenschappen van een afbeelding opvragen. In Chrome gaat dat makkelijker door hiervoor een extensie toe te voegen.
- Met een online tool als GTMetrix kun je een webpagina analyseren. Na de scan zie je onder ‘Optimize images’ hoeveel je kunt besparen door het comprimeren van plaatjes.
GTMetrix – optimize images
Tips om foto ’s te verkleinen en te comprimeren:
- Een foto direct uit je (telefoon)camera is al gauw 4000 pixels breed. Veel groter dan je op je site nodig hebt. Verklein hem dus vooraf tot de maximale grootte die je zult gebruiken. Dit kan in elk fotobewerkingsprogramma, zelfs in Paint. Hier zijn ook veel online tools voor, zoals Picresize.
- Gebruik je WordPress? Met de plugin Imsanity kun je bestaande afbeeldingen in je bibliotheek in bulk verkleinen, en ook voorkomen dat (door andere gebruikers) te grote nieuwe afbeeldingen worden geüpload.
- Behalve verkleinen kun je plaatjes ook optimaliseren (comprimeren). Zonder dat ze veel aan kwaliteit verliezen, kun je nog wat kilobytes van de bestandsgrootte afsnoepen. Een programma als Photoshop heeft de optie Save for Web. Je ziet direct hoe een plaatje eruit ziet en hoeveel kB’s zwaar hij is bij de gekozen compressie-instellingen.
- Met de eerder genoemde online tool GTMetrix kun je direct een ‘optimized version’ van elke afbeelding op je webpagina downloaden. Hier bestaan ook diverse andere online tooltjes voor, zoals Kraken.
NB: veel websites zijn tegenwoordig responsive. De inhoud wordt op een optimale manier weergegeven, afhankelijk van de schermgrootte. De beste oplossing voor plaatjes is om ze niet alleen te schalen, maar om ze in verschillende groottes aan te bieden (adaptive). Een mobiele bezoeker heeft immers niets aan megafoto’s die in postzegelformaat worden weergegeven. Zoals Jeremy Girard schrijft:
A visitor on a small, mobile phone does not need or want that 2000-pixel wide image to be downloaded to their device if they are only going to display the image at a fraction of its original size. […] Forcing website visitors to download images 10 times larger than they need is guaranteed to annoy almost all people. […] Their impatience will drive them away from your site before it is even fully loaded.”