De nederige GIF maakt een comeback, simpelweg omdat met het toenemende gebruik van smartphones en beperkte bandbreedte gebruikers bijna onmiddellijke laadtijden gaan verwachten. Hoe kleiner uw webafbeeldingen, hoe sneller uw afbeeldingen worden geladen en hoe gelukkiger uw bezoekers zullen zijn. Bovendien hebben veel websites beperkingen op de grootte van reclamebanners.
GIF-afbeeldingen en het web
GIF-afbeeldingen mogen niet worden beschouwd als een universele oplossing. GIF-afbeeldingen hebben een maximum van 256 kleuren, wat betekent dat je serieuze beeld- en kleurdegradatie kunt verwachten als je niet voorzichtig bent. Het GIF-bestandsformaat is in veel opzichten een verouderd formaat dat teruggaat tot de vroegste dagen van het web. Vóór de introductie van het GIF-formaat waren webafbeeldingen zwart en wit en gecomprimeerd met het RLE-formaat. Ze verschenen voor het eerst op de scène in 1987 toen Compuserve het formaat uitbracht als een web imaging-oplossing. Op dat moment was de kleur net op het bureaublad aan het komen en werd internet gebruikt door modems die op de telefoonlijn waren aangesloten. Hierdoor ontstond de behoefte aan een afbeeldingsindeling die afbeeldingen klein genoeg hield om in korte tijd via een telefoonlijn naar een webbrowser te worden afgeleverd.
GIF-afbeeldingen zijn ideaal voor afbeeldingen met scherpe randen met een beperkt kleurenpalet, zoals een logo of lijntekening. Hoewel ze kunnen worden gebruikt voor foto's, introduceert het verkleinde kleurenpalet artefacten in het beeld. Toch hebben de Glitch Art-beweging en de opkomst van de cinemagraph geleid tot een hernieuwde belangstelling voor het GIF-formaat.
Hoe GIF-bestandsgrootte te verminderen voor betere websiteprestaties
Deze tips helpen je om je GIF's zo klein mogelijk te maken.
-
Snijd eventuele extra ruimte rond de afbeelding weg. Het verkleinen van de pixelafmetingen van uw afbeelding is de meest effectieve manier om de bestandsgrootte te verkleinen. Als u Photoshop gebruikt, werkt de opdracht Trim hier goed voor.
-
Wanneer u een GIF-afbeelding voorbereidt, wilt u misschien de uitvoerdimensies verkleinen.
-
Verklein het aantal kleuren in de afbeelding.
-
Voor geanimeerde GIF's, vermindert u het aantal frames in de afbeelding.
-
Als u Photoshop CC 2017 gebruikt, kunt u een GIF-bestand maken met behulp van het menu-item Exporteren als. kiezen het dossier > Exporteren als … en wanneer het menu wordt geopend, selecteert u GIF als de bestandsindeling en vermindert u de fysieke afmetingen (breedte en hoogte) van de afbeelding.
-
Als u Adobe Photoshop Elements 14 gebruikt, selecteert u het dossier > Save For Web. Hiermee wordt het dialoogvenster Opslaan voor web geopend dat ook wordt gevonden in Adobe Photoshop CC 2017, het dossier > Exporteren > Opslaan voor internet (oud). Wanneer deze wordt geopend, kunt u dithering toepassen, de kleur en fysieke afmetingen van de afbeelding verminderen.
-
Vermijd dithering. Dithering kan ervoor zorgen dat sommige afbeeldingen er beter uitzien, maar het vergroot de bestandsgrootte. Als uw software dit toestaat, gebruikt u een lager niveau van dithering om extra bytes te besparen.
-
Sommige software heeft een "lossy" optie voor het opslaan van GIF's. Deze optie kan de bestandsgrootte aanzienlijk verminderen, maar vermindert ook de beeldkwaliteit.
-
Gebruik geen interliniëring. Interliniëring verhoogt meestal de bestandsgrootte.
-
Zowel Photoshop als Photoshop Elements laten u de downloadtijd zien. Besteed er geen aandacht aan. Het is gebaseerd op het gebruik van een 56k-modem. Een meer geldig nummer verschijnt als u een kabelmodem selecteert in het vervolgkeuzemenu.
Tips
- Vermijd nutteloze animaties. Excessieve animaties dragen niet alleen bij aan de downloadtijd van uw webpagina, maar veel gebruikers vinden het ook storend.
- GIF-afbeeldingen met grote blokken effen kleuren en horizontale patronen comprimeren beter dan afbeeldingen met kleurgradaties, zachte schaduwen en verticale patronen.
- Wanneer u kleuren in GIF's verkleint, krijgt u de beste compressie wanneer de nummerkleuren zijn ingesteld op de kleinst mogelijke van deze opties: 2, 4, 8, 16, 32, 64, 128 of 256.
