De JPG en GIF gids

Introductie 1.1  Welk formaat moet ik gebruiken? 1.2  Grafische applicaties 1.3  Een afbeelding bestaat uit pixels 1.4  Afmeting van een grafisch bestand 1.5  Het kleurenpalet Het JPG formaat 2.1  JPEG: uitstekende compressie 2.2  JPEG compressie 2.3  Werken met JPEG bestanden 2.4  PJPEG (progressive JPEG) 2.5  Waarom transparante jpg niet bestaat Het GIF formaat 3.1  GIF: grip op kleuren 3.2  Gif compression, LZW 3.3  Interlaced gifs 3.4  Animated gifs 3.5  Transparent gifs

1. Introductie

1.1  Welk formaat moet ik gebruiken?

JPG (joint photographic experts group): voor afbeeldingen met veel kleuren en weinig scherpe kleurovergangen. Gebruik voor foto's het jpg formaat.
GIF (graphics interchange format): voor afbeeldingen met vlakken met elk dezelfde kleur. Het aantal kleuren is beperkt en de overgangen tussen de kleuren zijn scherp.

1.2  Grafische applicaties

• De standaard is Photoshop van Adobe Systems. Dit is echter niet aan te raden voor beginners omdat door het grote aantal mogelijkheden moeilijk te gebruiken is.
• Een goede en simpele applicatie is Paint.NET, dit is ontwikkeld met Paint - dat sinds Windows 3.0 al met Windows meegeleverd wordt - als inspiratie.
• Paint Shop Pro van Corel Corp. is ook populair, maar is ook niet makkelijk voor de beginner.
• De Gif Construction Set van Alchemy Mindworkshop is een applicatie waarmee animated gifs gemaakt kunnen worden. Zie verderop in deze pagina voor informatie over animated gifs.
• U kunt uw eigen applicatie uitzoeken op Tucows. Selecteer Windows, Design Tools, Image en dan Image Editors.

1.3  Een afbeelding bestaat uit pixels

Elk van de bestandsformaten die hierboven genoemd zijn, zijn zogenaamde raster bestanden. Ze bestaan uit een een groot aantal puntjes, de pixels. Hieronder ziet u een 900% vergroting van een oog, de individuele pixels zijn duidelijk te zien als hokjes.

1.4  Afmeting van een grafisch bestand

Een veelvoorkomende vraag is "hoe groot is digitale afbeelding?". We zijn gewend afmetingen weer te geven in maten als centimeters. Dit is niet mogelijk met web graphics. Hoe groot een afbeelding wordt weergegeven hangt af van de grootte van de monitor van de website bezoeker en de resolutie van die monitor. Veel websites zijn circa 800 pixels breed. Een goede breedte voor een afbeelding is 50 tot 600 pixels.

Een 17 inch monitor die ingesteld staat op een resolutie van 1280x1024 pixels geeft een afbeelding van 300 pixels weer met een lengte circa 8 centimeter.

1.5  Het kleurenpalet

Er zijn in de natuur een onbeperkt aantal kleuren. Nu heeft men in de computerwereld van al deze kleuren er ruim 16 miljoen uitgekozen en deze allemaal een getal gegeven. Er zijn dus ruim 16 miljoen getallen nodig om al deze kleuren te vertegenwoordigen. Nu werkt men in de computerwereld met bits. Een bit kan twee waarden hebben: 0 of 1. Het blijkt dat er voor elke pixel 24 bits nodig zijn om de kleur van dat pixel vast te leggen. 24 bits voor elke pixel: dit maakt uw bestand wel erg groot. Om het bestand kleiner te maken zijn allerlei technieken verzonnen, waaronder het palet.



Veel grafische bestanden bevatten een palet (dit heet ook wel een colour lookup table). Het palet stelt een beperkt aantal kleuren vast, een palet met 256 kleuren wordt veel gebruikt. Nu refereert elke pixel refereert naar een kleur in het palet (palette entry) en hier zijn er maar 256 van. Het gevolg is dat aan elke pixel nog maar 8 bits besteed hoeven te worden.

2. Het JPG formaat (joint photographic experts group)

2.1  JPEG: uitstekende compressie

Dit bestandsformaat is superieur wat betreft compressie. Wanneer u in Paint Shop Pro een bestand bewaart in het jpg formaat kunt u bij "Options" het compressie niveau instellen. De compressie die men kan toepassen op jpg is aanzienlijk. Hieronder staat een grafiek waarin de bestandsgrootte uitstaat tegen het compressie niveau.



De 11 foto's die gebruikt zijn vindt u hieronder. U kunt zelf bepalen welk compressie niveau u nog acceptabel vindt.

2.2  JPEG compressie

