spacer.png, 0 kB
Bestandformaat GIF E-mail

Voor plaatjes zijn er veel bestandsformaten beschikbaar. Iedereen kent wel BMP, GIF en JPG. Maar er zijn er zoveel meer. Reden om eens wat dieper in de grafische bestandsformaten te duiken. En wat natuurlijk nog veel belangrijker is. Welk formaat gebruik je voor welke toepassing.

 

GIF

 

Een bestandsformaat met aanzienlijke compressie

Wim van ’t Einde

 

Het GIF-bestand werkt, evenals de BMP-bestandsindeling uit het  vorige artikel, met pixels. Het GIF-bestand is echter veelzijdiger en biedt zelfs animatiemogelijkheden. Het wordt nog steeds veel gebruikt voor afbeeldingen die via netwerken worden verstuurd. Dit omdat de GIF-bestandsindeling de omvang van de afbeeldingen enorm kan terugbrengen.  

 

De geschiedenis van GIF

De afkorting GIF is ontstaan uit de eerste letters van de woorden Graphics Interchange Format. Deze benaming geeft daarmee direct de reden van het ontstaan weer; Interchange of uitwisseling. Het uitwisselen van afbeeldingen via trage netwerken duurde, vanwege de bestandsomvang van de grafische afbeeldingen erg lang. Deze doorlooptijd kon worden verkort door compressie op de bestanden toe te passen. De bestandsindeling is in de jaren tachtig populair gemaakt door Computerserve. De ontwikkelaars van internet omarmden het bestandsformaat maar al te graag, want ook zij kenden het probleem van trage verwerking bij grote afbeeldingen.

De GIF-standaard kent 4 subformaten:

  • 87a standard;
  • 87a interlaced;
  • 89a standard;
  • 89a interlaced.

De verschillen tussen de subformaten worden later in dit artikel aangegeven.

 
Patentrechten

Unisys vestigde een patent op de GIF-technologie, waardoor licentierechten moesten worden betaald voor applicaties die deze techniek gebruiken. Inmiddels zijn deze patenten in de meeste landen verlopen. De kosten voor de patenten waren voor de software-ontwikkelaars aanleiding om een alternatief voor de GIF-standaard te ontwikkelen. Het PNG-formaat biedt dat alternatief. In een van de volgende artikelen in deze reeks zal ik dieper op de PNG-standaard ingaan.

 

Animating

Vanaf GIF-standaard 89a is het mogelijk om bewegende plaatjes te maken met een GIF. Een feite bestaat een dergelijk plaatje uit een serie losse plaatjes die steeds wat wijzigen en daardoor de illusie van beweging geven. Om een voorbeeld te geven van een animated-GIF met vijf plaatjes die ik eenvoudig heb gemaakt met Powerpoint. Hierboven staan de vijf plaatjes. Het kan een doorlopend plaatje worden door het balletje heen en weer te laten stuiteren. Dat wordt dan de volgorde van plaatje 1, 2, 3, 4, 5, 4, 3, 2 en vervolgens alles weer opnieuw. Het is een eenvoudig voorbeeld, maar dat kan op verschillende manieren worden uitgevoerd. Door tussen de plaatjes nog extra plaatjes te zetten kan de beweging eventueel nog vloeiender worden gemaakt.

Image
Plaatje 1
Image
Plaatje 2
Image
Plaatje 3
Image
Plaatje 4
Image
Plaatje 5
 

Om de animated GIF aan te maken heb je wat extra software nodig die de plaatjes achter elkaar plaatst. Ik gebruik daar het gratis programma UnFREEz voor.

Image UnFREEz

Vanuit de verkenner sleep je de bestanden in de gewenste volgorde in het vak voor de frames. In de afbeelding heb ik de eerdere volgorde gebruikt. Omdat is het balletje steeds heen en weer wil laten stuiteren heb ik de optie ‘loop animation’ aangevinkt. Ik heb geen gebruik gemaakt van de optie ‘Frame delay’. Hiermee kan de animatiesnelheid worden ingesteld. Met een druk op de knop ‘Make Animated GIF’ wordt mijn geanimeerde plaatje met het stuiterende balletje aangemaakt. Alles bij elkaar vijf plaatjes (113 bij 113 pixels) van ongeveer 500 bytes en een animated GIF van nog geen 4 kilobyte.

Image Het uiteindelijke effect

De animatie-mogelijkheden van GIF zijn door Flash achterhaald, maar worden toch nog veel gebruikt omdat er veel en vooral ook gratis ondersteuning voor is. Over Flash zal in een volgend artikel in deze serie worden geschreven.

 

Interlacing

