Jak używać
- Przeciągnij plik GIF na pole upuszczania, kliknij, aby go wybrać, lub wklej obraz.
- Aby zachować animację, pozostaw opcję „Zachowaj oryginał”, a w polu „Maks. szerokość” wartość „Oryginalny rozmiar”.
- Sprawdź rozmiar oryginalny i rozmiar po zakodowaniu – animowane GIF-y szybko się rozrastają.
- Skopiuj znacznik img lub CSS background-image albo wybierz data URI, czysty Base64 lub wersję Markdown.
Format GIF
GIF (Graphics Interchange Format, typ MIME image/gif) powstał w 1987 roku. Każda klatka korzysta z palety liczącej najwyżej 256 kolorów i jest kompresowana bezstratnie algorytmem LZW. Przezroczystość działa na zasadzie „wszystko albo nic”: jeden wpis palety można oznaczyć jako przezroczysty, ale częściowa przezroczystość nie istnieje. Plik może zawierać wiele klatek z indywidualnymi opóźnieniami i liczbą powtórzeń, dlatego GIF stał się formatem krótkich animacji.
Base64 pliku GIF zaczyna się od R0lGODlh w przypadku popularnej wersji GIF89a lub od R0lGODdh w przypadku starszej GIF87a.
Zachowanie animacji
Gdy oryginalny format zostaje zachowany, narzędzie koduje bajty pliku w niezmienionej postaci. Data URI animuje się więc dokładnie tak jak plik, niezależnie od tego, czy zostanie użyty w znaczniku <img>, czy jako tło CSS.
Konwersja na PNG, JPEG lub WebP albo ustawienie maksymalnej szerokości powoduje ponowne narysowanie obrazu w przeglądarce i zostaje tylko pierwsza klatka. Przydaje się to, gdy potrzebny jest nieruchomy podgląd animacji, ale aby uzyskać wersję animowaną, wyłącz obie opcje.
Kiedy data URI z GIF nadal ma sens
- Małe wskaźniki ładowania i animowane ikony stanu w CSS.
- Klasyczny przezroczysty piksel 1x1 używany jako zastępczy
src. Zajmuje zaledwie kilkadziesiąt bajtów i znacznie mniej niż 100 znaków Base64. - Prosta grafika liniowa z niewielką liczbą kolorów, w której GIF jest kompaktowy.
Duże animacje się do tego nie nadają. GIF-reakcja o rozmiarze 2 MB zamienia się w około 2,7 MB tekstu, którego nie da się buforować osobno; plik wideo hostowany na serwerze lub animowany WebP jest znacznie lżejszy.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Najczęściej zadawane pytania
Czy GIF nadal będzie animowany po zakodowaniu w Base64?
Tak, o ile oryginalny format zostanie zachowany, a rozmiar obrazu się nie zmieni. Base64 przechowuje cały plik, w tym wszystkie klatki i ustawienie zapętlenia.
Dlaczego GIF przestał się ruszać po konwersji?
Konwersja na PNG, JPEG lub WebP albo zmiana rozmiaru renderuje obraz ponownie na podstawie pierwszej klatki. Narzędzie nie potrafi tworzyć animowanych plików PNG ani WebP, więc aby zachować ruch, pozostaw oryginalny GIF.