Obraz na Base64
Zamień obraz w data URI, który możesz wkleić prosto do CSS lub HTML.
- Działa na Twoim urządzeniu — plik nigdy nie jest nigdzie wysyłany
- Bez rejestracji, bez znaków wodnych, bez dziennych limitów
- Za darmo, bez ograniczeń w częstotliwości użycia
Jak to działa
Data URI osadza obraz bezpośrednio w kodzie źródłowym zamiast odwoływać się do osobnego pliku. To usuwa jedno żądanie sieciowe, co ma znaczenie przy maleńkich obrazach, które inaczej kosztowałyby osobny cykl zapytania.
Kiedy się opłaca
Małe ikony, logo i grafiki jednokolorowe. Poniżej około 2 KB zaoszczędzone żądanie zwykle przeważa nad kosztem. Powyżej wygrywa zwykłe odwołanie do pliku.
Kara w rozmiarze
Base64 koduje trzy bajty jako cztery znaki, więc data URI jest o około 33% większy niż plik. Nie można go też osobno buforować — jest pobierany ponownie z każdą kopią arkusza stylów lub strony, która go zawiera.
Gdzie to wkleić
Prosto w url() w CSS albo w atrybut src elementu img. Wynik ma już poprawny prefiks typu multimediów.
Obraz na Base64 — pytania
Dlaczego jest limit rozmiaru?
Identyfikatory data URI należą do kodu źródłowego, a bardzo duże rozdymają każdą stronę, która je zawiera. Limit wynosi 2 MB.
Czy działa z SVG?
SVG to tekst, więc można go osadzić bezpośrednio bez Base64, co jest mniejsze.
Czy mój obraz jest przesyłany?
Nie. Kodowanie odbywa się w przeglądarce.