Osadzanie Zdjęć Base64

Question

Osadzanie Zdjęć Base64

Czysto z ciekawości, w jakich przeglądarkach działa osadzanie obrazu Base64? Chodzi mi o to.

Zdaję sobie sprawę, że zazwyczaj nie jest to dobre rozwiązanie dla większości rzeczy, ponieważ zwiększa rozmiar strony dość trochę - jestem po prostu ciekaw.

Niektóre przykłady:

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...);
}

566

html browser base64

Author: Jeromy French, 2009-07-30

Source

3 answers

Większość nowoczesnych przeglądarek desktopowych, takich jak Chrome, Mozilla i Internet Explorer, obsługuje obrazy zakodowane jako data URL. Jednak w niektórych przeglądarkach mobilnych występują problemy z wyświetlaniem adresów URL z danymi: przeglądarka akcji Androida i przeglądarka Dolphin nie wyświetlają wbudowanych JPEG .

Zalecam korzystanie z następujących narzędzi do kodowania/dekodowania Base64 online:

Zaznacz opcję "Formatuj jako adres URL danych", aby sformatować jako adres URL danych.

53

Author: Brig Ader,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-13 14:04:27

Can I use ( http://caniuse.com/#feat=datauri ) pokazuje wsparcie dla wszystkich głównych przeglądarek z kilkoma problemami na IE.

13

Author: kehers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-04 09:57:14

score 364 · Accepted Answer

Aktualizacja: 2017-01-10

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

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

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

Firefox, SeaMonkey, XeroBank, Camino, Fennec i K-Meleon]}
Konqueror, poprzez system wejścia/wyjścia KIO w KDE

Opera (w tym urządzenia Nintendo DSi lub Wii)
[15]}oparte na WebKit, takie jak Safari (w tym na iOS), przeglądarka Android, 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 oparte na Webkit/Chromium, takie jak Chrome [16]}
Trident
[15]}Internet Explorer 8: Microsoft ograniczył wsparcie dla niektórych" Nie-nawigacyjnych " treści ze względów bezpieczeństwa, w tym obaw że JavaScript osadzony w URI danych może nie być interpretowany przez filtry Skryptowe, takie jak te używane przez internetowych klientów poczty e-mail. Uri danych musi być mniejsze niż 32 KiB w wersji 8[3].

dane URI są obsługiwane tylko dla następujących elementów i / lub atrybutów[4]:

obiekt (tylko obrazy)

img

input type = image

link

deklaracje CSS, które akceptują adres URL, np. background-image, background, list-style-type, list-style i podobne.

Internet Explorer 9: Internet Explorer 9 nie ma ograniczenia 32KiB i jest dozwolony w szerszych elementach.
TheWorld Browser: Przeglądarka IE shell, która ma wbudowaną obsługę schematu URI danych.]}

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