Fotografie wordt steeds populairder onder de bloggers. Een simpele foto van een product zie je niet snel meer – het draait allemaal om de flatlays, mooie achtergronden, bokeh effecten of decoratie om het product heen. De foto zou bijna in een tijdschrift kunnen verschijnen zo mooi dat ‘ie is. Maar waarschijnlijk heb je nog altijd moeite met het kiezen van een formaat. Vele zeggen dat PNG formaat altijd beter is, maar is dat wel zo? Of voldoet een JPEG afbeelding prima voor gebruik op het web?
Voordat ik je het antwoord ga geven, wil ik eerst de termen lossless en lossy uitleggen. Misschien dat je er weleens over gehoord hebt, misschien ook niet, maar het is wel belangrijk om het verschil tussen deze twee te weten.
Lossless VS Lossy
Heb jij ook weleens een afbeelding gedownload en dat er bepaalde informatie te zien is wanneer je het bestand selecteert in de verkenner? Zoals bijvoorbeeld copyright informatie, de fotograaf of de datum wanneer de foto is genomen? Deze informatie – ook wel meta-data genoemd – wordt opgeslagen bij een lossless bestand. Een lossless bestand bevat alle informatie nog want dit bestand is niet gecomprimeerd. Compressie, ofwel datacompressie, is feitelijk het verkleinen van een bestand en dit kan onder andere gedaan worden door het verwijderen van (onnodige) digitale gegevens.
Een lossy bestand negeert het grote deel van de meta-data; dit is dus een gecomprimeerde afbeelding. Deze afbeelding zal daarmee ook minder ruimte in beslag nemen omdat het bestand verkleind is. JPEG afbeeldingen, meest gebruikt voor foto’s en andere complexe afbeeldigen op het web, zijn lossy gecomprimeerd. Bij JPEG kan men de compressie instellen en dus bepalen hoeveel informatie er verwijderd word waardoor de bestandsgrootte kleiner is.
Afbeeldingen hebben invloed op je laadtijd
Waarom is het nu zo belangrijk om het juiste formaat te kiezen? En waarom zou je überhaupt jouw afbeeldingen verkleinen? Schrijfruimte heb je toch genoeg! Het hebben van genoeg schrijfruimte is natuurlijk altijd belangrijk, net zoals op de computer kan ook de schrijf (server) van je website vol raken waardoor je geen bestanden meer kan opslaan. Echter, wanneer een afbeelding geladen wordt, gebruik je bandbreedte en een grote, zware afbeelding duurt nu eenmaal langer om te laden dan een icoontje van 5kb.
Ook al heb jij highspeed internet op je computer, het laden van zware afbeeldingen kan alsnog lang duren, vergt enorm veel van een server en eerlijk is eerlijk – wacht jij tegenwoordig nog langer dan een paar seconden om een website te laten laden? Als het na 5 seconden niet is gelukt zit ik met mijn vinger alweer op de refreshknop omdat ik denk dat de browser problemen heeft. Ik heb er het geduld niet meer voor. Hoe sneller een website laadt, hoe beter. Niet alleen voor de server, schrijfruimte en bandbreedte maar óók voor je SEO. Google hecht namelijk veel waarde aan hoe een site scoort op al deze punten en het gebruiken van gecomprimeerde afbeeldingen geeft jou uiteindelijk bonuspunten. SCORE!!
Wil je meer weten over hoe je jouw laadtijd kan verbeteren? Ik heb er een artikel over geschreven waarin ik vijf tips geef zodat ook jouw website snel laad en daarmee goed kan scoren op Google.
JPG, PNG, of GIF? Het formaat is belangrijk
Hoe de afbeelding is opgeslagen heeft een impact op de bestandsgrootte, welke vervolgens invloed heeft op de laadtijd. Over het algemeen kan je het volgende gebruiken afhankelijk van de situatie.
| Gebruik | Formaat |
|---|---|
| Foto | JPG |
| Vector | PNG |
| Afbeelding met paar kleuren | PNG |
| Afbeelding met transparantie | PNG |
| Animatie | GIF |
GIF – Graphic Interchange Format
Graphics Interchange File (GIF) is gelimiteerd tot 256 kleuren en is een lossless bestaand dat een veel gebruikte keus op internet. GIF is een goede keus als je een tekening, text of icoon wilt weergeven dat weinig kleur bevat en een klein formaat heeft. GIF is ook veelgebruikt bij animaties ofwel een bewegende afbeelding. Daarnaast ondersteund GIF ook transparantie.
Een GIF wordt gecomprimeerd door het limiteren van het kleurenpalet. Doordat het maximaal 256 kleuren kan gebruiken, kan het voor kleurverschillen zorgen in een afbeelding, zoals witte puntjes of plaatsen waarin de diepte is weggevallen doordat het een vlek aan kleur is geworden. Een kleur dat buiten de 256 valt wordt namelijk aangepast naar een kleur dat er dichtbij ligt.
Voordelen GIF formaat
- 8bit kleur (256 kleuren)
- lossless compressie
- geschikt voor logos, afbeelding met vlakke kleurdelen en weinig diepte (vanwege de 256 kleuren limitatie)
- geschikt voor icoons met weinig kleuren
- ondersteund transparantie
- ondersteund animatie
Nadelen GIF formaat
- oudste afbeeldingsformaat voor webgebruik (1989)
- heeft in de meeste gevallen een groter bestandsgrootte dan een PNG
JPEG – Joint Photographic Experts Group (of JPG)
JPEG-bestanden zijn lossy. Wanneer je het bestand opslaat gaat er informatie wat bij het originele bestand hoort verloren. Dit komt doordat JPEG automatisch al de meeste meta-data negeert om zo het bestand klein te houden. Dit betekend ook dat daarmee een klein gedeelte van het beeldkwaliteit verloren gaat. Dit kwaliteitsverlies valt vaak niet op in foto’s, maar wel bij afbeeldingen waarin veel detailwerk te zien is – zoals bij grafieken of letters. De afbeelding oogt dan pixelig. Het continu opnieuw opslaan (openen, bewerken, opslaan) van een JPEG is dan ook zeer funest voor de kwaliteit van de afbeelding, omdat er iedere keer opnieuw informatie verloren gaat.
Iedere digitale camera slaat afbeeldingen op als JPEG-formaat, maar ook als RAW. Deze bestanden zijn echter niet te gebruiken op het web. JPEG is daarentegen zeer web-vriendelijk omdat het bestand kleiner is, dus minder ruimte inneemt op de server en zorgt voor een korte laadtijd. Sinds 1994 wordt JPEG beschouwd als de ‘standaard’.
Voordelen JPEG formaat
- 24bit kleur
- geschikt voor afbeeldingen met veel details
- lossy compressie
- meest gebruikt afbeeldingsformaat; beschouwd als standaard
- door middel van minimale compressie kan je een kleiner bestandsgrootte krijger
Nadelen JPEG formaat
- ondersteund geen transparantie
- niet geschikt voor logo’s en icoons want ondersteund geen transparantie
- kan een groter bestandsgrootte genereren voor een kleine afbeeldingen
- door teveel aan compressie kan de afbeelding onscherp worden
PNG – Portable Network Graphics
Het PNG formaat is tot het leven geroepen om het GIF formaat te vervangen. Grafische programma’s mochten het maken van GIF’s niet toevoegen aan het programma zonder dat er een licentie was aangekocht bij de makers van het afbeeldingsformaat GIF, namelijk Unisys. Dit leidde uiteindelijk tot het ontwikkelen van een nieuw formaat, namelijk PNG. GIF werd echter nooit helemaal vervangen doordat PNG toentertijd nog slecht ondersteund werd door diverse browser.
Het PNG formaat heeft enkele voordelen tegenover het GIF formaat, met name het wel kunnen gebruiken van het volledige kleurenspectrum. Een PNG is net zoals een GIF een lossless bestand, wat betekend dat alle informatie behouden blijft. Echter kan een PNG formaat 10 tot 30% kleiner/gecomprimeerd worden dan een GIF bestand. In tegenstelling tot een JPG kan je een PNG meerdere malen opslaan zonder dat je enige kwaliteit verliest.
GIF heeft de mogelijkheid tot transparantie binnen een afbeelding, echter bij een PNG kan je de hoogte van deze transparantie ook regelen. Een andere benaming hiervoor is doorzichtigheid (opacity). Je kan dus de mate van doorzichtigheid regelen, of volledig transparant (0%) of je maakt hem half doorzichtig (50%) en ga zo maar door. De mate waarin de kleur terug te zien is heb je volledig in de hand.
En zo zijn er nog enkele voordelen als je PNG vergelijkt met een GIF. Je kan dus eigenlijk zeggen dat een PNG de verbeterde versie van een GIF is geworden. Het enige wat een GIF als voordeelt heeft is dat het animatie ondersteund, dat lukt bij een PNG dan weer niet.
Voordelen PNG formaat
- op te slaan als 24bit kleur of 8bit kleur (256kleuren)
- lossless compressie
- geschikt voor logo’s, transparante en semi-transparantie afbeeldingen, afbeeldingen met weinig diepte qua kleuren
- geschikt voor icoons
- meeste gevallen een kleine bestandsgrootte dan een GIF
Nadelen PNG formaat
- hoe meer detail in een foto, hoe groter de bestandsgrootte
Bestandsformaten en bestandsgrootte
Weet je nu nog niet zo goed wat je moet kiezen? Laten we eens gaan kijken naar wat voorbeelden.
| JPG – 228KB | PNG – 327KB |
|---|---|
 |
 |
