Wyniki badań deweloperów Yahoo! pokazały, że pobieranie samego kodu HTML odpowiada za jakieś 20% czasu wczytywania się strony. Reszta to wczytywanie skryptów, arkuszy stylów i wywoływanych przez nich obrazków. O tym jak efektywnie wykorzystywać pliki graficzne za pomocą tzw. CSS Sprites pisaliśmy tutaj. Tym razem wyjaśnimy, jak umieścić same obrazki wewnątrz plików CSS.

Czym jest Data URI?

Wewnątrz plików CSS możemy umieszczać grafiki, zakodowane za pomocą tzw. Data URI. Jest to forma zapisu danych binarnych jako ciągów znaków zakodowanych w formacie Base64. Pozwala ono zapisać ciąg bajtów jako ciąg znaków, dzieląc go na grupy po trzy bajty (24 bity). Każda taka grupa zostaje podzielona na cztery jednostki 6-bitowe. Istnieją zatem 64 możliwe wartości dla każdej takiej jednostki. Każda taka wartość zostaje zapisana znakiem będącym cyfrą systemu liczbowego o podstawie 64. (Na przykład 010 odpowiada A64 a 6310 /64).

Podstawowy format zapisu Data URI został wyszczególniony w dokumencie RFC 2397. Wygląda on następująco:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

gdzie

data to protokół URI,
mime type to rodzaj danych, domyślnie ustawiany na text/plain, np. w wypadku obrazków JPG musi być określony jako image/jpeg,
charset to kodowanie znaków w tekście, dla nas nieistotne,
base64 oznacza, że stosujemy kodowanie base64 (w przeciwnym wypadku dane zostaną potraktowane jako zapisane w normalnym kodowaniu URL-i,
zaś encoded data to oczywiście ciąg naszych danych, składający się ze znaków alfanumerycznych oraz '+' i '/'.

Załóżmy teraz, że zdefiniowaliśmy w arkuszu stylów obrazek:

.obrazek { backgroud: url(pics/obrazek.jpg); }

W ten sposób ładujemy jednak grafikę uruchamiając kolejne zapytanie HTTP. Dzięki DataURI nasz obrazek można zapisać następująco (dla wygody Czytelników mocno skróciliśmy blok base64):

.obrazek { background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCACwAUADASIAAhEBAxEB/8QAHQAAAgIDAQEBAAAAAAAAAAAABAUCAwEGBwAICf/EA
FFWyn0zgmhZJcqMeKKgmUwBeM+9NxtmU6JqQTg+KvicHt9qCdlUZXuaJtWGQO580GPE/9k=);
}

Na pierwszy rzut oka taki sposób zapisu przytłacza – jednak w praktyce jest znacznie efektywniejszy. Umieszczony w arkuszu stylów obrazek eliminuje potrzebę dodatkowego zapytania. W wypadku jednego obrazka problem nie jest duży, ale jeśli nasza strona korzysta z dziesiątków obrazków, oszczędność jest niebagatelna. Dodatkowo możemy taki arkusz stylów skompresować za pomocą gzipa – poleceniem gzip -c style.css. Dane zapisane w base64 bardzo dobrze się w ten sposób kompresują.