Bestandsformaten voor afbeeldingen op het web

Aangezien op dit moment meer dan 60% van de grootte (in kB’s) van een gemiddelde webpagina bestaat uit afbeeldingen/foto’s, is het van cruciaal belang voor web ontwikkelaars om de bestandsformaten en de kwaliteit van afbeeldingen te optimaliseren voor een snelle (responsive) website.

Alvorens je afbeeldingen kan optimaliseren, is een correct gekozen bestandsformaat voor je afbeeldingen een eerste belangrijke stap die genomen moet worden. Ben je wel bekend met de verschillende extensies van bestandsformaten voor afbeeldingen op het web?

• JPEG – Joint Photographic Experts Group (of JPG)
• GIF – Graphic Interchange Format
• PNG – Portable Network Graphics
• SVG – Scalable Vector Graphics
• WebP – Google’s Bestandsformaat voor het Web

In dit artikel wil ik graag de meest gangbare bestandsformaten⁽¹ voor afbeeldingen op het web — elk met verschillende functies, prestaties, voor- en nadelen — nader toelichten. Wat is het verschil, en wanneer is welk bestandsformaat geschikt om te gebruiken?

#JPEG – Joint Photographic Experts Group (of JPG)

JPEG-bestanden zijn zeer ‘lossy’⁽², omdat er informatie verloren gaat van het originele beeld wanneer je deze opslaat als JPEG-bestand. Dit komt omdat JPEG het meeste van de metadata negeert om zodoende het beeldbestand klein te houden, wat inhoudt dat een zekere mate van beeldkwaliteit ook verloren gaat. Het kwaliteitsverlies van JPEG valt niet veel op bij foto’s, maar wel bij bijvoorbeeld grafieken, lijnen of letters.

Bijna elke digitale camera kan afbeeldingen opslaan als een JPEG-formaat. JPEG is zeer web-vriendelijk omdat het bestand kleiner is, wat betekent dat het minder ruimte inneemt op de server en dus een kortere laadtijd. Sinds 1994 wordt JPEG beschouwd als de ‘standaard’.

Voordelen

• 24-bits kleuren (maximum 16 miljoen kleuren)
• Rijke kleuren, ideaal voor foto’s
• Meest gebruikt en geaccepteerd beeldformaat
• Compatible in de meeste besturingssystemen (Mac, Windows, Linux)

Nadelen

• ‘lossy’ (verlies beeldkwaliteit)
• Geen animatie mogelijk
• Geen transparantie

#GIF – Graphic Interchange Format

Het aantal kleuren in een GIF-bestand is meestal beperkt tot 256 (door het gebruik van 8 bits), maar GIF ondersteunt wel verschillende resoluties, animatie — door verschillende beelden achter elkaar op te slaan in hetzelfde bestand, waardoor er een animatie kan worden vertoond — en een transparante achtergrond. GIF is nog steeds een populaire beeldformaat op het internet, omdat de bestandsgrootte relatief klein is doordat een klein kleurenpalet wordt gebruikt.

GIF is ‘lossless’⁽³ voor afbeeldingen met 256 kleuren en lager. Dus voor een full colo(u)r afbeelding, kunnen tot 99,998% van de kleuren verloren gaan. GIF is juist zeer geschikt voor bijvoorbeeld diagrammen, cartoons en logo’s met relatief weinig kleuren. GIF is nog steeds het meest gekozen formaat voor animatie.

Voordelen

• Ondersteunt transparantie
• Ondersteunt animatie
• Zeer geschikt voor (grafische) afbeeldingen met een beperkt kleurenpalet
• ‘Lossless’ kwaliteit (< 256 kleuren!)

Nadelen

• Ondersteunt alleen 256 kleuren

#PNG – Portable Network Graphics

PNG is goedgekeurd als een standaard sinds 1996. Het is een bestandsformaat dat speciaal voor het web is ontwikkeld. PNG is, in bijna alle aspecten, de superieure versie van de GIF.

Net als een GIF bestand, wordt ook PNG opgeslagen met maximaal 256 kleuren, maar het slaat de kleur informatie efficiënter op en ondersteunt ook een 8 bit transparantie (zelfs in IE6). PNG kan ook 24-bits RGB-afbeeldingen in kleur, grijswaarden, zowel met als zonder alpha-transparantie ondersteunen.

Voordelen

• ‘Lossless’
• In veel opzichten beter dan GIF
• Ondersteunt transparantie beter dan GIF

Nadelen

• Grotere afmetingen foto’s worden zwaar in grootte (zwaarder dan een JPEG)
• Animatie (zoals in GIF) wordt niet ondersteund

#SVG – Scalable Vector Graphics

SVG, of Scalable Vector Graphics, is een afbeeldingsformaat dat gebruik maakt van vectorgegevens. SVG afbeeldingen zijn opgebouwd uit punten en lijnen in plaats van pixels (.JPG, .PNG, etc.), wat betekent dat ze kunnen worden geschaald naar elke resolutie zonder de kwaliteit aan te tasten.