De afbeeldingen zien er precies hetzelfde uit, maar de PNG is veel groter! Wanneer de foto er precies hetzelfde uitkomt te zien, kies dan altijd voor het formaat wat een kleine bestandsgrootte heeft. Wanneer je Photoshop gebruikt kan je middels Save for Web de bestandsgrootte zien en kan je dus kiezen voor het formaat met het kleinste bestandsgrootte.
Laten we de afbeeldingen comprimeren voor een kleinere bestandsgrootte
Ik gebruik hier twee compressie-tools voor, deze komen later aan bod.
| JPG Compressed – 69.5KB | PNG Compressed – 85KB |
|---|---|
 |
 |
Het verschil is misschien niet heel goed te zien vanwege de kleine afbeeldingen, maar de JPG is een stuk scherper en de kleuren zijn zuiverder. JPG kan de verschillende kleuren beter verwerken dan een PNG formaat en ook de bestandsgrootte is een stuk kleiner!
Als het gaat om minder kleuren of vectoren, dan is PNG overduidelijk de winnaar
Laten we nu eens gaan kijken naar een vector afbeelding met weinig kleuren. Onderstaande afbeeldingen zijn niet gecomprimeerd.
| JPG Uncompressed – 143KB | PNG Uncompressed – 45KB |
|---|---|
 |
 |
