Optymalizacja tworzonych serwisów internetowych jest niezwykle ważna. Zwiększająca się liczba użytkowników wymusza wprowadzanie mechanizmów, które umożliwią normalne działanie serwisu. Spowoduje ona także, że nie będziemy zużywali w zastraszającym tempie limitów transferu. Dla użytkownika optymalizacja oznacza szybkie działanie serwisu, a więc możliwość korzystania z niego w normalny sposób.Szybkość ładowania naszego serwisu zależy jednak nie tylko od kodu PHP (lub innego języka). Bardzo ważnym elementem, wpływającym na czas pojawienia się strony na ekranie, jest liczba zapytań HTTP. Każdy dodatkowo otwarty dokument CSS, Java Script lub obrazek wydłuża czas oczekiwania.

W tym tekście zamierzam się zająć ostatnim z tych elementów, czyli elementami graficznymi naszego serwisu. Każdy wie, że nie powinno ich być za dużo, oraz  że powinny mieć jak najmniejszy rozmiar. Istnieje także sposób na zmniejszenie liczby odwołań do nich.

Wystarczy w tym celu skorzystać z dobrodziejstw Data URI, czyli możliwości przechowywania obrazka w postaci binarnej, zakodowanej przy pomocy base64,  bezpośrednio w dokumencie CSS.  Dzięki temu zmniejszamy ilość odwołań HTTP, wielkość pliku CSS możemy natomiast zmniejszyć poprzez kompresję. Wystarczy skorzystać z gzipa, dane zapisane w base64 kompresują się bardzo dobrze.

Przykładowy kod dodający obrazek, może wyglądać w następujący sposób:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAA
AAMAgMAAAArG7R0AAAADFBMVEX/////mQD/ZgDMMwAfZILpAAAAJUlEQVQImWNgAALW
0BAGqVWrIVgDiLu0GaQWdUNojdVwOf7/fwACPA009gxCxwAAAABJRU5ErkJggg=="
alt="My image" />

Definicja elementu listy w CSS może natomiatst wyglądać tak:

ul li { margin-left: 20px; background: url(' data:image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAwAA AAMAgMAAAArG7R0AAAADFBMVEX//
///mQD/ZgDMMwAfZILpAAAAJUlEQVQImWNgAALW0BAGqVWrIVgDiLu0GaQWdUNojd
VwOf7/fwACPA009gxCxwAAAABJRU5ErkJggg==') top left no-repeat;}

Aby zakodować obrazek pod systemami linuksowymi, wystarczy skorzystać z polecania base64. Innym sposobem może być skorzystanie z darmowego konwertera.

Jeśli korzystamy z PHP, możemy wygenerować potrzeby kod przy użyciu poniższej funkcji:

<?php
function data_uri($file, $mime)
{
 $contents = file_get_contents($file);
 $base64   = base64_encode($contents);
 return ('data:' . $mime . ';base64,' . $base64);
}
?>

A nastepnie wykorzystać go na naszej stronie:

<img src="<?php echo data_uri('image.png','image/png');?>" alt="My image" />

Niestety, nie ma róży bez kolców. Mimo ogromnych zalet jakie stwarza Data URI, napotkamy na ogromny problem związany z przeglądarkami. IE potrafi wyświetlać zakodowane w ten sposób obrazki od wersji 8, o ile nie przekraczają one 32 KB. Starsze wersje przeglądarki Microsoftu w ogóle nie obsługują tej technologii.

Jeśli jednak optymalizujemy serwis będący pod dużym obciążeniem, warto skorzystać z tego mechanizmu dla użytkowników używających przeglądarek, które go wspierają.