Multimedia Handleiding - GIF Afbeeldingen

GIF is een van de belangrijkste afbeeldingsformaten die op het web worden gebruikt.

Dit artikel biedt een gedetailleerde uitleg van de eigenschappen en gebruikstips van GIF-afbeeldingen.

Het begrijpen van afbeeldingsformaten

Zowel HTML als XHTML geeft geen officiële standaard voor het formaat van afbeeldingen. Toch hebben populaire browsers specifieke afbeeldingsformaten gedefinieerd: meestal GIF en JPEG. Andere multimedia-formaten vereisen speciale assistentie-applicaties, en gebruikers van elke browser moeten deze toepassingen verkrijgen, installeren en correct configureren om deze speciale bestanden te kunnen bekijken of te horen. Daarom is het geen verrassing dat GIF en JPEG de praktische standaarden op het web zijn.

Vóór het ontstaan van het web waren deze twee afbeeldingsformaten al wijdverspreid, dus er zijn veel ondersteunende softwarepakketten beschikbaar om afbeeldingen in deze formaten te maken. Hoewel elk van deze formaten zijn voor- en nadelen heeft, gebruiken sommige browsers hun eigenschappen om speciale weergaveeffecten te bereiken.

GIF

Het GIF-formaat verwijst naar het Graphics Interchange Format (GIF), een formaat dat oorspronkelijk is ontwikkeld door CompuServe om afbeeldingen te verzenden aan gebruikers van hun online diensten.

Eigenschappen van het GIF-formaat

Het GIF-formaat heeft veel eigenschappen, waardoor het in HTML/XHTML zeer wijdverspreid is.

Ten eerste is de codingetechniek ervan compatibel met veel platforms. Daarom kunnen GIF-bestanden die op een Macintosh worden gemaakt en samengesteld, gemakkelijk worden geladen, gecodeerd en bekeken op een Windows-gebaseerde PC, dankzij de juiste GIF-decodesoftware (de meeste browsers bevatten deze software).

De tweede eigenschap van het GIF-formaat is dat het een speciale compressietechniek gebruikt die de grootte van de afbeeldingsbestanden aanzienlijk vermindert, waardoor het sneller kan worden overgebracht via het netwerk. De GIF-compressie is een 'ongeschonden' compressie, wat betekent dat de originele gegevens in de afbeelding niet veranderen of verliezen, zodat de gecomprimeerde en gecodeerde afbeelding volledig identiek is aan de oorspronkelijke afbeelding.

Daarnaast is het zeer gemakkelijk om animatie-effecten toe te voegen aan GIF-afbeeldingen.

Versies en kleuren van het GIF-formaat

Hoewel alle GIF-afbeeldingsbestanden .gif (of .GIF) als bestandsextensie gebruiken, zijn er eigenlijk twee GIF-versies: het oorspronkelijke GIF87 en GIF89a, die veel nieuwe functies ondersteunen, waaronder transparente achtergronden, cross-platform en animatie, die in het gebruik van webontwikkelaars zeer wijdverspreid zijn.

Momenteel worden beide GIF-formaten ondersteund door populaire browsers, en ze worden allebei gebruikt om 8-bits pixelwaarden te koppelen aan een kleurenschema, zodat elke afbeelding maximaal 256 kleuren kan hebben.

