Obraz jako Base64 — kiedy ma sens

Data URI

<img src="data:image/png;base64,iVBOR..." alt="">

Obraz jest zapisany bezpośrednio w kodzie. Kod przygotujesz w konwerterze obrazu na Base64. Sama metoda jest opisana w poradniku co to jest Base64, a tekst zakodujesz w narzędziu Base64.

Kiedy tak

• Bardzo małe ikony.
• Dokument HTML w jednym pliku.
• Prototypy.

Kiedy nie

Zdjęcia po zakodowaniu rosną o około jedną trzecią i obciążają HTML. Zmniejsz je w kompresji zdjęć i wstaw jako plik, według poradnika jak zmniejszyć zdjęcie.

Przykład w CSS

.ikona { background: url("data:image/svg+xml;base64,PHN2Zy...") no-repeat; }

Małe ikony SVG często lepiej wstawić jako zwykły tekst SVG lub osobny plik, bo Base64 dodaje narzut. Do kodu warto przenosić tylko niewielkie grafiki, które nie zmieniają się często.

Wpływ na szybkość

Przeglądarka nie może osobno zapisać obrazu z Base64 w pamięci podręcznej. Duży obraz w CSS spowalnia wczytywanie całego arkusza, który blokuje renderowanie strony. Osobny plik można natomiast leniwie wczytać, skompresować i udostępnić przez CDN.

E-maile

Klienci poczty różnie obsługują obrazy osadzone jako data URI. Wiele z nich je blokuje. W e-mailach lepiej działają załączniki inline lub obrazy hostowane na serwerze. Zawsze wysyłaj wiadomość testową na kilka skrzynek.

Prywatność

Zakodowanie nie jest szyfrowaniem. Każdy może odkodować obraz. Nie wstawiaj w ten sposób danych poufnych z założeniem, że są ukryte.