Så använder du verktyget
- Släpp en GIF på släppytan, klicka för att välja en fil eller klistra in en bild.
- Låt Behåll original vara valt och låt Maxbredd stå på Originalstorlek för att bevara animationen.
- Kontrollera originalstorleken och den kodade storleken; animerade GIF-bilder växer snabbt.
- Kopiera img-taggen eller CSS background-image, eller ta data URI, rå Base64 eller Markdown-versionen.
Om GIF-formatet
GIF (Graphics Interchange Format, MIME-typ image/gif) kom 1987. Varje bildruta använder en palett med högst 256 färger som komprimeras förlustfritt med LZW. Transparensen är allt eller inget: en färg i paletten kan markeras som transparent, men delvis genomskinlighet finns inte. En fil kan innehålla många bildrutor med individuella fördröjningar och ett antal upprepningar, vilket är anledningen till att GIF blev formatet för korta animationer.
Base64 för en GIF börjar med R0lGODlh för den vanliga versionen GIF89a, eller med R0lGODdh för den äldre GIF87a.
Behåll animationen
När du behåller originalformatet kodar verktyget filens byte precis som de är. Data URI:n animeras därför exakt som filen, oavsett om du använder den i en <img>-tagg eller som CSS-bakgrund.
Konvertering till PNG, JPEG eller WebP, eller en angiven Maxbredd, ritar om bilden i webbläsaren, och bara den första bildrutan finns kvar. Det är praktiskt när du vill ha en stillbild av en animation som förhandsvisning, men för den animerade versionen ska båda alternativen vara avstängda.
När GIF som data URI fortfarande är vettigt
- Små laddningsindikatorer och animerade statusikoner i CSS.
- Den klassiska transparenta pixeln på 1x1 som används som platshållare i
src. Den tar bara några dussin byte och långt under 100 tecken i Base64. - Enkla linjeteckningar med få färger, där GIF är kompakt.
Stora animationer passar dåligt. En reaktions-GIF på 2 MB blir ungefär 2,7 MB text som inte kan cachas separat; en videofil på en server eller en animerad WebP är betydligt lättare.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Vanliga frågor
Är min GIF fortfarande animerad efter Base64-kodningen?
Ja, så länge du behåller originalformatet och inte ändrar storleken. Base64 lagrar hela filen, inklusive alla bildrutor och upprepningsinställningen.
Varför slutade min GIF att röra sig efter konverteringen?
Konvertering till PNG, JPEG eller WebP, eller storleksändring, renderar om bilden utifrån den första bildrutan. Verktyget kan inte skapa animerade PNG- eller WebP-filer, så behåll den ursprungliga GIF-filen om du vill behålla rörelsen.