Question Intégration d'Images Base64


Simplement par curiosité, sur quels navigateurs fonctionne l'intégration d'images Base64? Ce dont je parle est ce.

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

521
2017-07-30 15:01


origine


Réponses:


Mise à jour: 2017-01-10

Les URI de données sont maintenant supportés 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ées sur Gecko, telles que Firefox, SeaMonkey, XeroBank, Camino, Fennec et K-Meleon
  • Konqueror, via le système d'entrée / sortie esclave KIO de KIO
  • Opera (y compris les appareils tels que la Nintendo DSi ou Wii)
  • WebKit, tel que 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 différentes) / Chromium, comme Chrome
  • Trident      
    • Internet Explorer 8: Microsoft a limité son support à certains contenus «non navigables» pour des raisons de sécurité, notamment le fait que JavaScript intégré dans un URI de données ne soit pas 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érieures à 32 KiB dans la version 8 [3].
    • Les URI de données ne sont prises en charge que pour les éléments et / ou les attributs suivants [4]:      
      • objet (images seulement)
      • img
      • type d'entrée = image
      • lien
    • Déclarations CSS acceptant une URL, telles que background-image, background, list-style-style, list-style et similaire.
    • Internet Explorer 9: Internet Explorer 9 n'a pas de limitation de 32 Ko et est autorisé dans les éléments plus larges.
    • TheWorld Browser: Un navigateur shell IE qui a un support intégré pour le schéma Data URI

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


338
2017-07-30 15:32



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

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

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


49
2017-10-03 06:18



Puis-je utiliser (http://caniuse.com/#feat=datauri) montre le soutien à travers les principaux navigateurs avec quelques problèmes sur IE.


13
2017-11-04 09:57



Vous n'avez pas besoin d'un outil en ligne pour encoder en base64. Au lieu de cela, vous pouvez utiliser le base64 outil de ligne de commande sous Linux ou Mac OS X:

echo "data:image/jpeg;base64,"$(cat file.jpg | base64)

0
2017-07-25 16:20