Foto’s en compressie

January 30, 2016 Erwin Maassen van den Brink Blog , , , , , 0 comments

Omdat we steeds meer eisen stellen aan foto’s op een website, wil je tegenwoordig de afbeeldingen in HD kwaliteit laten zien (zeker op de Retina schermen van Apple). Het kan zijn dat het dan enige tijd duurt voordat je een pagina (met foto) of een portfolio met meerdere foto’s ziet. Dit omdat de foto’s qua bestandsgrootte (te) fors zijn. Foto’s moeten groot genoeg in afmeting zijn om scherp te worden weergegeven, maar ze moeten ook klein genoeg qua bestandsgrootte zijn zodat ze niet uw mobiele internet bundel in een klap opmaken.
 
Dat grote foto’s wel mooi zijn maar niet altijd even handig, blijkt ook als je jouw site laat controleren bij bijv. Google. Een van de eerste opmerkingen is dat de plaatjes te groot zijn en dat deze geoptimaliseerd moeten worden. Doe je dit niet, dan komt jouw site lager in de ranking te staan. Dit verteld Google natuurlijk niet, maar de praktijk is wel zo.
 
Om foto’s kleiner te maken (maar toch beeldvullend te laten zien) is het nodig dat er compressie wordt toegepast. En hier ontstaat een dilemma. Een foto van bijv. 1Mb is normaal te groot om op je site lekker snel weer te geven. Iemand die thuis zit met een breedband abonnement zal hier nog niet zoveel van merken, maar zodra je op een WiFi omgeving zit, merk je dat het wat trager wordt. Op je mobiele telefoon met een 3G verbinding duurt het nog langer. De foto van 1Mb moet dus verkleind worden. Hiervoor zijn er meerdere methoden, en er wordt dan gesproken over het comprimeren van foto’s.
 
Er bestaan 2 soorten compressie methoden:

  • Lossy – Deze methode resulteert in verlies van data en kwaliteit van de originele versie. Bepaalde gegevens worden verwijderd uit het oorspronkelijke bestand en daardoor zal het gecomprimeerde bestand vaak (veel) minder schijfruimte in beslag nemen dan het origineel.
  • Lossless – Deze compressie is het type waarbij er geen (of bijna niet zien) kwaliteitsverschil ontstaat. Het bestand wordt echter maar een fractie kleiner.

 
Het dilemma is dan ook: wil ik maximale kwaliteit leveren of liever een snellere website. Op het eerste wordt je door je bezoekers afgerekend, op het laatste wordt je door Google afgerekend. Als een pagina langer dan 4 seconden nodig heeft om te laden, zal Google je lager in de indexering opnemen. Vind ik dat erg? Ja, want je wilt nl. door zoveel mogelijk mensen bezocht worden en daarvoor is het nodig dat je bij zoekresultaten redelijk bovenaan komt te staan.
 
Na het testen van verschillende compressietools zoals Compressor.io , Kraken.io , JPEGTRAN en andere vergelijkbare tools ben ik geëindigd bij de plugin voor mijn website: Compress JPEG & PNG images. Dit is een plugin van TinyPNG en ik vind dat deze plugin voor mijn doeleinden het meest geschikt is. De kwaliteit van de foto’s gaat weliswaar heel iets achteruit, maar de grootte van het bestand neemt enorm af. Hierdoor is de site op alle platformen beter (sneller) te bekijken.

 

[This blog is in the Dutch language. Click here for an English translation by Google Translate.]

About the Author