web-dev-qa-db-fra.com

Incorporation d'images Base64

Par pure curiosité, avec quels navigateurs de base64 intègre-t-il les images? Ce dont je parle est this .

Je me rends compte 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 - 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...);
}
htmlbase64browser
552
S Pangborn

Mise à jour: 2017-01-10

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

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

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

  • Basé sur Gecko, tel que Firefox, SeaMonkey, XeroBank, Camino, Fennec et K-Meleon
  • Konqueror, via le système d'entrée/sortie esclaves KIO de KDE
  • Opera (y compris des appareils tels que la Nintendo DSi ou la Wii)
  • WebKit, comme Safari (y compris sur iOS), les navigateurs Android, Epiphany et Midori (WebKit est un dérivé du moteur KHTML de Konqueror, mais Mac OS X ne partage pas l'architecture KIO, de sorte que les implémentations sont différentes), de même que Webkit./À base de chrome, tel que Chrome
  • Trident
    • Internet Explorer 8: Microsoft a limité sa prise en charge à certains contenus "non navigables" pour des raisons de sécurité, notamment pour éviter que JavaScript incorporé dans un URI de données ne puisse être interprété par les filtres de script, tels que ceux utilisés par les clients de messagerie basés sur le 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 image de fond, fond, type de liste, style de liste, etc.
    • Internet Explorer 9: Internet Explorer 9 n'a pas de limitation à 32 Ko et est autorisé dans des éléments plus larges.
    • TheWorld Browser: navigateur IE Shell doté d’un support intégré pour le schéma d’URI de données

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

355
Philippe Gerber

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

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

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

52
Brig Ader

Puis-je utiliser ( http://caniuse.com/#feat=datauri ) montre la prise en charge sur les principaux navigateurs avec peu de problèmes sur IE.

13
kehers