Incorporation d'images Base64

564

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

Je me rends compte que ce n'est généralement pas une bonne solution pour la plupart des choses, car cela augmente un peu la taille de la page - je suis juste 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...);
}
html base64 browser S Pangborn
la source
3
pourquoi ne pas créer une page avec des exemples, nous allons tous passer en revue et faire des tests en direct et le rapporter ici
Nir Levy
4
64 bits ne prennent que 6 caractères 2 ^ 6. Une chaîne de texte aura au moins 8 bits par caractère selon le type d'encodage. Vous perdez au moins 25% d'efficacité .... mon test rapide a montré environ 30% de perte.
4
Plus important encore, vous perdez probablement la capacité de mettre efficacement en cache vos fichiers.
Hut8
6
@BrianHaak "énormément" ne dit rien. J'ai personnellement utilisé plusieurs fois des images base64 avec ReactJs au cours des deux dernières années et je n'ai eu aucun problème de rendu. Veuillez fournir une mesure.
Lukas Liesis
1
@LukasLiesis J'ai fait des mesures dans Google Chrome à des fins commerciales, donc aucun rapport public ici. Cela peut être correct pour le rendu d'images uniques mais vous devez considérer que la mise en cache ne fonctionne pas du tout. Dans React.js, c'est très critique quand cela conduit à terminer le re-rendu des parties (sur les changements de navigation, par exemple).
Brian Haak

Réponses:

361

Mise à jour: 2017-01-10

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

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

Les URI de données sont désormais pris en charge par les navigateurs Web suivants:

  • Basé sur Gecko, comme Firefox, SeaMonkey, XeroBank, Camino, Fennec et K-Meleon
  • Konqueror, via le système d'entrée / sortie des esclaves KIO de KDE
  • Opera (y compris les appareils tels que la Nintendo DSi ou la Wii)
  • Basé sur 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, les implémentations sont donc différentes), ainsi que Webkit / À base de chrome, comme Chrome
  • Trident
    • Internet Explorer 8: Microsoft a limité sa prise en charge à certains contenus "non navigables" pour des raisons de sécurité, notamment par le fait que JavaScript intégré dans un URI de données peut ne pas être interprétable par des filtres de script tels que ceux utilisés par les clients de messagerie Web. Les URI de données doivent être inférieurs à 32 Ko 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]:
      • objet (images uniquement)
      • img
      • type d'entrée = image
      • lien
    • Déclarations CSS qui acceptent une URL, telle que background-image, background, list-style-type, list-style et similaire.
    • Internet Explorer 9: Internet Explorer 9 n'a pas de limitation de 32 Ko et est autorisé dans des éléments plus larges.
    • TheWorld Browser: Un navigateur shell IE qui prend en charge le schéma URI de données

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

Philippe Gerber
la source
Bonjour Philippe, existe-t-il une solution de contournement pour la limite de taille de 32 Ko dans IE8? La base64 est-elle prise en charge dans IE7 et IE6? Si non, des solutions de contournement (sans aucune limite de taille)? Si oui, une limite de taille? Si oui, des solutions de contournement?
SexyBeast
Regardez cela, peut-être que cela aiderait: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Les normes disent-elles quelque chose? Certains votes positifs pour une bonne mise à jour des réponses =).
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
5
Limitation d'IE8 - Ce que j'ai trouvé, c'est qu'IE8 a une limite maximale de caractères d' image intégrée de 32 768 ( par Microsoft ) et que mon image intégrée en avait un peu plus de 35 000. Ainsi, lorsque la background-imagepropriété CSS ( url(...embedded image) a tenté de se charger dans IE8, car la limite de caractères a été dépassée, l'intégralité classqui contenait la propriété n'a pas été chargée. Je n'ai pas poursuivi un correctif pour cela, je suis revenu à imgdes images intégrées qui dépassaient le maximum et mes images ont été chargées correctement.
id.ot
53

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 il y a des problèmes d'affichage des URL de données dans certains navigateurs mobiles: le navigateur Android Stock et le navigateur Dolphin n'afficheront pas les fichiers JPEG intégrés .

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

Cochez l'option "Format en tant qu'URL de données" pour formater en tant qu'URL de données.

Brig Ader
la source
3
Vous n'avez pas besoin d'un outil en ligne pour encoder en base64. À la place, vous pouvez utiliser l'outil de ligne de commande base64 sous Linux ou Mac OS X: echo "data: image / jpeg; base64," $ (cat file.jpg | base64)
cstroe