Co to jest Base64 i kiedy należy go używać do osadzania obrazów?

Jeśli poświęciłeś trochę czasu na tworzenie nowoczesnych stron internetowych, prawdopodobnie natknąłeś się na pozornie nieskończony, chaotyczny ciąg znaków zaczynający się od data:image/png;base64,, po którym następuje czysty bełkot. To jest obraz zakodowany w Base64.

Czym dokładnie jest kodowanie Base64?

U podstaw Base64 leży schemat kodowania binarnego na tekst. Pobiera dane binarne (takie jak obraz, plik audio lub skompilowany dokument) i tłumaczy je na format ciągu ASCII. Nazwa „Base64” wynika z faktu, że do reprezentowania danych używany jest alfabet składający się z 64 znaków (A-Z, a-z, 0-9, + i /).

Ta konwersja jest niezwykle przydatna, ponieważ wiele protokołów internetowych (takich jak HTTP, HTML i CSS) zaprojektowano specjalnie do bezpiecznej obsługi zwykłego tekstu. Konwertując dane binarne na tekst, gwarantujemy, że dane mogą być przesyłane za pośrednictwem tych protokołów bez uszkodzenia.

Kiedy należy osadzać obrazy za pomocą Base64?

Osadzanie ciągów Base64 bezpośrednio w kodzie HTML („<img src="data:image...">`) lub CSS („background-image: url("data:image...")`) zamiast używania standardowego adresu URL może przynieść znaczne korzyści, ale tylko w bardzo specyficznych przypadkach użycia:

• Mikroikony i pokrętła: jeśli masz małe elementy interfejsu użytkownika (takie jak pokrętło ładujące o wielkości 1 KB lub znacznik wyboru), zakodowanie ich w formacie Base64 eliminuje potrzebę wykonywania przez przeglądarkę osobnego żądania HTTP w celu pobrania pliku obrazu. Przyspiesza to renderowanie krytycznego interfejsu użytkownika.
• E-maile HTML: wielu klientów poczty e-mail blokuje ładowanie obrazów zewnętrznych ze względu na prywatność. Osadzanie logo bezpośrednio w kodzie HTML za pomocą Base64 może ominąć te blokady, zapewniając doskonały wygląd wiadomości e-mail.
• Jednoplikowe aplikacje internetowe: jeśli tworzysz narzędzie, które ma być dystrybuowane w postaci pojedynczego pliku `.html` i który działa całkowicie w trybie offline, osadzenie wszystkich zasobów za pośrednictwem Base64 to jedyny sposób na jego prawidłowe spakowanie.

Kiedy należy UNIKAĆ Base64?

Największą wadą kodowania Base64 jest to, że zwiększa ono rozmiar pliku zasobu o około 33%. Obraz o rozmiarze 1 MB stanie się ciągiem tekstowym o rozmiarze 1,33 MB.

Co więcej, przeglądarki nie mogą niezależnie buforować ciągu Base64. Jeśli osadzisz ogromny ciąg znaków Base64 w swoim pliku CSS, przeglądarka będzie musiała pobierać ten ogromny plik CSS przy każdym ładowaniu strony, a analizowanie ogromnych ciągów tekstowych blokuje główny wątek, powodując poważne opóźnienia (słaby czas do interakcji).

Złota zasada: nigdy nie koduj dużych zdjęć ani obrazów bohaterów w Base64. Koduj tylko małe ikony SVG lub mikroskopijne pliki rastrowe, w przypadku których obciążenie żądania HTTP jest większe niż kara wynosząca 33% rozmiaru pliku.