Afbeeldingen op internet

Er zijn verschillende bestandsformaten voor afbeeldingen. Elk formaat heeft zijn eigen voordelen en nadelen. Elk bestandsformaat heeft hierdoor zijn eigen specifieke gebruikstoepassing.

In dit artikel komen in principe alleen de kenmerken van bestandsformaten aan bod die je tegenkomt wanneer je je bezighoudt met webdesign. De meeste informatie zal gaan over het plaatsen van afbeeldingen op het web en het digitaal bewerken van afbeeldingen.

Om te beginnen zal ik de verschillende kenmerken van grafische bestandsformaten bespreken. Vervolgens zal ik de voor- en nadelen van de verschillende formaten bespreken. Ook geef ik per formaat aan waar je een dergelijke afbeelding het beste voor kunt gebuiken.

Ondersteuning door browsers

Verschillende formaten zijn niet ontwikkeld om getoond te worden door een webbrowser. Deze formaten hebben meestal een grafisch programma nodig om geopend te worden. In de regel kun je zeggen dat bestanden die ondersteund worden door browsers kleiner en gemakkelijker te hanteren zijn. Formaten die niet door browsers ondersteund worden hebben meestal wat meer mogelijkheden tot bewerking.

Compressie

Het verkleinen van een bestand noemen we compressie. Om de benodigde schijfruimte voor een bestand te verkleinen worden verschillende methodes gebruikt. Het grootste verschil in de manieren van compressie ligt hem in het feit of er gegevens worden ?weggegooid? bij het opslaan. Bestandsformaten die gegevens weggooien bij het opslaan noemen lossy. Bestandsformaten die lossy zijn gaan tegenwoordig erg slim om met welke gegevens er verwijderd worden. Er wordt gezocht naar grafische gegevens die het minst zichtbaar zijn voor het menselijk oog. Bestandsformaten die alle gegevens bewaren noemen we lossless.

Pixels en vectoren

De manier waarop gegevens opgeslagen worden kent een onderscheid. Er zijn bestandsformaten die werken op pixelniveau. Deze formaten verdelen een afbeelding in een raster en onthouden op verschillende manieren welk vlakje welke kleur heeft.

Daarnaast zijn er vector gebaseerde bestanden. Deze bestanden maken gebruik van een wiskundige formule om de loop van lijnen op te slaan. Het voordeel van bestandsformaten die gebruik maken van vectoren is dat ze oneindig vergroot kunnen worden zonder dat er kwaliteitsverlies optreed.

Animaties

Sommige bestandsformaten ondersteunen animatie. Dit komt er op neer dat verschillende afbeeldingen achter elkaar worden getoond. Het bekendste voorbeeld is natuurlijk de animated gif.

Transparantie

Elke afbeelding heeft een aantal kleuren die opgeslagen worden. Bij sommige afbeeldingen is het ook mogelijk om een kleur op te slaan die bekend staat als transparant. Door tranparantie toe te voegen kan, bijvoorbeeld in een webbrowser, een plaatje of kleur dat achter de transparante afbeelding staat (gedeeltelijk) getoond worden. Er zijn ook bestandsformaten waarbij semi-transparantie ondersteund wordt. Bij semi-transparantie kun je wel zien wat er achter het transparante gedeelte ligt maar zie je ook nog een gedeelte van de overliggende afbeelding. De onderliggende afbeelding schijnt als het ware door de overliggende afbeelding heen. Door de mate van transparantie aan te passen wordt de onderliggende afbeelding vager of helderder.

Kleursystemen

Elke afbeelding maakt gebruik van een kleursysteem. Dit kleursysteem bepaald uit welke ?mengkleuren? elke kleur wordt samengesteld. Op een beeldscherm wordt altijd gebruik gemaakt van het RGB profiel. Dit komt omdat een beeldscherm gebruik maakt van rode, groene en blauwe punten om het beeld op te bouwen. Door deze kleuren te mengen is het mogelijk alle andere kleuren te verkrijgen.
Een veelgebruikte tegenhanger van RGB is het CMYK profiel. Een CMYK afbeelding bestaat uit de mengkleuren cyaan magenta, geel en zwart. Met deze kleuren is het tevens mogelijk om alle andere kleuren te verkrijgen. Eigenlijk maken alle drukkers gebruik van deze kleuren. Een RGB afbeelding dat gedrukt wordt zal dus een slechte kwaliteit opleveren. Een CMYK afbeelding op een beeldscherm zal daarentegen ook anders getoond worden. Browsers en verschillende content management systemen gaan slecht om met CMYK afbeeldingen.

Nu we weten wat voor kenmerken een bestandsformaat allemaal kan hebben wordt het tijd om de verschillende formaten te benoemen en de voor- en nadelen te bespreken.

JPEG / JPG

De afkorting JPEG staat voor Joint Photographic Experts Group. Zoals je al op kunt maken uit deze naam is dit bestandsformaat specifiek ontwikkeld om foto?s weer te geven. JPEG is een Lossy bestandsformaat. Er wordt een complexe methode gebruikt om te bekijken welke gegevens het beste verwijderd kunnen worden. De afbeelding wordt omgezet naar een ander kleurkanaal. De verschillende kanalen worden vervolgens gecomprimeerd. De kanalen waarvoor het menselijk oog het minst gevoelig worden het meest gecomprimeerd. Ten slotte worden de verschillende kanalen weer samengevoegd tot één beeld.