Deze keer is de PNG kleiner én als bonus is de achtergrond ook nog eens transparant! Laten we deze afbeeldingen ook eens comprimeren, kijken wat voor resultaten er dan uitkomen.
| JPG Compressed – 72KB | PNG Compressed – 14KB |
|---|---|
 |
 |
Kijk nou eens naar dat resultaat! 13kb voor een afbeelding met transparante achtergrond. De JPG komt nog niet eens in de buurt!
In het begin zal je er nog even aan moeten wennen om je afbeeldingen in het juiste formaat op te slaan, echter op den duur gaat dit automatisch en scheelt het enorm veel aan schrijfruimte én wordt de website gewoon netjes en snel geladen. En dat vindt Google fijn! Mocht je dus bewust bezig zijn met het groeien van je website, óf wil je gewoon ervoor zorgen dat je site netjes en snel blijft, dan is het juist opslaan van je afbeeldingen een begin.
Hoe comprimeer ik mijn afbeeldingen?
Je kan je afbeeldingen met Photoshop of een ander grafisch programma comprimeren, maar ik merk dat daardoor de kwaliteit vaak wat minder is. Mijn voorkeur gaat dan ook uit naar gratis programma’s zoals JPEGmini of TinyPNG die afbeeldingen comprimeren zónder kwaliteitsverlies. Ben je benieuwd naar hoe dit in zijn werking gaat? Ik heb er in mijn artikel “Tips om de laadtijd te verlagen” al over geschreven.
Comprimeer jij je afbeeldingen voordat je ze upload naar je blog?
Heb je ooit een probleem gehad met een te lange laadtijd voor een afbeelding?
