Zodra je website klaar is, ga je er natuurlijk zelf mee aan het werk. Je kunt gaan merken dat je website (of bepaalde pagina’s) niet meer zo snel laad als in het begin. Een van de dingen om rekening mee te houden om je pagina’s niet te groot te laten worden is afbeeldingen optimalisatie.

Elke moderne mobiel of camera maakt de meest prachtige foto’s. Die zet je graag op je site. Maar die moderne foto’s zijn vaak enorm van resolutie. Die kunnen makkelijk 5 tot 10 mb per stuk zijn. Een onbewerkte foto in je blog plaatsen is een snel gemaakte fout. Zeker als je bedenkt dat een totale pagina van je website origineel vaak niet groter is dan 1 a 3mb. En wat als je meerdere foto’s op een pagina hebt staan? Dan zou zo een pagina al snel tientallen mbs groot kunnen worden. Niet handig! Zo een pagina laad helemaal niet meer snel voor je bezoekers. Die haken af! Hoe hou je je afbeeldingen in bedwang?

Dat doe je door rekening te houden met 2 dingen; de fysieke grootte van je afbeelding (aantal pixels) en de compressie (kwaliteit en grootte in mb’s) van je foto. Als je die twee dingen aanpassen tot je vaste routine maakt, zul je merken dat je pagina’s op je website lekker licht blijven. Aanpassen loont! Zo is het niet ongebruikelijk dat die originele foto van 4mb terug te brengen is naar 150kb. (Dat is 4000kb naar 150kb, dat scheelt!)

Grootte van je afbeelding

Hoe groot moet ik mijn foto re-sizen? Dat hangt af van de plaats op je website en van het gebruik. Vaak zijn er specifieke maten voor elke website, maar grof genomen kun je rekening houden met het volgende maximale breedte van je afbeelding in pixels;

Blog volle breedte; 1000 pixels
Blog met zijbalk; 800 pixels

Webpagina volle breedte; 1000 pixels
Webpagina helft; 500 pixels
Webpagina derde; 330 pixels

Product in de shop; 800 pixels
Product in de shop waarbij de afbeelding erg belangrijk is en goed zichtbaar moet zijn op vol beeld; 1600 pixels (gebruik deze niet als hoofdafbeelding, maar in de fotogalerij van je product)
Uitgelichte afbeelding; 500-800 pixels

Fotogalerij afbeelding; 1000 pixels
Fotogalerij waarbij de afbeelding goed zichtbaar moet zijn op vol beeld; 1600 pixels
Uitgelichte afbeelding portfolio/gallerij; 500-800 pixels.

Hoe verklein je foto’s?

Gebruik hiervoor je favoriete fotobewerking programma, zoals;
Adobe Photoshop (Windows & Mac) De standaard in programma’s voor fotobewerking. Werkt met een maandelijks abonnement. Trial beschikbaar)
Pixelmator (Mac) Goedkoper alternatief voor Photoshop, maar doet er zeker niet voor onder. Trial beschikbaar op de website)
Corel PaintShop Pro (Windows) Goed alternatief voor Photoshop, verschillende pakketten verkrijgbaar. Trial op de website)
Gimp (Windows & Mac) Het gratis en open source alternatief voor Photoshop.

Wat voor bestandsformaat moet ik kiezen?

Voor een foto geldt vaak dat dat jpg de beste resultaten geeft. Voor afbeeldingen waar delen van doorzichtig zijn gebruik je png. Dat formaat is ook goed te gebruiken voor getekende afbeeldingen.

En hoe zit dat met compressie?

Als je je afbeelding opslaat, kun je kiezen voor kwaliteit. 100% kwaliteit is het beste als je je foto laat afdrukken, maar voor gebruik op je website kan je makkelijk volstaan met een veel lagere kwaliteit. Bij een jpg ligt rond de 30% uitvoerkwaliteit ligt vaak het omslagpunt. Probeer gerust eens wat verschillen en bekijk wat je mooi vind.

Handig om te weten;

Er is een website, waar je snel en eenvoudig je afbeeldingen kunt comprimeren. https://tinypng.com. Sla die vooral op tussen je favorieten!
En voor degene die met heel veel foto’s werkt is er een speciaal programma gemaakt; https://imageoptim.com. Daarmee heb je het gemak van snelle optimalisatie gewoon op je eigen computer. De laatste gebruik ik zelf ook, je kunt deze helemaal instellen naar je eigen zin.

In een volgende blog zal ik je vertellen hoe je je webpagina’s kunt uitpluizen, om zo alle afbeeldingen op te sporen die te groot zijn.

Delen = lief

Facebook
Google+
Twitter
LinkedIn
Email
WhatsApp

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *