Hoe optimaliseer je afbeeldingen voor je website?

Als je een website hebt wil je natuurlijk dat deze snel laadt. Als je vooral tekst hebt gaat dit vaak prima. Maar wat nu als je een website hebt met veel afbeeldingen, zoals een portfoliowebsite? Hoe zorg je dan dat je afbeeldingen snel laden? En als je de afbeeldingen dan kleiner maakt, hoe zorg je ervoor dat ze niet te slecht worden van kwaliteit?

Daar zijn verschillende manieren voor. In deze blog leg ik je een veel gebruikte manier uit.

Optimaliseer de afbeeldingen in Photoshop

 

Als je Photoshop hebt, raad ik je aan de afbeeldingen daarin te verkleinen en te optimaliseren. Photoshop biedt de handige optie ‘Opslaan voor web’. Bij deze optie kan je kiezen voor verschillende afbeeldingsformaten waaronder jpg en png. PNG gebruik je voor bestanden met transparantie, voor andere afbeeldingen kun je het beste jpg gebruiken.

 

1. 1. Open de afbeelding, en ga vervolgens naar ‘afbeeldingsgrootte’.  Kies hier het aantal pixels dat je wil hebben. Meestal is de content-area van je website zo’n 1100 pixels breed maximaal, dus als je een afbeelding wil die geen lightbox-effect heeft als je erop klikt, dan is 800 pixels breed meestal voldoende. Ik kies hier voor 1200 pixels breed omdat ik wil dat de afbeelding in een lightbox naar voren komt als je erop klikt.

      

   2. Vervolgens sla je de afbeelding op voor web. Dit kan bij bestand – opslaan voor web. Je komt dan in een nieuw scherm. Hier kun je kiezen voor verschillende bestandsformaten. Omdat dit een afbeelding is zonder transparantie, kies ik hier voor JPG. Daar kun je dan weer kiezen tussen Medium, High, Very High en Maximum. Dit zijn de verschillende kwaliteiten. In dit voorbeeld laat ik je het verschil zien tussen High en Medium. Je ziet dat de bovenste JPEG medium is en de onderste JPEG high. De onderste is 127 kb terwijl de bovenste 80 kb is. Dit maakt dus best een groot verschil in grootte, en daarmee ook in laadtijd. Want stel dat je 10 afbeeldingen van 127 kb op je voorpagina hebt staan, dan laadt deze toch een paar seconden trager dan wanneer je 10 afbeeldingen van 80 kb erop hebt staan.

      

      

   3. Maar… Er zit natuurlijk een addertje onder het gras. Want minder kb is niet per definitie beter. Zo zie je bij de Medium versie wat rare vage ‘korrels’ rondom de koepel ontstaan. Dit noemen we JPG-artefacten. En als je mooie foto’s wil plaatsen, wil je dit natuurlijk liever niet zien op je site.

      

       

   4. Dus wat dan te doen? Je wil geen artefacten, maar je wil ook niet dat je pagina traag laadt. Daarvoor heb ik een paar vuistregels:
      1. Kies niet voor maximumkwaliteit, maar voor high of very high. Dit scheelt al snel een paar honderd kb terwijl het verschil soms nauwelijks zichtbaar is.
      2. Probeer de meeste foto’s onder 100 kb te krijgen. Het is geen probleem als je één afbeelding hebt die groter is, zolang ze het maar niet allemaal zijn.
      3. Geef de afbeeldingen de maximale grootte die je nodig hebt. Dus als je een afbeelding nodig hebt die je over de hele breedte wil laten zien in een blog maak je die maximaal 800/900 px breed. Wil je een afbeelding in een lightbox, dan kun je kiezen voor een maximale breedte van 1200px. Wil je een grote kopafbeelding, dan kun je kiezen voor maximaal 1400px. (Kijk ook even wat je thema aanraadt indien je wordpress gebruikt) Wil je een headerbanner die ook op grote schermen doorloopt, dan kun je zelfs kiezen voor maximaal 2000px.
         Dit zijn globale maten, en deze kunnen per website weer verschillen!