Intégration d'images Base64

Par pure curiosité, dans quels navigateurs l'intégration d'images Base64 fonctionne-t-elle ? Ce à quoi je fais référence est this.

Je sais que ce n'est généralement pas une bonne solution pour la plupart des choses, car cela augmente considérablement la taille de la page, mais je suis simplement curieux.

Quelques exemples:

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...);
}
dda
Question modifiée 10 janvier 2018 в 4:40
Programmation
html browser base64
30 juillet 2009 в 3:01
20 vues
Solution

Mise à jour : 2017-01-10

Les URI de données sont désormais pris en charge par tous les principaux navigateurs. IE prend en charge l'intégration d'images depuis la version 8 également.

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

Les URIs de données sont maintenant supportés par les navigateurs web suivants :

  • basés sur Gecko, tels que Firefox, SeaMonkey, XeroBank, Camino, Fennec et K-Meleon
  • Konqueror, via le système d'entrée/sortie des esclaves KIO de KDE's
  • Opera (y compris les appareils tels que la Nintendo DSi ou la Wii) WebKit, comme Safari (y compris sur iOS), le navigateur Android, Epiphany et Midori (WebKit est un dérivé du moteur KHTML de Konqueror, mais Mac OS X ne partage pas l'architecture KIO et les implémentations sont donc différentes), ainsi que Webkit/Chromium, comme Chrome.
  • Trident Internet Explorer 8 : Microsoft a limité sa prise en charge à certains contenus "non navigables" pour des raisons de sécurité, notamment parce que le JavaScript intégré dans un URI de données pourrait ne pas être interprétable par les filtres de script tels que ceux utilisés par les clients de messagerie électronique. Les URI de données doivent être inférieurs à 32 KiB dans la version 8[3].
  • Les URI de données ne sont pris en charge que pour les éléments et/ou attributs suivants[4] :
  • object (images uniquement)
  • img
  • input type=image
  • lien
  • déclarations CSS qui acceptent une URL, telles que background-image, background, list-style-type, list-style et similaires.
  • Internet Explorer 9 : Internet Explorer 9 n'a pas de limitation de 32KiB et est autorisé dans les éléments plus larges.
  • TheWorld Browser : Un navigateur IE shell qui a un support intégré pour le schéma Data URI.

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

Philippe Gerber
Réponse modifiée 9 janvier 2017 в 11:13
Commentaires (4)

La plupart des navigateurs de bureau modernes, tels que Chrome, Mozilla et Internet Explorer, prennent en charge les images codées en tant qu'URL de données. Mais certains navigateurs mobiles posent des problèmes d'affichage des URL de données : Android Stock Browser et Dolphin Browser n'affichent pas les JPEG intégrés.

Je vous recommande d'utiliser les outils suivants pour l'encodage/décodage base64 en ligne :

Cochez l'option "Format as Data URL&quot ; pour formater comme une URL de données.

CodeCaster
Réponse modifiée 13 octobre 2016 в 2:04
Commentaires (1)

Can I use (http://caniuse.com/#feat=datauri) est compatible avec les principaux navigateurs, avec quelques problèmes sur IE.

Commentaires (0)