Osadzanie obrazów Base64

564

Czy to z ciekawości, w których przeglądarkach działa osadzanie obrazu Base64? Mam na myśli to .

Zdaję sobie sprawę, że zazwyczaj nie jest to dobre rozwiązanie dla większości rzeczy, ponieważ całkiem zwiększa rozmiar strony - jestem po prostu ciekawy.

Kilka przykładów:

HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
html base64 browser S Pangborn
źródło
3
dlaczego nie skonfigurować strony z przykładami, wszyscy przejdziemy, przeprowadzimy testy na żywo i zgłośmy to tutaj
Nir Levy
4
64 bity wymagają tylko 6 znaków 2 ^ 6. Ciąg tekstowy będzie miał co najmniej 8 bitów na znak, w zależności od typu kodowania. Tracisz co najmniej 25% wydajności .... mój szybki test wykazał około 30% strat.
4
Co ważniejsze, prawdopodobnie tracisz zdolność do skutecznego buforowania swoich rzeczy.
Hut8
6
@BrianHaak „niesamowicie” nic nie mówi. W ciągu ostatnich kilku lat osobiście korzystałem kilkakrotnie z obrazów base64 z ReactJs i nie miałem żadnych problemów z renderowaniem. Proszę podać pomiar.
Lukas Liesis
1
@LukasLiesis Wykonałem pomiary w Google Chrome w celach komercyjnych, więc nie ma tutaj publicznych raportów. Renderowanie unikatowych obrazów może być w porządku, ale należy pamiętać, że buforowanie w ogóle nie działa. W React.js jest to bardzo ważne, gdy prowadzi do pełnego ponownego renderowania części (na przykład przy zmianach nawigacji).
Brian Haak

Odpowiedzi:

361

Aktualizacja: 10.01.2017

Identyfikatory URI danych są teraz obsługiwane przez wszystkie główne przeglądarki. IE obsługuje również osadzanie obrazów od wersji 8.

http://caniuse.com/#feat=datauri

Identyfikatory URI danych są teraz obsługiwane przez następujące przeglądarki internetowe:

  • Oparte na Gecko, takie jak Firefox, SeaMonkey, XeroBank, Camino, Fennec i K-Meleon
  • Konqueror, poprzez system wejścia / wyjścia KIO slave KDE
  • Opera (w tym urządzenia takie jak Nintendo DSi lub Wii)
  • Oparte na WebKit, takie jak Safari (w tym na iOS), przeglądarka Androida, Epiphany i Midori (WebKit jest pochodną silnika KHTML Konquerora, ale Mac OS X nie dzieli architektury KIO, więc implementacje są różne), a także Webkit / Na bazie chromu, na przykład Chrome
  • Trójząb
    • Internet Explorer 8: Microsoft ograniczył swoją obsługę do niektórych „niemożliwych do nawigacji” treści ze względów bezpieczeństwa, w tym obaw, że JavaScript osadzony w URI danych może nie być interpretowany przez filtry skryptów, takie jak te używane przez internetowych klientów poczty e-mail. Identyfikatory URI danych muszą być mniejsze niż 32 KiB w wersji 8 [3].
    • Identyfikatory URI danych są obsługiwane tylko dla następujących elementów i / lub atrybutów [4]:
      • obiekt (tylko obrazy)
      • img
      • typ wejścia = obraz
      • połączyć
    • Deklaracje CSS, które akceptują adresy URL, takie jak obraz tła, tło, styl listy, styl listy i podobne.
    • Internet Explorer 9: Internet Explorer 9 nie ma ograniczenia 32 KB i jest dozwolony w szerszych elementach.
    • TheWorld Browser: przeglądarka powłoki IE, która ma wbudowaną obsługę schematu URI danych

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

Philippe Gerber
źródło
Cześć Philippe, czy jest jakieś obejście ograniczenia rozmiaru 32 KiB w IE8? Czy base64 jest obsługiwany w IE7 i IE6? Jeśli nie, jakieś obejścia (bez limitu rozmiaru)? Jeśli tak, jakiś limit rozmiaru? Jeśli tak, jakieś obejścia?
SexyBeast
Spójrz na to, może to pomogłoby: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Czy standardy coś mówią? Pewne poparcie dla aktualizacji dobrej odpowiedzi =).
Ciro Santilli 31 冠状 病 六四 事件 法轮功
5
Ograniczenie IE8 - odkryłem, że IE8 ma limit osadzonych obrazów maksymalnie 32 768 znaków ( na Microsoft ), a mój osadzony obraz miał nieco ponad 35 000. Kiedy więc background-imagewłaściwość CSS ( url(...embedded image) próbowała załadować się do IE8, ponieważ limit znaków został przekroczony, cała classzawartość tej właściwości nie została załadowana. Nie oczekiwałem naprawy tego, wróciłem do imgosadzonych obrazów, które przekraczały maksimum, a moje obrazy zostały odpowiednio załadowane.
id.ot
53

Większość współczesnych przeglądarek stacjonarnych, takich jak Chrome, Mozilla i Internet Explorer, obsługuje obrazy zakodowane jako adres URL danych. Występują jednak problemy z wyświetlaniem adresów URL danych w niektórych przeglądarkach mobilnych: Android Stock Browser i Dolphin Browser nie wyświetlają osadzonych plików JPEG .

Polecam korzystanie z następujących narzędzi do internetowego kodowania / dekodowania base64:

Zaznacz opcję „Formatuj jako adres danych”, aby sformatować jako adres danych.

Brig Ader
źródło
3
Nie potrzebujesz narzędzia online do kodowania w base64. Zamiast tego możesz użyć narzędzia wiersza polecenia base64 w systemie Linux lub Mac OS X: echo "data: image / jpeg; base64," $ (cat file.jpg | base64)
cstroe