Slik bruker du verktøyet
- Slipp en GIF i slippfeltet, klikk for å velge en, eller lim inn et bilde.
- Velg Behold originalformat og la Maks. bredde stå på Opprinnelig størrelse for å bevare animasjonen.
- Sjekk den opprinnelige og den kodede størrelsen; animerte GIF-er vokser raskt.
- Kopier img-taggen eller CSS background-image, eller ta data URI-en, ren Base64 eller Markdown-versjonen.
Om GIF-formatet
GIF (Graphics Interchange Format, MIME-type image/gif) stammer fra 1987. Hver ramme bruker en palett på maksimalt 256 farger, komprimert tapsfritt med LZW. Gjennomsiktighet er alt eller ingenting: én oppføring i paletten kan merkes som gjennomsiktig, men delvis gjennomsiktighet finnes ikke. En fil kan inneholde mange rammer med individuelle forsinkelser og et antall gjentakelser, og det er derfor GIF ble formatet for korte animasjoner.
Base64 for en GIF begynner med R0lGODlh for den vanlige versjonen GIF89a, eller R0lGODdh for den eldre GIF87a.
Slik beholder du animasjonen
Når du beholder originalformatet, koder verktøyet filbytene som de er. Data URI-en animeres derfor nøyaktig som filen, enten du bruker den i en <img>-tagg eller som CSS-bakgrunn.
Konvertering til PNG, JPEG eller WebP, eller en angitt maksimal bredde, tegner bildet på nytt i nettleseren, og bare den første rammen overlever. Det er nyttig når du vil ha et stillbilde av en animasjon, men for den animerte versjonen lar du begge alternativene være av.
Når GIF-data URI-er fortsatt gir mening
- Små lasteindikatorer og animerte statusikoner i CSS.
- Den klassiske gjennomsiktige pikselen på 1x1, brukt som plassholder i
src. Den tar bare noen titalls byte og godt under 100 Base64-tegn. - Enkel strektegning med få farger, der GIF er kompakt.
Store animasjoner passer dårlig. En reaksjons-GIF på 2 MB blir omtrent 2,7 MB tekst som ikke kan hurtigbufres separat; en video eller animert WebP på en server er langt lettere.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Ofte stilte spørsmål
Er GIF-en min fortsatt animert etter Base64-koding?
Ja, så lenge du beholder originalformatet og ikke endrer størrelsen. Base64 lagrer hele filen, inkludert alle rammer og loop-innstillingen.
Hvorfor sluttet GIF-en min å bevege seg etter konvertering?
Konvertering til PNG, JPEG eller WebP, eller endring av størrelse, gjengir bildet på nytt ut fra den første rammen. Verktøyet kan ikke lage animerte PNG- eller WebP-filer, så behold den opprinnelige GIF-en for å beholde bevegelsen.