O ile szybsze jest korzystanie z obrazów w formacie inline/base64 dla witryny internetowej niż po prostu połączenie z twardym plikiem?

Question

O ile szybsze jest użycie base64/linii do wyświetlania obrazów, a nie po prostu połączenie z twardym plikiem na serwerze?

url(data:image/png;base64,.......) 

Nie udało mi się znaleźć żadnego rodzaju danych dotyczących wydajności.

mam kilka problemów:

• Już nie zyskać korzyści z buforowania
• nie jest base64 DUŻO większe rozmiary niż to, co PNG/JPEG rozmiar pliku?

Zdefiniujmy „szybciej”, jak w: czas potrzebny dla użytkownika, aby zobaczyć pełną renderowane HTML strony internetowej

Answer 1

Już nie uzyskać korzyści z buforowania

Niezależnie od tego, czy sprawy będą się różnić w zależności od tego, ile zależy od buforowania.

Czy nie jest base64 DUŻO większy niż rozmiar pliku PNG/JPEG?

Algorytm formatowania pliku/kompresji obrazu jest taki sam, rozumiem, że jest to plik PNG.

Przy użyciu Base-64 każdy 8-bitowy znak reprezentuje 6 bitów: dlatego dane binarne są dekompresowane w stosunku 8 do 6, tj. Tylko około 35%.

Answer 2

Jak dużo szybciej jest

Zdefiniuj 'szybciej'. Masz na myśli wydajność HTTP (patrz poniżej) lub wydajność renderowania?

Już nie uzyskać korzyści z buforowania

Właściwie, jeśli robisz to w pliku CSS będzie nadal być buforowane. Oczywiście wszelkie zmiany w CSS spowodują unieważnienie pamięci podręcznej.

W niektórych sytuacjach może to zostać wykorzystane jako znaczny wzrost wydajności w stosunku do wielu połączeń HTTP. Mówię o pewnych sytuacjach, ponieważ w większości przypadków możesz skorzystać z technik takich jak sprite'y obrazkowe, ale zawsze dobrze jest mieć inne narzędzie w swoim arsenale!

Answer 3

„Faster” to ciężko coś odpowiedzieć, ponieważ istnieje wiele możliwych interpretacji i sytuacje:

kodowania Base64 poszerzy obraz o jedną trzecią, co zwiększy wykorzystanie pasma. Z drugiej strony włączenie go do pliku spowoduje usunięcie kolejnej podróży GET do serwera. Tak więc, rura o dużej przepustowości, ale o słabym opóźnieniu (takim jak połączenie internetowe z satelitą), prawdopodobnie załaduje stronę z obrazami z wstawkami szybciej niż w przypadku używania różnych plików graficznych. Nawet na mojej (wiejskiej, powolnej) linii DSL strony, które wymagają wielu podróży w obie strony, ładują się o wiele dłużej niż te, które są stosunkowo duże, ale wymagają tylko kilku GETów.

Jeśli wykonasz kodowanie base64 z plików źródłowych przy każdym żądaniu, zużyjesz więcej procesora, pobijesz pamięć podręczną danych itd., Co może zaszkodzić czasowi reakcji serwerów. (Oczywiście zawsze możesz użyć memcached lub takich, aby rozwiązać ten problem).

Takie postępowanie będzie oczywiście zapobiegać większości form buforowania, które mogą bardzo zaszkodzić, jeśli obraz jest często oglądany - powiedzmy, logo wyświetlane na każdej stronie, które normalnie może być buforowane przez przeglądarkę (lub serwer proxy) cache jak kalmary lub cokolwiek innego) i wymagane raz w miesiącu. Zapobiegnie to także wielu optymalizacjom serwerów sieciowych do wyświetlania plików statycznych za pomocą interfejsów API jądra, takich jak sendfile (2).

Zasadniczo zrobienie tego pomoże w pewnych sytuacjach i boli innych. Musisz określić, które sytuacje są dla ciebie ważne, zanim naprawdę się zorientujesz, czy jest to dla ciebie opłacalna sztuczka.

Answer 4

Dokonałem porównania dwóch stron HTML zawierających 1800 jednopikselowych obrazów.

Pierwsza strona deklaruje obrazów inline:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"> 

W drugim, obrazy odniesienia zewnętrznego pliku:

<img src="img/one-gray-px.png"> 

Okazało się, że podczas ładowania wielokrotnie ten sam obraz, jeśli to jest zadeklarowana inline, przeglądarka wykonuje wniosek o każdym obrazie (przypuszczam, że Base64 dekoduje go raz na obraz), natomiast w drugim scenariuszu, obraz jest wymagane raz na dokumencie (patrz obraz porównawczy poniżej).

Dokument z wbudowanymi obrazami ładuje się w około 250 ms, a dokument z połączonymi obrazami wykonuje go w ciągu 30 ms.

(Testowane z Chromium 34)

Scenariusz dokumentu HTML z wielu wystąpień tego samego obrazu inline nie ma sensu a priori. Jednak odkryłem, że wtyczka jquery lazyload definiuje domyślnie symbol zastępczy dla wszystkich "leniwych" obrazów, dla których atrybut src zostanie do niego przypisany. Następnie, jeśli dokument zawiera dużo leniwych obrazów, może się zdarzyć sytuacja taka jak opisana powyżej.