Het JPEG algoritme verdeelt de foto in blokken van 8 bij 8 pixels en neemt het gemiddelde van de kleuren van al deze pixels. Het bewaard dit gemiddelde als de waarde voor de pixel linksboven in het blok. De kleuren van de andere pixels worden dan weergegeven als relatief tot de eerste pixel. Nu hoeven voor de resterende 63 pixels niet meer zoveel bits gebruikt te worden, omdat het kleurverschil tussen een pixel in het blok en het gemiddelde niet zo groot is. Vervolgens wordt het proces herhaald: er worden blokken gemaakt van 8 bij 8 blokken, waarbij zoveel mogelijk pixels dezelfde kleur worden gegeven (Photoshop Bible, Deke McClelland).

Is het kleurverschil tussen bij elkaar liggende pixels toch groot, dan gaat men blokken of "dubbele randen" zien. Zie hieronder.

2.3  Werken met JPEG bestanden

Steeds wanneer u een afbeelding als jpg bestand bewaart gaat er informatie verloren. Dit is omdat het JPEG compressie algoritme informatie weggooid, het is "lossy". Wanneer u grafische bestanden moet opslaan, moet u voor een "lossless" formaat kiezen, zoals tif of bmp. Ook het formaat van uw grafische applicatie (zoals het pspimage formaat) is een goede keuze. Sla "half-fabricaten" bij voorkeur op in het bestandformaat van de grafische applicatie zelf, in dit geval zal data zoals lagen ook bewaard blijven. Pas wanneer u een afbeelding maakt voor een webpagina gaat u de randen van de afbeelding wegsnijden (croppen) en comprimeren.

U heeft geen grip op het aantal kleuren in een jpg bestand: het jpeg compressie algoritme gooit kleuren weg naar eigen goeddunken en dit alleen met geavanceerde applicaties in te stellen. Er wordt standaard gezegd dan een jpg bestand 16,7 miljoen kleuren bevat. Het "palet" van jpg staat inderdaad maximaal 16,7 miljoen kleuren toe, maar in vrijwel alle gevallen zal een gecomprimeerd jpg bestand minder kleuren bevatten, bijvoorbeeld enkele tienduizenden. Gebruik "Count Colors Used" om het exacte aantal kleuren te laten tellen.

2.4  PJPEG (progressive JPEG)

Een gewone of "baseline" jpg slaat de informatie als een scan van boven naar beneden. Een progressive jpg bestand bestaat uit meerdere scans. De eerste scan bevat naar heel weinig informatie en is dus snel weergegeven. Elke volgende scan voegt detail toe aan de afbeelding. Het is mogelijk een progressive JPEG op te bouwen uit twee of meerdere scan, dit hangt ook af van de mogelijkheden van het grafische programma. Een progressive jpg bestand is niet groter, maar slaat de informatie op een meer gecompliceerde manier op.

Een voordeel van progressive jpg is dat de bezoeker van uw web site eerder iets ziet. Een nadeel is dat de eerste laag er vaak vrij onaangenaam uitziet. Bovendien doet de computer ongeveer even lang over het weergeven van elke scan als het doet over het weergeven van de hele afbeelding van een baseline JPEG. Dus een progressive jpg is alleen nuttig wanneer de computer de afbeelding veel sneller kan weergeven dan dat de afbeelding binnenkomt. Al met al kiezen velen toch voor de standaard jpg.

Hier volgt een progressive jpg demonstratie. Het gaan om twee dezelfde plaatjes, de linker is standaard en de rechter progressive. Let op: u kunt deze demo maar één keer zien, omdat wanneer u de pagina opnieuw bekijkt de plaatjes in uw browser cache staan. Wanneer u een breedband verbinding heeft zullen de plaatjes zo snel weergegeven worden dat u het verschil waarschijnlijk niet ziet. Progressive JPEG demo

2.5  Waarom transparante jpg niet bestaat