SVG bestanden zijn al sinds de jaren 2000 beschikbaar voor webdesign. Ze de afgelopen jaren steeds populairder geworden dankzij de groeiende vraag naar schaalbare en lichtgewicht grafische elementen op het web. Alle bestanden die door een ontwerper in een vector programma (bijvoorbeeld Adobe Illustrator) zijn gemaakt, kunnen in principe als .SVG worden geëxporteerd en gebruikt.

Ondanks dat SVG’s al vele jaren bestaan en door de meeste browsers worden ondersteund, is pas de laatste paar jaar SVG opgekomen in populariteit omdat icoontjes en/of graphics met CSS, canvas en/of een JavaScript Library ook volledig kunnen worden gestyled, gegroepeerd en geanimeerd.

Voordelen

• Geen kwaliteitsverlies bij schalen/zoomen (Retina)
• SVG-afbeeldingen kunnen op hoge kwaliteit worden afgedrukt
• Ondersteund transparantie
• Mogelijkheid tot opmaak, animatie, etc. middels CSS/JS Libraries
• Wordt door alle moderne (mobiele) browsers ondersteund

Nadelen

• Ongeschikt voor zeer complexe beelden, zoals foto’s.
• Reconstructie van vector data kan aanzienlijk langer duren dan een pixel-bestand van vergelijkbare complexiteit.

#WebP – Google’s nieuw Bestandsformaat voor het Web?

WebP biedt niet alleen een superieure compressie qua beeldkwaliteit en bestandsgrootte, maar ondersteund ook transparantie, animaties, ICC-profielen, XMP-metadata en tiling (betegelen) en maakt tevens gebruik van zowel een lossy als een lossless compressie.

Dit relatief nieuwe bestandsformaat is ontwikkeld door Google en lossless afbeeldingen zijn 26% kleiner in omvang in vergelijking met PNG’s. WebP lossy beelden zijn 25-34% kleiner in omvang ten opzichte van JPEG-afbeeldingen. WebP wordt ondersteund door Google Chrome. Opera en de webbrowser van Android 4.0, maar het gebruik van WebP is vooralsnog beperkt.

Voordelen

• Superieure lossy en lossless compressie
• Ondersteund transparantie, animaties, ICC-profielen, XMP-metadata en tiling

Nadelen

• Slechte ondersteuning in (mobiele) browsers (Chrome, Opera en Android 4.0+)
• Geen W3C gestandaardiseerde specificatie

Conclusie

Voor alle duidelijkheid, er is geen “one size fits all” formaat voor het web (althans niet op het moment van schrijven). Afbeeldingen moeten worden opgeslagen in verschillende bestandsformaten, afhankelijk van wat voor soort afbeelding het is, wat de browser ondersteunt, en wat de ‘behoeftes’ van de desbetreffende pagina zijn.

In algemene zin zijn er 4 overwegingen die je jezelf moet afvragen voordat je voor een bepaald bestandsformaat kiest:

• Is transparantie noodzakelijk?
• Is animatie noodzakelijk?
• Is een hoge beeldkwaliteit gewenst (bijv. hoeveelheid kleuren)?
• Is het een puur grafische afbeelding (bijv. logo of iconen)?

Als je geen transparantie of animatie nodig heeft, dan is JPEG waarschijnlijk het beste formaat voor jou. JPEG’s zijn ontworpen om compressie van hoge kwaliteit foto’s te mogelijk te maken. Voor grafische afbeeldingen met een klein kleurenpalet zou ik bestandsformaten zoals PNG of SVG in plaats van JPEG gebruiken. Voor foto animatie is GIF nog steeds zeer populair.

De mogelijkheden die SVG’s (en in mindere mate WebP’s) ons bieden worden ‘as we speak’ uitgezocht en moeten goed in de gaten gehouden worden omdat ze steeds vaker succesvol worden toegepast op het internet en in app’s!

Voetnoten:

⁽¹ – TIFF en BMP zijn beide ‘wrapper’ formaten, een flexibele bestandsindeling voor opslag van afbeeldingen (onder andere foto’s en bitmap afbeeldingen). Niet echt geschikt voor het web ..!
⁽² – ‘Lossy’ bestandscompressie resulteert in verlies van data en kwaliteit van de originele versie waardoor het gecompresserde bestand vaak (veel) minder schijfruimte in beslag neemt dan het origineel.
⁽³ – ‘Lossless’ bestandscompressie is een type compressie waarbij de oorspronkelijke gegevens volledig worden gereconstrueerd uit de gecomprimeerde gegevens, dus zonder kwaliteitsverschil.

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met Front-end web design (HTML, CSS en JS/jQuery), User Experience (UX), Toegankelijkheid (WCAG), Performance en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij altijd streeft naar merkconsistentie in het hele ontwerp.