Image Optimizer – osadzanie obrazów jako base64

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:

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:

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:

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

Promuj

10 Responses

  1. Pingback: dotnetomaniak.pl
  2. Łukasz Gąsior 17 stycznia 2011 / 10:05

    @Maciej Aniserowicz: ale tylko częściowo. Podczas moich testów niektóre obrazy się nie wyświetlały na IE – na pozostałych przeglądarkach działały bez problemu.

  3. mr-owl 17 stycznia 2011 / 13:44

    Witam,

    A nie lepiej zrobić to jak jest na stronie Amazon, za pomocą CSS-a pozycjonuje się fragment z dużęgo pliku… więc masz tylko jeden plik graficzny do pobrania.

    Pozdrawiam,

    mr-owl

  4. Łukasz Gąsior 17 stycznia 2011 / 14:01

    @mr-owl: można – ale to chciałem opisać w jednym z kolejnych postów.

  5. Łukasz 18 stycznia 2011 / 00:09

    No to czekam na kolejne posty o optymalizacji ! :)

  6. Adam 19 stycznia 2011 / 02:19

    Jeśli chodzi o tła – lepiej użyć CSS Sprites. W pozycjonowaniu tła obrazka, świetnie pomaga http://www.spritebox.net. Co do szybkości ładowania obrazków, można użyć Amazon S3 albo innego CDN.

  7. Maciej Aniserowicz 19 stycznia 2011 / 07:57

    @Łukasz Gąsior:
    W IE8 istnieje ograniczenie rozmiaru takiego obrazu do chyba 32kB (w v9 już tego nie ma)

  8. Łukasz Gąsior 19 stycznia 2011 / 08:11

    @Adam – o tym napiszę niedługo :)

  9. Abigail_paige 13 lipca 2012 / 16:47

    No to czekam na kolejne posty o optymalizacji ! :)

Comments are closed.