Sådan bruger du værktøjet
- Træk en GIF hen på feltet, klik for at vælge en, eller indsæt et billede.
- Lad Konvertér til stå på Behold originalt format, og lad Maks. bredde stå på Original størrelse for at bevare animationen.
- Tjek den oprindelige og den kodede størrelse; animerede GIF'er bliver hurtigt store.
- Kopiér outputtet som img-tag eller CSS background-image, eller tag data URI'en, rå Base64 eller Markdown-udgaven.
Om GIF-formatet
GIF (Graphics Interchange Format, MIME-type image/gif) stammer fra 1987. Hvert enkeltbillede bruger en palet på højst 256 farver og komprimeres tabsfrit med LZW. Gennemsigtighed er alt eller intet: Én farve i paletten kan markeres som gennemsigtig, men delvis gennemsigtighed findes ikke. En fil kan indeholde mange enkeltbilleder med hver sin forsinkelse og et antal gentagelser, og derfor blev GIF formatet til korte animationer.
Base64-udgaven af en GIF starter med R0lGODlh for den almindelige version GIF89a eller med R0lGODdh for den ældre GIF87a.
Sådan bevarer du animationen
Når du beholder det originale format, koder værktøjet filens bytes, som de er. Data URI'en animerer derfor præcis som filen, uanset om du bruger den i et <img>-tag eller som CSS-baggrund.
Konvertering til PNG, JPEG eller WebP eller valg af en Maks. bredde tegner billedet igen i browseren, og kun det første enkeltbillede overlever. Det er nyttigt, når du vil have et stillbillede af en animation som forhåndsvisning, men lad begge indstillinger være slået fra, hvis du vil have den animerede udgave.
Hvor GIF-data URI'er stadig giver mening
- Små indlæsningsspinnere og animerede statusikoner i CSS.
- Den klassiske gennemsigtige pixel på 1x1, der bruges som pladsholder i
src. Den fylder kun nogle få dusin bytes og langt under 100 tegn i Base64. - Enkle stregtegninger med få farver, hvor GIF er kompakt.
Store animationer passer dårligt. En reaktions-GIF på 2 MB bliver til ca. 2,7 MB tekst, der ikke kan caches for sig; en hostet videofil eller en animeret WebP 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 stillede spørgsmål
Er min GIF stadig animeret efter Base64-kodning?
Ja, så længe du beholder det originale format og ikke skalerer billedet. Base64 gemmer hele filen, inklusive alle enkeltbilleder og indstillingen for gentagelse.
Hvorfor holdt min GIF op med at bevæge sig efter konvertering?
Konvertering til PNG, JPEG eller WebP eller skalering gengiver billedet igen ud fra det første enkeltbillede. Værktøjet kan ikke lave animerede PNG- eller WebP-filer, så behold den originale GIF, hvis bevægelsen skal bevares.