Het achtervoegsel Interlaced geeft aan dat de afbeelding op een afwijkende manier wordt opgebouwd. Het plaatje wordt niet in een keer op geplaatst, maar in een aantal fases. Daardoor is het plaatje eerder zichtbaar op het scherm. Een nadeel daarbij is wel dat de totale laadtijd van de afbeelding langer is dan bij niet-interlaced GIF. Interlacing is vooral interessant wanneer het laden van het GIF-bestand lang duurt. Tegenwoordig wordt interlacing, vanwege de snelle internet-verbindingen, veel minder toegepast. De laadtijd van plaatjes is nu zo kort dat de voordelen van interlacing vrijwel niet meer opwegen tegen de nadelen, de langere laadtijd.

 

Compressie

Voor de compressie wordt gebruik gemaakt van de LZW compressietechnologie. Deze technologie werd ontwikkeld aan de hand van een algoritme dat door drie wiskundigen (Lempel, Ziv en Welch, vandaar LZW-compressie) werd ontwikkeld. Het best functioneert het algoritme als de afbeelding horizontaal veel lijnen met eenzelfde kleur bevat. De afbeeldingen hieronder geven daarvan een voorbeeld. Beide plaatjes zijn even groot (113 bij 113 pixels) en er zijn gelijke kleuren in gebruikt. Toch is het linker plaatje slechts 1,75 kilobyte groot en het rechter (de eerste afbeelding een kwartslag gedraaid) 2,25 kilobyte groot. 

Image Image

Het voordeel van de LZW-compressie is dat er geen informatie over de afbeelding verloren gaat, het wordt alleen door een slimmere manier van opslaan aanmerkelijk kleiner. 

 

Transparantie

Vanaf versie 89a biedt de GIF-standaard ook transparantie. Dat betekent dat een van de kleuren uit het GIF-palet niet wordt getoond en daarvoor in de plaats de achtergrond laat zien. Dit heeft het voorbeeld dat een plaatje niet meer rechthoekig hoeft te zijn, maar de lijnen van de eigenlijke afbeelding kan volgen. Voor plaatjes op een gemêleerde achtergrond is die transparantie een groot voordeel. In onderstaand voorbeeld zie je alleen nog het balletje en niet meer de blauwe achtergrond.

Image Image  

Een aantal pakketten biedt ook de mogelijkheid om de transparantie naar naastliggende kleuren uit te breiden door een tolerantie op te geven. Kleuren die net iets afwijken worden daardoor ook transparant gemaakt. Een waarschuwing is hier echter wel op de plaats. Wanneer de het object van de afbeelding gelijke kleuren bevat als de achtergrond worden de delen met die kleur ook transparant gemaakt. Dat kan vervelende effecten hebben. 

 

Grafische mogelijkheden van de GIF

GIF heeft dus een aantal mooie mogelijkheden, maar het heeft ook beperkingen. De meest belangrijke beperking is dat een GIF-bestand maximaal 256 kleuren kan weergeven. Dat maakt de GIF-standaard minder geschikt voor het weergeven van foto’s. De 256 kleuren kunnen overigens wel worden uit een palet van maar liefst 262.144 kleuren, dat geeft toch nog een redelijke kwaliteit. Om het palet voor een foto (welke kleuren van de 262.144 worden gekozen voor de 256 mogelijke kleuren) zo goed mogelijk te verdelen kunnen veel beeldbewerkingspakketten een optimaal palet samenstellen. Dit terugbrengen van het aantal kleuren leidt tot een kleurafwijking ten opzichte van het origineel.

Om de gevolgen van deze kleurafwijking kleiner te maken kan GIF de foto’s ook ditheren. Daarbij wordt de kleur van een GIF-pixel niet alleen bepaald aan de hand van de originele pixel, maar ook aan de hand van de afwijking in kleur van de omliggende pixels. Het patroon wordt daardoor wat korrelig als je het van dichtbij bekijkt, maar van afstand is het resultaat aanmerkelijk beter dan de normale GIF, dithering laat de kleurnuancering niet groter worden, maar groter lijken.

Als voorbeeld wordt onderstaande foto gebruikt. Expres is een foto gekozen met een groot aantal kleurnuances (maar liefst 112.187, dus er moet behoorlijk worden gekozen om terug te komen tot de beschikbare 256 kleuren). Op de volgende pagina zijn een aantal voorbeelden opgenomen met en zonder dithering.

Image Foto 1

De gebruikte foto is steeds 500 bij 375 pixels groot. Het originele JPEG-bestand had een omvang van 60,9 Kb.

Image Foto 2

De tweede foto is omgezet naar GIF geoptimaliseerd mediaan met 256 kleuren. Er is dus gekozen voor een zo optimaal mogelijk palet. Op zich valt de foto nu nog best wel mee. De kleuren zijn wat vlakker dan dat van het origineel, maar dat zal een gemiddelde webgebruiker niet opvallen, wanneer het origineel er niet naast wordt gezet. De omvang van de foto is overigens wel verdubbeld. Het is nu 122 Kb. Het laat dus duidelijk zien dat GIF niet altijd een kleiner bestand oplevert. Dat terwijl de kwaliteit van de foto ook nog eens afneemt!

