577 votes

Intégration d'Images Base64

Purement par curiosité, dans quels navigateurs l'intégration d'images Base64 fonctionne-t-elle? Ce dont je parle est celui-ci .

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

369voto

Philippe Gerber Points 6360

Les données Uri sont actuellement pris en charge par les navigateurs web suivants:

  • Basés sur Gecko, comme Firefox, SeaMonkey, XeroBank, Camino, Fennec et K-Meleon
  • Konqueror, via KDE KIO esclaves système d'entrée/sortie
  • Opéra (y compris les périphériques tels que la Nintendo DSi ou des Wii)
  • Basé sur WebKit, tels que Safari (y compris sur iOS), Android du navigateur, de l'Épiphanie et de Midori (WebKit est un dérivé de Konqueror de KHTML le moteur, mais Mac OS X ne partage pas l'KIO l'architecture si les implémentations sont différentes), ainsi que Webkit/Chrome, tels que google Chrome
  • Trident
    • Internet Explorer 8: Microsoft a limité son soutien à certains "non-navigables de contenu" pour des raisons de sécurité, y compris les préoccupations que JavaScript intégré dans les données d'un URI peut pas être interprétable par le script de filtres, tels que ceux utilisés par basé sur le web les clients de messagerie. Les données Uri doit être inférieure à 32 Kio, dans la Version 8 de[3].
    • Les données Uri sont pris en charge uniquement pour les éléments suivants et/ou des attributs[4]:
      • objet (images uniquement)
      • img
      • input type=image
      • lien
    • Déclarations CSS qui acceptent une URL, comme background-image, background, list-style-type, la liste de style et similaires.
    • Internet Explorer 9: Internet Explorer 9 n'est pas 32KiB de limitation et de permis dans le cadre plus large des éléments.
    • TheWorld Browser: Un IE shell navigateur qui a un support intégré pour les Données de schéma d'URI

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

53voto

Brig Ader Points 131

Plus moderne de bureau navigateurs tels que google Chrome, Mozilla, Internet Explorer prend en charge les images codées en tant que données d'url. Mais il y a des problèmes d'affichage de données d'Url dans certains navigateurs mobiles: Android Stock Navigateur Dolphin Browser ne pas afficher les images au format Jpeg.

Je recommande que vous utilisez génial outil en ligne pour de l'encodage base64/décodage:
http://base64online.org/encode/
http://base64online.org/decode/
Cochez la case "Format des Données" URL de l'option de format base64 de données d'URL.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X