Mobiele Navigatie

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

Alvorens uw afbeeldingen te kunnen optimaliseren, is een correct gekozen bestandsformaat voor uw afbeeldingen een eerste belangrijke stap die genomen moet worden. Bent u wel bekend met de verschillende extensies van bestandsformaten voor afbeeldingen op het web?

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

JPEG – Joint Photographic Experts Group (of JPG)

JPEG-bestanden zijn zeer ‘lossy’(2, omdat er informatie verloren gaat van het originele beeld wanneer u 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’(3 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

Grafische formaten als JPEG en GIF werken met pixels, deze afbeeldingen bestaan dus uit punten, SVG is een op XML gebaseerd bestandsformaat voor statische en dynamische vectorafbeeldingen. SVG biedt ruimte voor vier typen grafische objecten, namelijk: vector-grafische vormen, plaatjes, tekst en animaties.

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). Verschillende soorten afbeeldingen moeten worden opgeslagen in verschillende formaten, afhankelijk van wat voor soort afbeelding het is, wat de browser ondersteunt, en wat de ‘behoeftes’ van de desbtreffende pagina zijn.

In algemene zin zijn er 4 overwegingen die u zich moet afvragen voordat u 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 u geen transparantie of animatie nodig heeft, dan is JPEG waarschijnlijk het beste formaat voor u. JPEG’s zijn ontworpen om compressie van hoge kwaliteit foto’s te mogelijk te maken. Voor grafische afbeeldingen met een klein kleurenpalet zou ik 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:

(1 – 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 ..!
(2 – ‘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.
(3 – ‘Lossless’ bestandscompressie is een type compressie waarbij de oorspronkelijke gegevens volledig worden gereconstrueerd uit de gecomprimeerde gegevens, dus zonder kwaliteitsverschil.

Deel dit Bericht:

Categorie: webdesign | Tags: , ,

Auteur: Jan Rajtoral

Jan - AKA Gonzo the Great - Rajtoral is een ervaren grafische en web designer, gespecialiseerd in (front-end) Responsive Web Design, WordPress Ontwikkeling, Logo en Huisstijl ontwerp.

Nog Geen Reacties

Laat een Reactie achter


*) Verplichte velden.

Meest Recent Project

Leerschoon M/V