Je nieuwe website is klaar. Je hebt zojuist een geweldige foto gemaakt voor een nieuw blogartikel. Wat fijn dat je telefoon tegenwoordig zulke mooie foto’s maakt!
Hup, even inloggen, tekst typen en publiceren maar. Geweldig, je bericht staat online.

Natuurlijk werkt dat. Maar helemaal goed is het niet. Want de foto die je met je telefoon maakt, is waarschijnlijk 1 MB. Of groter, afhankelijk van type camera en instelling.

Maar wanneer er in jouw blog meerdere foto’s staan, loopt het aantal MB’s flink op. En zware afbeeldingen zorgen voor een trage website. Dat vindt je bezoeker niet leuk, want hij moet wachten. Maar ook Google straft je daarvoor af. Het is een minpunt voor de vindbaarheid. Het is dus belangrijk om je foto te verkleinen voordat je deze op je WordPress website zet. Maar hoe doe je dat nu op de juiste manier? En kan dat zonder al te veel grafische kennis. Jazeker kan dat!

In dit artikel, leg ik uit:

  • Wat is de juiste grootte van een afbeelding
  • Foto’s altijd eerst verkleinen en daarna uploaden
  • Gemakkelijk alternatief voor Photoshop
  • Kiezen voor png of jpg
  • Conclusie

De juiste grootte van een afbeelding op een website.

Oké, het belang van verkleinen is duidelijk. Maar hoe klein willen we de afbeelding hebben? Wanneer we over de afmeting van een afbeelding praten, hebben we het meestal over pixels. Een pixel is het kleinste deel van een scherm dat een bepaalde kleur kan aannemen. Een afbeelding wordt opgebouwd door allemaal (eenkleurige) pixels die samen het beeld vormen. Hoe hoger de resolutie van je scherm, hoe groter de dichtheid van pixels en hoe scherper het beeld. Een beeld van 350 bij 350 pixels zal op een scherm met een hogere resolutie dus kleiner uitvallen dan op een scherm met een lagere resolutie. De pixels zijn namelijk kleiner.

Over het algemeen geldt dat je afbeeldingen beter niet groter kunt uploaden dan nodig is. Dat wil zeggen niet groter dan ze getoond worden op je website.

Eerst verkleinen, dan uploaden

In WordPress kun je gemakkelijk de afmeting aanpassen na het uploaden. Maar dit is niet de optimale manier om ze te verkleinen. Het is beter om ze eerst te optimaliseren voordat je ze uploadt. In dit overzicht staan indelingen die jouw website kan hebben. Daarbij zie je ook de breedte van de afbeelding in pixels staan. Heb je een foto op je blog die maar een vierde van je pagina is? Dan is de grootte vier keer kleiner dan de breedte van de website.

Foto verkleine voor web online

Alternatief voor Photoshop

Zelf werk ik natuurlijk met Adobe Photoshop, waarin ik mijn afbeeldingen kan aanpassen en optimaliseren voor het web. Maar de meeste mensen hebben zelf geen Photoshop.

Gelukkig zijn er online tools waarmee je foto’s kan verkleinen. Bijvoorbeeld het programma Squoosh. Je hoeft er niks voor te downloaden of te installeren op je computer. Je sleept heel gemakkelijk je foto naar de webpagina. Daarna vul je bij width het juiste aantal pixels in. Gebruik daarbij de indelingsopties zoals in deze afbeelding. Wanneer je twijfelt over de grootte pak je datgene wat het dichts bij komt.

Je krijgt online meteen het verschil te zien met de originele foto. Schrik niet als het wat onscherp wordt. Je foto wordt nu beeldvullend weergegeven. Wanneer de foto straks maar 225 pixels wordt op je website zie je weinig van de (on)scherpte.

Kiezen voor .png of .jpg

Verder is er nog een verschil in hoe je een afbeelding opslaat. Het belangrijkste verschil tussen een jpg en een png is dat een png een transparante achtergrond kan hebben.

Jpg’s zijn het meest geschikt voor het opslaan van foto’s, omdat ze veel kleuren bevatten. Png is minder geschikt voor foto’s omdat ze gebruik maken van een compressietechniek zonder verlies. De kwaliteit is dus hoger, maar dat betekent ook een grotere bestandsgrootte. Een png gebruik je vooral voor logo’s, pictogrammen en tekeningen met een transparante achtergrond.

Een ander formaat wat je nog wel eens ziet is een .gif. Tegenwoordig wordt dit formaat vaak gebruikt voor geanimeerde plaatjes. Gif-afbeeldingen gebruiken maar een paar kleuren en kun je daarom voor foto’s of afbeeldingen beter vermijden. Er zijn nog meer bestandsindelingen. Kijk maar eens op het blogbericht waarin ik inga op het verschil tussen jpg, pdf, png, eps en ai.

Conclusie

Ga je foto’s plaatsen op je website? Zorg er altijd voor dat ze de juiste afmeting hebben. De juiste afmeting is niet te groot, maar ook niet te klein. Je kan hiervoor een gratis online tool gebruiken of een grafisch programma zoals Photoshop. Kom je er niet uit? Of is het niet helemaal duidelijk? Geen nood, ik help je graag!