Size matters! Alles over afbeeldingen verkleinen voor je website

Hoe lichtgewichter jouw website, hoe duurzamer én hoe sneller. Beter voor de aarde én chiller voor je bezoekers. Eén van de grootste datavreters op de meeste websites zijn afbeeldingen. We uploaden onze afbeeldingen vaak veel groter dan nodig, met langere laadtijden en een hoop energieverspilling tot gevolg. Tijd om daar wat aan te doen! Ik geef je mijn tips en tools om je afbeeldingen te verkleinen.

Dit bepaalt de bestandsgrootte van jouw afbeeldingen

Eerst even in het kort: Wat bepaalt eigenlijk de bestandsgrootte van een afbeelding?

“En dpi dan?“

Heel veel van mijn klanten vragen in hoeveel dpi ze de foto’s moeten aanleveren voor hun website. Maakt niet uit! Hè?

Dpi is alleen relevant voor print. Het staat voor “dots per inch” en geeft aan hoeveel pixels er in een inch (2,5 cm) geprint moeten worden. Print je jouw foto op 150 dpi, dan worden er dus 150 pixels op die inch geprint. Met 300 dpi prop je er 300 op diezelfde inch. Waarmee je foto duidelijker maar ook kleiner wordt. Maar voor het totaal aantal pixels in het bestand maakt het dus helemaal niks uit.

Aan deze knoppen kun je draaien

Resize

Afbeeldingen verkleinen heeft het meeste effect van alles wat je doet om de afbeeldingen op je website te verduurzamen.

Ik weet niet hoe het met jou zit, maar met mijn telefoon kan ik foto’s van 25 MP (megapixels) schieten. Dat is 4312 x 5760 pixels. Leuk om mooie foto’s te maken tijdens trektocht, zonder dat ik mijn zware spiegelreflex in mijn rugzak hoef mee te slepen. Fijn voor als je een mooi fotoboek wilt maken na afloop. Maar waayyyyy oversized voor op een website.

Voor een browserschermvullende afbeelding kom je met 1440 pixels breed al een heel eind. In veel andere situaties heb je zelfs dat niet nodig en heb je genoeg aan 1280, 768, 600, 400, 300, 100, 50 pixels, of whatever ertussenin – afhankelijk van het doel van de afbeelding en de plek en uiteindelijke grootte op je website.

Bestandstype

Yes, hier hebben we hem weer! Kies een zo lichtgewicht mogelijk bestandstype. JPG is okee, maar wil je het een stapje verder nemen, kijk dan eens naar WEBP. Is ook geschikt voor afbeeldingen met een transparante achtergrond, zodat je niet meer met die huge-ass PNG files zit.

Hier vind je meer over WEBP afbeeldingen.

Exportkwaliteit

Sommige bestandstypen, waaronder JPG en WEBP, kunnen tijdens het comprimeren bepaalde informatie weglaten of samenvoegen, op basis van de exportkwaliteit die jij kiest. Afhankelijke van de kwaliteit en de grootte van je afbeelding kan het best zijn dat je hier niet of nauwelijks wat van ziet.

Experimenteer dus gerust met exportkwaliteit van 90% of zelfs 80%, en kijk wat goed genoeg is voor jouw website. Zoek een goede balans tussen een kleine bestandsgrootte en een afbeelding die nog toonbaar en aantrekkelijk is voor je publiek. Let op dat je wel altijd het origineel bewaart op je harde schijf.

Metadata

Tegenwoordig kun je echt een boat load aan metadata aan je afbeeldingen hangen. Datum en tijd zijn waarschijnlijk wel de bekendste, maar ook copyright, GPS coördinaten, tags, en god knows wat nog meer. Is dat wel zinnig voor die afbeelding op jouw website? Denk hier eens over na en bepaal welke metadata je wilt behouden bij het exporteren van je afbeelding, en wat je achterwege kunt laten.

Pro tip: Resize je afbeeldingen vóórdat je ze uploadt naar je website, en exporteer ze direct als het gewenste bestandstype en in de juiste kwaliteit.

Mijn favoriete tools

Een complete GIMP tutorial voor hoe ik het doe vind je hier.

Ter illustratie…

De headerafbeelding van deze blogpost. De originele foto was 5760×4312 pixels. 4,56 MB (=4560 kB) in dit geval. Bijgesneden naar 1280×720 pixels, geëxporteerd als WEBP, kwaliteit 90%: 147 kB. Dat is meer dan 30x zo klein!