Jaki jest efekt kodowania obrazu w standardzie base64?

97

Jeśli przekonwertuję obraz (jpg lub png) na base64, to czy będzie większy, czy będzie miał ten sam rozmiar? O ile to będzie większe?

Czy jest zalecane używanie na mojej stronie obrazów zakodowanych w base64?

Danny Fox
źródło
1
Jedyny przypadek, w którym chciałbyś coś takiego zrobić, to gdybyś był ograniczony do zasobów zwykłego tekstu iz jakiegoś powodu nie mógłbyś użyć surowego formatu obrazu.
Wug,
Tutaj jest dobra odpowiedź: stackoverflow.com/questions/1533113/…
Steed
base64 uniemożliwia głębokie linki. To może być plus.
damoeb,
@Wug - wiedz, że to daleka spóźniona odpowiedź i że rzeczy się zmieniły, ale na pewno są to czasy, w których możesz osiągnąć wzrost wydajności, wysyłając bas64. Wysyłanie wiadomości przez gniazda sieciowe z obrazami zakodowanymi w standardzie base64 (małe) byłoby bardziej wydajne niż żądanie każdego obrazu osobno.
Philip
To dobre pytanie. Szukałem dobrej odpowiedzi na pytanie „zapisywać obrazy binarne czy zakodowane w formacie base64?” i znalazłem kilka dobrych odpowiedzi, takich jak ta
moreirapontocom

Odpowiedzi:

132

Będzie o około 37% większy:

Z grubsza, ostateczny rozmiar danych binarnych zakodowanych w formacie Base64 jest równy 1,37-krotności pierwotnego rozmiaru danych

Źródło: http://en.wikipedia.org/wiki/Base64

Mikser
źródło
28
Nie, nie 137% większe, 137% oryginalnego rozmiaru :-) 37% większe (według źródła).
Eric J.,
4
Powiedziałbym, że to prawie 4/3 oryginalnego rozmiaru.
kiwixz
Czy są jakieś ograniczenia dotyczące rozmiaru obrazu, aby przekonwertować obraz na base64?
151291
2
@Blender Ale w moim przypadku, kiedy konwertuję bitmapę 70kb na string, staje się ona 500kb, to nie jest 37% Skompresowałem obraz 5mb do 70kb, a następnie konwertuję ten skompresowany obraz na ciąg, który staje się 500kb
KJEjava48
@ KJEjava48: Jak konwertujesz to na ciąg?
Blender
16

Oto naprawdę pomocny przegląd tego, kiedy kodować base64, a kiedy nie, autorstwa Davida Calhouna.

Podstawowa odpowiedź = spakowane gzipem pliki zakodowane w base64 będą w przybliżeniu porównywalne pod względem rozmiaru do standardowych plików binarnych (jpg / png). Pliki binarne gzip będą miały mniejszy rozmiar.

Takeaway = Istnieje pewna zaleta kodowania i gzipowania ikon interfejsu użytkownika itp., Ale nierozsądne jest robienie tego w przypadku większych obrazów.

buldog
źródło
15

Będzie większy w base64.

Base64 używa 6 bitów na bajt do kodowania danych, podczas gdy binarny używa 8 bitów na bajt. Ponadto w przypadku Base64 jest trochę wyściółki. Nie wszystkie bity są używane w Base64, ponieważ został on opracowany w pierwszej kolejności do kodowania danych binarnych w systemach, które mogą poprawnie przetwarzać tylko dane niebinarne.

Oznacza to, że zakodowany obraz będzie o około 25% większy, plus stały narzut na wypełnienie.

Eric J.
źródło
7

Kodowanie obrazu do base64 sprawi, że będzie on o około 30% większy.

Zobacz szczegóły w artykule na Wikipedii o schemacie URI danych , gdzie stwierdza się:

Identyfikatory URI danych zakodowane algorytmem Base64 są o 1/3 większe niż ich odpowiedniki binarne. (Jednak ten narzut jest zmniejszony do 2-3%, jeśli serwer HTTP kompresuje odpowiedź za pomocą gzip)

Oded
źródło
7

Odpowiedź brzmi: to zależy.

Chociaż obrazy base64 są większe, istnieje kilka warunków, w których base64 jest lepszym wyborem.

Rozmiar obrazów base64

Base64 używa 64 różnych znaków, czyli 2 ^ 6. Więc base64 przechowuje 6 bitów na 8-bitowy znak. Zatem proporcja wynosi 6/8 z danych nieprzekonwertowanych na dane base64. To nie jest dokładne obliczenie, ale przybliżone oszacowanie.

Przykład:

Obraz 48kb potrzebuje około 64kb jako obraz przekonwertowany na base64.

Obliczenie: (48/6) * 8 = 64

Prosty kalkulator CLI w systemach Linux:

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

Lub używając obrazu:

$ cat my.png|base64|wc -c

Obrazy i strony internetowe Base64

Odpowiedź na to pytanie jest znacznie trudniejsza. Ogólnie rzecz biorąc, im większy obraz, tym mniej sensu przy użyciu base64. Ale rozważ następujące punkty:

  • Wiele obrazów osadzonych w pliku HTML lub pliku CSS może mieć podobne ciągi. W przypadku plików PNG często można znaleźć powtarzające się znaki „A”. Używając gzip (czasami nazywanego „deflate”), można nawet wygrać rozmiar. Ale to zależy od treści obrazu.
  • Narzut żądań HTTP1.1: Zwłaszcza w przypadku wielu plików cookie można łatwo uzyskać kilka kilobajtów narzutu na żądanie. Osadzanie obrazów base64 może zaoszczędzić przepustowość.
  • Nie koduj obrazów SVG w standardzie base64, ponieważ gzip jest bardziej efektywny w XML niż w base64.
  • Programowanie: Na dynamicznie generowanych obrazach łatwiej jest dostarczyć je w jednym żądaniu, niż skoordynować dwa zależne żądania.
  • Głębokie linki: jeśli chcesz uniemożliwić pobieranie obrazu, wyodrębnienie obrazu ze strony HTML jest nieco trudniejsze.
Trendfischer
źródło
3

Z pewnością będzie to kosztować więcej miejsca i przepustowości, jeśli chcesz używać obrazów zakodowanych w standardzie base64. Jeśli jednak Twoja witryna zawiera wiele małych obrazów, możesz skrócić czas ładowania strony, kodując obrazy do base64 i umieszczając je w html. W ten sposób przeglądarka klienta nie będzie musiała wykonywać wielu połączeń z obrazami, ale będzie miała je w html.

Brad Larson
źródło
Nie będzie to jednak problemem, gdy HTTP 2 naprawdę przejdzie.
Philip
@Philip To prawda, ale podoba mi się czynnik przenośności polegający na tym, że wszystkie zasoby są zawarte w pliku HTML. Pomoże to w buforowaniu mobilnego Internetu w obszarach z nierównymi sieciami.
aalaap
@aalaap Problem polega na tym, że jeśli zrobisz jedną zmianę na stronie, musisz ponownie załadować całą zawartość, w tym obrazy. Gdzie, jeśli masz oddzielone zasoby, możesz mieć wyższy wiek na tych i zostaną one zapisane w pamięci podręcznej i nie zostaną ponownie załadowane w pamięci podręcznej, które wygasają na stronie.
Philip