Zo gebruik je het
- Sleep een GIF naar het sleepvak, klik om er een te kiezen of plak een afbeelding.
- Laat Origineel behouden geselecteerd en Max. breedte leeg, zodat de animatie intact blijft.
- Controleer de originele en de gecodeerde grootte; geanimeerde GIF's worden snel groot.
- Kopieer de img-tag of de uitvoer voor CSS background-image, of neem de data-URI, kale Base64 of Markdown-versie.
Over het GIF-formaat
GIF (Graphics Interchange Format, MIME-type image/gif) stamt uit 1987. Elk frame gebruikt een palet van maximaal 256 kleuren, verliesvrij gecomprimeerd met LZW. Transparantie is alles of niets: één paletkleur kan als transparant worden gemarkeerd, maar gedeeltelijke doorzichtigheid bestaat niet. Een bestand kan veel frames bevatten, elk met een eigen vertraging, plus een aantal herhalingen, en daarom werd GIF hét formaat voor korte animaties.
De Base64 van een GIF begint met R0lGODlh voor de gangbare versie GIF89a, of met R0lGODdh voor de oudere GIF87a.
De animatie behouden
Als je het originele formaat behoudt, codeert de tool de bytes van het bestand zoals ze zijn. De data-URI animeert daardoor precies zoals het bestand, of je hem nu in een <img>-tag gebruikt of als CSS-achtergrond.
Converteren naar PNG, JPEG of WebP, of een Max. breedte instellen, tekent de afbeelding opnieuw in de browser, en dan blijft alleen het eerste frame over. Dat is handig als je een stilstaand voorbeeld van een animatie wilt, maar laat voor de geanimeerde versie beide opties uit.
Waar GIF-data-URI's nog zinvol zijn
- Kleine laadspinners en geanimeerde statuspictogrammen in CSS.
- De klassieke transparante pixel van 1x1, gebruikt als placeholder voor
src. Die neemt maar enkele tientallen bytes in beslag en ruim minder dan 100 Base64-tekens. - Eenvoudige lijntekeningen met weinig kleuren, waarvoor GIF compact is.
Grote animaties passen er slecht bij. Een reactie-GIF van 2 MB wordt ongeveer 2,7 MB tekst die niet apart kan worden gecachet; een gehost videobestand of een geanimeerde WebP is veel lichter.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Veelgestelde vragen
Is mijn GIF na Base64-codering nog geanimeerd?
Ja, zolang je het originele formaat behoudt en de afbeelding niet verkleint. Base64 bevat het volledige bestand, inclusief alle frames en de herhaalinstelling.
Waarom beweegt mijn GIF niet meer na conversie?
Converteren naar PNG, JPEG of WebP, of verkleinen, geeft de afbeelding opnieuw weer vanaf het eerste frame. De tool kan geen geanimeerde PNG- of WebP-bestanden maken, dus behoud de originele GIF als je de beweging wilt houden.