Een JPEG is ideaal om foto?s weer te geven op het internet. Door de specialistische toepassing en de compressiemethode is het mogelijk om een kleine bestandsgrootte te krijgen zonder al te veel zichtbare kwaliteitsverlies. Daarnaast wordt het JPEG formaat door zo goed als alle browsers ondersteund.

Omdat een JPEG lossy is en op pixelniveau werkt is het niet ideaalgeschikt voor beeldbewerking. Vooral het vergoten van een afbeelding levert een erg slecht beeld. Het is overigens zo dat wanneer het bronmateriaal van afdoende kwaliteit is, het digitaal verwerken van de beelden geen enkel probleem op levert. Verder is het JPEG formaat ongeschikt voor het opslaan van afbeeldingen zoals logo?s, grafieken en teksten.

GIF

GIF is de afkorting van Graphics Interchange Format, dit formaat is, (in veel gevallen) lossless en werkt op pixelniveau. Bij een GIF afbeelding werkt de compressie op basis van de verdeling en het aantal kleuren in horizontale richting.

Een nadeel van het GIF formaat is het feit dat het ?slechts? 256 kleuren ondersteund. Wanneer er meer kleuren in een afbeelding aanwezig zijn zullen er kleuren verloren gaan wanneer je een afbeelding omzet naar GIF. Hierdoor is het GIF formaat niet geschikt voor kleurenfoto?s. GIF is een uitstekend formaat om afbeeldingen waar weinig kleuren in zitten te tonen. Hierbij kun je denken aan logo?s, grafieken, knoppen, teksten en cartoons. Gif is een formaat dat transparantie ondersteund. Semi-transparantie wordt echter niet ondersteund. GIF wordt door bijna alle browsers volledig ondersteund en is door zijn kleine formaat uitstekend geschikt voor gebruik op het web.

Een GIF afbeelding kun je goed bewerken. Hou er bij de bewerking echter wel rekening mee dat op het moment dat je de GIF opent het beperkte kleurpalet (met maximaal 256 kleuren) nog steeds actief is. Het beste kun je bij het bewerken meteen na het openen een ander onbeperkt kleurpalet (RGB of CMYK) kiezen.

Gif is tevens geschikt om een simpele animatie mee te maken.

PNG

Het PNG (Portable Network Graphics) formaat is ontwikkeld als alternatief voor het GIF formaat. Ondank de lossless compressie methode zijn PNG bestanden relatief gezien erg klein. De compressie achter het PNG formaat is open source waardoor dit een betere algemene standaard is. Je zult het hierdoor ook vaak terugvinden in open source programma?s.

PNG ondersteund ook semi-transparantie waardoor het veel mogelijkheden biedt om online te gebruiken. Jammer genoeg wordt PNG pas sinds kort goed ondersteund door alle bekende browsers. Op dit moment is de meest gebruikte browser nog Internet Explorer 6.0. Deze browser ondersteund de transparantie van PNG afbeeldingen nog niet zoals het eigenlijk zou moeten.

PNG is minder geschikt om foto?s mee op het web te plaatsen. Hoewel de kwaliteit uitstekend is zal de bestandsgrootte ook erg groot zijn. Wanneer je een foto wil opslaan of voor bewerking wil versturen is PNG wel goed geschikt.
Met uitzondering van het animatie gedeelte kan een PNG alle taken van het GIF formaat over nemen. Zodoende is een PNG ook uitstekend geschikt voor logo?s, grafieken, knoppen, teksten en cartoons.

BMP

Een bitmap (BMP) is een bestandsformaat van Microsoft. Deze bestanden worden bijna niet gecomprimeerd. Hierdoor zijn de afbeeldingen van een hoge kwaliteit maar ook erg groot. Een BMP wordt wel ondersteund door de meeste browsers het is echter af te raden om een BMP online te gebruiken.

EPS

Een EPS bestand is het enige vector gebaseerde bestand dat we in dit overzicht tegenkomen. EPS staat voor Encapsulated PostScript. EPS heeft vele toepassingsmogelijkheden en handigheidjes. De meeste van deze voordelen zijn echter pas echt handig wanneer je bezig gaat met het ontwerpen van drukwerk.
Een EPS bestand zul je in de praktijk vaak tegenkomen wanneer je een logo aangeleverd krijgt. Doordat een EPS bestand geschaald kan worden zonder kwaliteitsverlies is dit ideaal voor digitale beeldbewerking. Het nadeel van een EPS bestand is de meestal erg grote bestandsgrootte. Het formaat wordt ondersteund door vrijwel alle grafische pakketten.

EPS wordt in principe niet ondersteund door de verschillende browsers.
Wanneer je een dergelijke afbeelding op het web wil plaatsen wordt deze meestal omgezet naar een GIF of PNG. Het omzetten van het bestand doe je in principe na de bewerking. Wanneer je een EPS voor of tijdens het bewerken omzet zal er kwaliteitsverlies optreden.

• Tweet