Image Foto 3 

De derde foto is ook met 256 kleuren gemaakt, maar niet geoptimaliseerd. Hier is gebruik gemaakt van een beperkt aantal webveilige kleuren. De grootte van het bestand is opnieuw aanmerkelijk afgenomen. Nu is het bestand nog maar 56,9 Kb groot. Maar deze keuze begint toch al een duidelijke tol te eisen. De wolken linksboven in de foto verdwijnen nagenoeg en de doortekening in de bomen neemt aanmerkelijk af. Door de standaardkleuren te gebruiken verdwijnen veel van de nuances in de afbeelding. Rode tinten worden vrijwel niet gebruikt in dit pallet, maar de ruimte ervoor is wel gereserveerd. En dat gaat duidelijk ten koste van de overige kleuren.

Voor de rest van de de foto´s wordt steeds gebruik gemaakt van de geoptimaliseerd mediaan methode van compressie om de foto´s zo goed mogelijk te laten zien. Een aantal donkere delen (onder het zitdeel van de bank en links in de dennen) van de foto zijn maar gewoon zwart geworden, terwijl de tweede foto nog best veel nuance in deze donkere delen laat zien. 

Image Foto 4 

Bij de vierde foto is het aantal kleuren teruggebracht tot 64, terwijl het resultaat nog steeds erg goed is. Toch is de nuancering van de wolken linksboven al aanmerkelijk minder. Dit deel wordt daardoor allemaal wat vlekkiger. Ook in andere delen van de foto gebeurt dat, maar daar valt het minder op. Het aantal kleuren is wel met maar liefst driekwart teruggebracht. De omvang van de foto neemt hierdoor verder af tot 81,1 Kb.

Image Foto 5 

Weer wordt het aantal kleuren met driekwart terug gebracht. Nu zijn er nog slechts 16 kleuren in de foto aanwezig. De omvang van het bestand neemt af tot 47,4 Kb. De omvang van de foto is nu nog slechts eentiende van het origineel. Het is goed om deze foto eens te vergelijken met de derde foto met de webveilige kleuren. Mijn voorkeur gaat als ik naar het totaal kijk naar foto 5, die tevens kleiner is dan foto 3. Maar let even op de blauwe kleuren in de lucht. Daar worden duidelijk een aantal blauwe nuances weergegeven, een langs de bovenrand van de foto en een net boven de witte bergrand. Doordat de derde foto minder blauwe nuances kent heeft die dit probleem niet, maar daar leert het dan ook een vlakblauwe lucht op, terwijl de foto die maar 1/16 van de kleuren heeft nog drie kleurtinten in het blauwe deel onderscheidt. Ook de doortekening in de bomen is beter als die bij foto 3.

Image Foto 6

Wanneer het aantal kleuren bij foto 6 weer met een factor 4 wordt teruggebracht tot nog slechts 4 kleuren is het bestand nog maar 20 Kb groot. Nu zijn de gevolgen van de compressie veel duidelijker geworden. Alhoewel de details nog zichtbaar zijn is het als foto niet meer geschikt. 

Image Foto 7 

Bij foto 7 is het nog wat extremer. Nu zijn er nog slechts twee kleuren over. De contouren zijn nog zichtbaar, maar de bergen zijn al helemaal verdwenen. Het bestand is nu nog slechts 7,59 Kb groot.

Image Foto 8 

Foto 8 is weer een 256 kleuren variant, maar nu met dithering. Het levert wel wat resultaat op. Vooral de doortekening in de wolken wordt er beter van. Het bestand groeit door de dithering van 122 naar 144 Kb. 

Image Foto 9 

Op foto 9 is hetzelfde aantal kleuren gebruikt als bij foto 6, maar nu met het toepassen van dithering. Door de dither-punten komt er weer wat meer structuur in de foto. De omvang van de foto is nu 26,1 Kb. De wolken en de lucht scheiden zich van de bergen. Ook krijgen de bergen wat meer nuance.

Image Foto 10 

Foto 10 laat ook in de variant met twee kleuren zien wat de voordelen van dithering zijn. Ook hier wordt het bestand wel wat groter, maar 9,57 Kb (2 Kb extra) levert wel aanzienlijk meer details op.

Image Foto 11 

Als tussenvorm nog even de 16 kleurenversie met dithering. Hierin worden de punten al weer wat duidelijker zichtbaar. Het bestand is 54,3 Kb groot, in plaats van 47,4 van de niet-geditherde versie.

 

 
Volgende >
Joomla Template by Joomlashack
Free Joomla Templates