De meeste GIF-afbeeldingen hebben minder dan de werkelijke kleurnummers, en sommige speciale tools (zoals Macromedia's Fireworks) kunnen deze kleuren in meer gedetailleerde afbeeldingen vereenvoudigen. Door de kleuren te vereenvoudigen, kunnen kleinere kleurenbeelden worden gecreëerd en pixeloverhead worden versterkt, waardoor de bestandskompressie wordt verbeterd en de download snelheid wordt verhoogd.

Echter, vanwege het beperkte aantal kleuren, zijn afbeeldingen die met GIF worden gecodeerd niet altijd geschikt, vooral niet voor afbeeldingen met een fotografische realistische effect. GIF kan worden gebruikt om zeer aantrekkelijke icons en afbeeldingen met weinig kleuren te maken.

Zelfs de meest veeleisende makers kiezen voor GIF

Omdat de meeste grafische browsers GIF-formaat expliciet ondersteunen, is het nu het meest geaccepteerde beeldencoderingsformaat op het web. Inline-afbeeldingen en externe links kunnen dit formaat gebruiken. Als je twijfelt over het kiezen van een beeldformaat, is het gebruik van GIF altijd een goede keuze. Het kan bijna altijd normaal worden gebruikt.

Technieken van GIF-afbeeldingen

GIF-afbeeldingen hebben drie speciale technieken: interlacing (interlacing), transperantie (transparantie) en animatie (animatie).

Interlacing

Door het scannen van de rijen, kan een GIF-afbeelding onmiddellijk op het scherm verschijnen, in plaats van stap voor stap van boven naar beneden te worden weergegeven. Over het algemeen is een met GIF gecodeerde afbeelding een reeks van pixelgegevens die in volgorde van boven naar beneden, rij voor rij, worden geplaatst. Daarom lijkt een gewone GIF-afbeelding op het scherm te worden weergegeven alsof de jaloezieën worden opengedaan, terwijl een GIF met interlacing lijkt te worden weergegeven alsof de jaloezieën worden opengerold. Dit komt omdat de reeks van pixelgegevens elke 4 rijen wordt gecroesst. De gebruiker hoeft slechts een kwart van de tijd te downloaden en weergeven van het hele beeld, om een zeer volledig beeld van boven naar beneden te zien, hoewel het wazig is. Dit beeld, dat slechts een kwart is voltooid, is meestal al duidelijk genoeg, zodat gebruikers met een trage internetverbinding kunnen bepalen of het nodig is om de rest van het beeld te downloaden.

Hoewel alle grafische browsers interlaced GIF kunnen weergeven, niet alle browsers kunnen het geleidelijk scherper wordende effect van interlaced weergeven. Bovendien kunnen gebruikers dit effect onderdrukken door te kiezen om de afbeelding te weergeven nadat deze volledig is gedownload en gedecodeerd. Oude browsers tonen altijd de afbeelding nadat deze volledig is gedownload en gedecodeerd, dus ondersteunen ze dit effect niet.

Doorzichtigheid

Een ander veelvoorkomend effect van GIF-beelden (in feite GIF89a-formaat beelden) is dat een deel van het beeld doorzichtig kan worden gemaakt, zodat de inhoud onder het beeld (meestal de achtergrond van de browser) door de doorzichtige delen zichtbaar wordt. Doorzichte GIF-beelden gebruiken speciaal een kleur in hun kleurkaart als achtergrondkleur, zodat de achtergrond van het weergavevenster doorzichtig wordt. Door de grootte van het beeld zorgvuldig te knippen en een kleur zo dicht mogelijk bij een zuivere kleur te kiezen, kan een transparent beeld worden gemaakt dat eruitziet alsof het volledig in de webpagina is ingesloten of zweeft.

Doorzichtig GIF-beelden zijn geschikt voor elk beeld dat in de documenten is opgenomen, maar niet als een vierkant ziet eruit. Doorzichte GIF-logo's zijn zeer gebruikelijk, zoals doorzichte icoons of druktekeningen - elk beeld met een willekeurige natuurlijke vorm kan dit effect gebruiken. Je kunt ook doorzichtige inline-afbeeldingen in traditionele tekst plaatsen om speciale symbolen weer te geven.

Een nadeel van het doorzichtigheids effect van GIF-beelden is dat als het wordt opgenomen in een hyperlink锚（<a>）tag zonder de rand te verwijderen, of het wordt speciaal omgeven door een frame, het ziet er erg slecht uit. Bovendien wordt andere inhoud weergegeven rond de rechthoekige rand van het beeld, in plaats van dicht bij de doorzichte rand van het beeld. Dit resulteert in onnodige isolatie van het beeld of een vreemde uitstraling van de webpagina.

Animatie

De derde unieke kenmerkende eigenschap van het GIF89a-formaat beeld is dat het eenvoudige frame-by-frame animaties kan realiseren. Door het gebruik van speciale GIF-animationstools kan een reeks GIF-beelden worden geplaatst in een enkele GIF89a-bestand. De browser toont achtereenvolgens elke afbeelding in het bestand, net zoals we vroeger hebben gespeeld (en soms zelf hebben getekend) die kleine boeken met animatie-effecten door snel omslagen. In het GIF-bestand heeft elke afbeelding een speciale besturingseenheid die kan worden gebruikt om het aantal keren dat de browser de hele reeks (herhalend) toont, de tijd tussen elke twee afbeeldingen, en of de afbeeldingsruimte wordt verwijderd van de achtergrond voordat de volgende afbeelding wordt weergegeven, etc., in te stellen. Door deze eigenschappen te combineren met die van GIF's die meestal worden gebruikt (inclusief een aparte kleurenschema, doorzichtigheid, binaire scan, enz.), kan een zeer aantrekkelijke en gedetailleerde afbeelding worden gecreëerd.

De krachtige effecten van eenvoudige GIF-animaties zijn ook een belangrijke reden: je hoeft geen programma's specifiek voor HTML-documenten te schrijven om animatie-effecten te verkrijgen. Maar het heeft ook een zeer groot nadeel: het is beperkt tot zeer kleine grafieken zoals pictogrammen of een smalle strook in het browservenster: zelfs als je zeer voorzichtig bent en geen statische delen herhaalt in opeenvolgende animatie-eenheden, kunnen GIF-animaties zeer groot worden. Zo kan de vertraging bij het downloaden van meerdere animaties in een document de gebruiker zeer vervelend maken. Als er iets is dat we zeer zorgvuldig moeten behandelen en niet misbruiken, dan is het GIF-animaties.

Samenvatting

De krachtige effecten van eenvoudige GIF-animaties zijn ook een belangrijke reden: je hoeft geen programma's specifiek voor HTML-documenten te schrijven om animatie-effecten te verkrijgen. Maar het heeft ook een zeer groot nadeel: het is beperkt tot zeer kleine grafieken zoals pictogrammen of een smalle strook in het browservenster: zelfs als je zeer voorzichtig bent en geen statische delen herhaalt in opeenvolgende animatie-eenheden, kunnen GIF-animaties zeer groot worden. Zo kan de vertraging bij het downloaden van meerdere animaties in een document de gebruiker zeer vervelend maken. Als er iets is dat we zeer zorgvuldig moeten behandelen en niet misbruiken, dan is het GIF-animaties.