Obraz do Base64

Koduj obrazy jako data URI Base64

Data URI Base64 zamienia obraz w zwykły ciąg tekstowy, który możesz wkleić bezpośrednio do kodu HTML lub CSS. Przeglądarka dekoduje go w locie, więc obraz wyświetla się bez osobnego żądania pliku — to wygodne w przypadku maleńkich ikon, szablonów e-mail i samodzielnych stron w jednym pliku.

Narzędzie odczytuje plik lokalnie i zwraca pełny adres data: URI, a także gotowe fragmenty <img> oraz CSS background-image, które skopiujesz jednym kliknięciem. Nic nie jest przesyłane — kodowanie odbywa się w całości w Twojej przeglądarce.

Kiedy osadzać, a kiedy nie

Osadzanie eliminuje jedno żądanie HTTP, co może przyspieszyć małe, krytyczne obrazy. Jednak Base64 jest mniej więcej o 33% większy niż plik binarny i nie można go osobno buforować, więc unikaj go w przypadku dużych zdjęć lub obrazów używanych na wielu stronach. Zasada praktyczna: osadzaj ikony o rozmiarze kilku kilobajtów, a większe obrazy zostaw jako zwykłe pliki.

Jak używać wyniku

Data URI zachowuje oryginalny typ pliku, na przykład data:image/png;base64, z następującymi po nim zakodowanymi bajtami, a wiersz stanu pokazuje, ile kilobajtów tekstu powstało. Skorzystaj z trzech przycisków kopiowania zależnie od miejsca użycia: czysty URI dla wartości src lub href, znacznik <img> dla HTML (potem dodaj sensowny tekst alt) albo wiersz CSS dla arkusza stylów.

Praktyczne zastrzeżenia

• Długi ciąg Base64 powiększa plik HTML lub CSS i spowalnia jego odczyt, a przy każdej stronie, która go zawiera, jest pobierany od nowa. Gzip lub Brotli odzyskują część narzutu, ale dane obrazu są już skompresowane, więc oszczędność jest ograniczona.
• Jeśli Twoja witryna używa Content Security Policy, dyrektywa img-src musi zezwalać na adresy data:.
• Wielu klientów poczty blokuje lub usuwa data URI, więc przetestuj je, zanim zaczniesz na nich polegać w newsletterach.
• Najpierw skompresuj lub zmniejsz obraz; mniejszy plik źródłowy daje znacznie krótszy ciąg.

Dobre kandydatury do osadzenia

Małe ikony, maleńkie obrazy zastępcze, animacje ładowania, proste logo i obrazy w demach HTML w jednym pliku sprawdzają się najlepiej. Zdjęcia, duże banery i każdy obraz wyświetlany na wielu stronach lepiej udostępniać jako osobne pliki, aby przeglądarka mogła je buforować. Kodowanie odbywa się w Twojej przeglądarce, a skopiowany tekst nie opuszcza urządzenia, dopóki sam go gdzieś nie wkleisz.