JPG en PNG zijn de standaard. Nog wel.

Wil je het veilig houden? Ga gewoon met de stroom mee en kies JPG of PNG.

“Voetbal is een simpel spel. 22 Mannen rennen 90 minuten lang achter een bal aan en uiteindelijk winnen de Duitsers. ”

Dit is wat in me opkwam bij de vraag welk bestandsformaat het geschiktst is voor online, digitale afbeeldingen. Er zijn letterlijk tientallen opties en professionals kunnen hier uren over praten (net als bij voetbal) maar in dit artikel geef ik de informatie om gewoon te beginnen. Ik ga uit van de meest gebruikte en best ondersteunde formaten voor het web. En dan is er nog een eenvoudig antwoord op de vraag welke formaten geschikt zijn voor weergave in de browser:

JPG of PNG

En welke van deze twee je moet kiezen is eigenlijk eenvoudig te beantwoorden. Foto’s worden JPG, afbeeldingen (graphics, screenshots) worden PNG.

Een typische foto en een afbeelding. Foto door Rob Hoeijmakers.

Links een afbeelding van een foto, gebruik JPG. Rechts een foto van een plaatje, gebruik PNG.

Omdat de JPG en PNG-formaten het leeuwendeel vormen van wat er nu op het web gebruikt wordt, is het goed om deze formaten eens nader te bekijken zodat je ze kunt verbeteren. Dus dat ze aan deze drie eisen voldoen:

  1. Afbeelding ziet er goed uit
  2. Afbeelding laadt snel
  3. Beeld kan gebruikt worden voor een zoekmachine

Kwaliteit en grootte

Of afbeeldingen er technisch goed uitzien hangt af van de bron. Kies dus een goede bron. Dat kunnen foto’s zijn die je zelf maakt, screenshots of stockfoto’s van bijvoorbeeld Unsplash. Met JPG kun je afbeeldingen kleiner maken, maar niet groter. Niet zonder verlies van kwaliteit. Werk dus altijd met een kopie bij het bewerken. Denk maar aan een kapsel. Je kunt het korter krijgen, niet langer.

Naast grootte is compressie belangrijk. Compressie is het weglaten van overtollige informatie in het beeld. Je verliest hiermee misschien (wat) kwaliteit, maar je wint aan snelheid bij het laden. Een andere vorm van compressie is het verkleinen van het kleurenpalet, wat werkt als de afbeelding grote, goed gedefinieerde kleuren bevat. Compressie wordt gedaan op een schaal van weinig tot veel compressie. De gemakkelijkste manier om te comprimeren is te vertrouwen op de instellingen (presets) van een programma en het dan visueel te controleren.

Experimenteer met de grootte en de mate van compressie. Met Photoshop Express kun je experimenteren met PNG of JPG en de kwaliteit aanpassen met een schuifregelaar:

Photoshop express

Photoshop Express en JPG kwaliteit schuifregelaar. Foto is een screen capture van photoshop site.
Photoshop Express en JPG kwaliteit schuifregelaar. Foto is een screen capture van photoshop site.

De vuistregel is dat een afbeelding niet groter is dan 300KB. Dit overzicht laat zien wat voor bestandsgrootte je kunt verwachten bij verschillende resoluties.

Een JPG schalen en verkleinen. Afbeelding door Robert Hoeijmakers.
Een JPG schalen en verkleinen.

Overzicht van de bestandsgrootte van een kleinere JPG-foto. De afname in bestandsgrootte is het grootst bij de eerste schaalverkleining.

Vindbaarheid

Naast mooie en snel ladende afbeeldingen is vindbaarheid in zoekmachines vaak ook belangrijk (SEO). Zeker als de afbeelding een zelfstandig doel heeft (en niet als decoratie dient). Geef het bestand dan een zinvolle en beschrijvende naam. Zorg voor bijschriften en alternatieve tekst. Plaats de afbeelding bij de relevante tekst, zodat de zoekmachine kan achterhalen wat er op de afbeelding staat.

Samenvatting

Dit artikel beschrijft zo eenvoudig mogelijk de twee meest voorkomende formaten die afbeeldingen (foto’s en plaatjes) op het web hebben, namelijk JPG en PNG. En hoe je ze zo kunt opmaken en plaatsen dat ze goed vindbaar zijn voor zoekmachines.

Lees meer over afbeeldingen en formaten

Een handige manier om online te experimenteren met formaten, afmetingen en compressie is Squoosh.

En deze site is puur gericht op JPG.

Deze site bevat de statistieken waarop dit artikel is gebaseerd.

Voor de eenvoud heb ik SVG, GIF, Retina, Responsive images, Transparantie, Device Pixel Ratio, HEIF, HEIC en HEVC, AVIF, WebP in dit artikel buiten beschouwing gelaten.

Ontvang de nieuwste artikelen!

Aan spam doe ik niet 🙂

Over de auteur

Scroll naar boven