Jakiś czas temu opisywałem nowy plugin do Visual Studio 2010 – Image Optimizer. Wspomniałem w nim, że ułatwia on osadzanie obrazów jako string base64 i dzisiaj chciałbym ten temat rozwinąć.

Standardowo chcąc wyświetlić obraz na stronie www musimy podać jego adres:

url('images/img01.jpg')

Każdy obraz pobierany jest osobnym zapytaniem do serwera, czyli przeglądarka pobiera kod HTML strony, następnie plik CSS (oraz pliki javascript) i wszystkie podane obrazy. Pobieranie „wszystkiego” w osobnych zapytaniach nie byłoby niczym złym gdyby nie to, że z każdym zapytaniem tracimy sporo czasu na nawiązanie połączenia z serwerem.

Na szczęście istnieje możliwość osadzenia obrazów w kodzie strony HTML lub pliku CSS, dzięki czemu całość pobierana jest tylko raz.

Aby to zrobić musimy najpierw przekonwertować obraz to formatu base64. Jeżeli korzystamy z Image Optimizera wystarczy kliknąć prawym przyciskiem myszy na obrazku i wybrać „Extract data URI to clipboard”.

Spowoduje to wygenerowanie kodu:

url('data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD//f8fz7OB2mN2TAx//Z')

który wystarczy umieścić w kodzie HTML lub CSS.

Stosując tę technikę minimalizujemy ilość zapytań do serwera, ale niestety zwiększamy ilość danych przesyłanych do przeglądarki (base64 jest większy niż sam obrazek). Dlatego osadzanie obrazów jako base64 najlepiej sprawdza się w przypadku małych grafik lub wyświetlanych po najechaniu myszką na jakiś element (ponieważ grafika nie musi być pobierana z serwera).

Dodatkowo, żeby życie webdevelopera nie było zbyt proste, technika ta nie jest wspierana przez IE co wymaga przygotowania osobnych plików CSS zawierających standardowe linki do obrazów:

<!--[if (IE)]>
<link href="styleie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Ciekaw jestem, jaka jest Wasza opinia o tej technice? Stosujecie ją w swoich projektach?