De structuur van het jpg bestand maakt het erg moeilijk om (een deel van) een jpg afbeelding transparant te maken. Een gif bestand kan transparant gemaakt worden. Er wordt dan aan één kleur de eigenschap transparantie toegevoegd. Let op het woord één. Het gif bestandsformaat is hier erg geschikt voor, omdat gif gebruik maakt van een palet: een verzameling discrete kleuren. Bij jpg ligt dit heel anders, jpg is nu juist goed wanneer het gaat om afbeeldingen (foto's) met vele kleuren.

Stel in een afbeelding komt stukje groen gras voor, het stukje kan vele groentinten bevatten. Wanneer men nu één van die groentinten de eigenschap transparantie zou geven en uw web pagina zou wit zijn, dan zouden in het groen gekke witte puntjes verschijnen.

Hier komt nog bij dat jpg compressie "lossy" is, met andere woorden het compressie algoritme gooit kleurinformatie weg. Dit gebeurt door kleuren als het ware te groeperen, de kleur van individuele pixels wordt "verschoven" in de richting van omliggende pixels. Gegeven deze situatie is niet mogelijk om éé kleur uit kiezen voor transparantie.

Een oplossing zou zijn om een "alpha channel" (percentuele transparantie) toe te voegen. Helaas kan jpg niet goed omgaan met een veelvoorkomend alpha channel: grote lappen met dezelfde waarde en scherpe veranderingen. Dit gebrek heeft een negatieve invloed op de bestandsgrootte.

3. Het GIF formaat (graphics interchange format)

3.1  GIF: grip op kleuren

Gif gebruikt een kleurenpalet van maximaal 256 kleuren. U kunt de bestandsgrootte van een gif bestand kleiner maken door het aantal kleuren in het palet te verminderen. De uitdaging is om een minimaal aantal kleuren te gebruiken terwijl de kwaliteit behouden blijft. Het is belangrijk dat voor het palet de meest geschikte kleuren gekozen worden. Paint Shop Pro is hier niet altijd goed in.

Een voorbeeld van gebruik van gif is de bovenstaande JPEG grafiek: vanaf het begin is er voor gezorgd dat er geen grijstinten geïntroduceerd werden. Daardoor kon het worden opgeslagen als een zwart/wit plaatje, voor elke pixel hoeft slechts één bit gebruikt te worden. De afbeelding is 510x300 pixels en is slechts 3 kilobyte (2.723 bytes).

Het gif formaat heeft sinds enige jaren een opvolger: het portable network graphics formaat (png). Een png bestand maakt ook gebruik van een palet, maar deze staat meer dan 256 kleuren toe.

Met dithering kunt u kleuren tot stand brengen die niet in uw palet zitten. De kleur van aangrenzende pixels wordt dan zo gekozen dat deze samen de andere kleur opleveren. Dit effect bestaat omdat de kijker niet de individuele pixels onderscheidt.

3.2  Gif compression, LZW

Gif wordt gecomprimeerd, met behulp van het LZW algoritme (genoemd naar de drie wiskundigen Lempel, Ziv en Welch). LZW compressie heeft een grote invloed op de bestandsgrootte. LZW compressie werkt erg goed wanneer het plaatje grote horizontale vlakken van dezelfde kleur bevat. Hieronder staat twee maal hetzelfde gif bestand (256 kleuren), alleen het tweede bestand is een kwart slag gedraaid. In dit geval verandert de kleur steeds in horizontale richting en LZW werkt dan minder goed: zie de bestandsgrootten. LZW is een compressie methode waarbij geen informatie verloren gaat (lossless), het is gewoon een intelligente manier van opslaan. Tevens heeft het niets te maken met de grootte van het palet.



Gif kent vier subformaten: 87a standard, 87a interlaced, 89a standard en 89a interlaced. Op alle vier subformaten wordt LZW compressie toegepast. Met andere woorden, een gif bestand zonder LZW compressie bestaat niet. 87a is de "gewone" gif.

3.3  Interlaced gifs (87a interlaced en 89a interlaced)

87a interlaced (en 89a interlaced) laadt in in meerdere lagen. Het is de gif-equivalent van de progressive jpg. Dezelfde voordelen en bezwaren die gelden voor de progressive jpg, gelden ook nu weer: de gebruiker ziet eerder iets, wat hij ziet is bij een interlaced gif minder lelijk dan bij een progressive jpg. De totale laadtijd voor een interlaced gif bestand is groter dan voor een gif bestand dit niet interlaced is. Interlaced GIF demo

3.4  Animated gifs (89a en 89a interlaced)

Een animated gif is eigenlijk een filmpje van meerdere gif plaatjes achter elkaar. Tussen de gif plaatjes kan men zogenaamde "control blocks" plaatsen. Dit kan alleen bij de subversie 89a en 89a interlaced. In zo'n control block kan men onder andere aangeven hoelang het volgende plaatje zichtbaar moet blijven. Onderstaande afbeelding is een animated gif.



Animated gif's worden ook gebruikt voor simpele banner advertenties. Voor banner advertenties met meer effecten wordt Flash animatie gebruikt. Flash heeft aanzienlijk meer mogelijkheden, maar vereist wel dat de website bezoeker de Flash plugin geïinstalleerd heeft.

3.5  Transparent gifs (89a en 89a interlaced)

Men kan een kleur uit het palet van een gif bestand tot een "transparante kleur" maken. De browser zal elke pixel met deze kleur niet laten zien, in plaats daarvan ziet u de achtergrond. Het grote voordeel van een transparante kleur is dat plaatjes niet meer rechthoekig hoeven te zijn. Bovenstaande animated gif, bijvoorbeeld, heeft een ovale vorm. Dit kan omdat de onbelangrijke achtergrond kleur transparant is gemaakt. Dit gebeurt ook weer met een control block, daarom werkt het alleen met het subformaten 89a en 89a interlaced.

De drie plaatjes: de eerste heeft geen transparante kleur, de tweede heeft het blauw in de achtergrond als transparante kleur. Het derde het rood van de automobiel als transparante kleur, u ziet dan ook gekke gaten vallen in de automobiel. Het palet bevat blijkbaar twee kleuren rood, want niet alle rood is weg.




Laatst bijgewerkt op 3 november 2006.