Kodowanie plików binarnych do base64

Gdy chcesz na swojej stronie, w pliku CSS umieścić dużą liczbę małych obrazków (lub innych ), zakoduj je w , następnie gotowy kod wklej do arkusza stylów; powstanie wtedy jeden duży plik, bez negatywnego rozdrobnienia na wiele mniejszych. Dlaczego? Każdy element pobierany podczas wczytywania oznacza sekwencję:

  1. Połączenie z serwerem
  2. Wysłanie żądania HTTP
  3. Czekanie na odpowiedź
  4. Pobieranie pliku

Nawet, jeśli łącze internetowe lub przeglądarka potrafią nawiązać wiele połączeń równocześnie lub stosować potokowanie, zmniejszenie ilości elementów na stronie sprowadza się do jednego: mniejsza ilość czasu potrzebna na pełne załadowanie strony.

W skrócie polega to na tym, że twoja przeglądarka musi najpierw porozumieć się z serwerem, który udostępnia pliki (strony .html, pliki .css, graficzne i inne). Posiadając mało plików, czas odpowiedzi serwera na żądanie przesyłania jest mało ważny. Jednak ze wzrostem ich ilości problem staje się większy.

Era modemów skończyła się. Łącza szerokopasmowe są w prawie każdym domu. Wielkość pobieranych danych nie ma aż takiego znaczenia (chociaż warto kompresować grafikę, włączyć kompresję GZIP na serwerze itp.), jednak ich ilość ma wpływ na szybkość wyświetlenia witryny. Skutkiem umieszczania teł, kropek, cieni w osobnych plikach są czasami kilku sekundowe opóźnienia.

Plusem stosowania omawianego kodowania jest również zupełny inne wygląd renderowania strony. Mianowicie przy wczytywaniu strony najpierw ładowany jest kod html, później arkusz stylów i osobne pliki w nim zawarte. Gdy posiadasz wszystkie obrazki w pliku CSS, jakby „wskoczą” one od razu, bez kolejnego doczytywania ich przez przegladarkę.

Jak to wygląda w praktyce

Przy kodowaniu dane powiększają swój rozmiar o 33%.

Możesz przypatrzeć się źródle strony startowej przeglądarki Google Chrome — tam, base64 umieszczone jest wszędzie.

  1. Przygotuj obrazki.
  2. Wejdź na stronę generatora base64 (lub innego).
  3. Koniecznie zaznacz „base64”, wybierz plik z dysku, wciśnij „Generate”
  4. Wygeneruje Ci kod albo w pasku adresu przeglądarki, albo w formie odsyłacza.
  5. Skopiuj ten kod do źródła strony:
W pliku CSS będzie to
body {background: #fff url(data:image/png;base64,[…]);}
W pliku HTML będzie to
<img src="data:image/png;base64,[…]"/>

gdzie data:image/png;base64,[…] to wygenerowany kod.

base64 nie jest obsługiwane przez IE6 i IE7!

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

Zmodyfikowano: 03.02.2012, 09:02
submit