Dois-je intégrer des images comme data / base64 dans CSS ou HTML

les réponses communes semblent ici suggérer que ce n'est pas nécessaire, pour un ensemble de raisons légitimes. Cependant, tout cela semble négliger le comportement des applications modernes et le processus de construction.

il n'est pas impossible (et en fait assez facile) de concevoir un processus simple qui va parcourir les images d'un dossier et générer un seul CSS avec toutes les images de ce dossier.

ce css sera entièrement mis en cache et réduira considérablement les allers-retours vers le serveur, ce qui est aussi correctement suggéré par @MemeDeveloper l'un des plus grands succès de performance.

bien sûr, c'est du piratage. incontestable. même les sprites sont un hack. Dans le monde parfait, cela ne sera pas nécessaire, d'ici là, c'est une pratique possible si ce que vous devez corriger est:

1. Page avec plusieurs images qui ne sont pas facilement"spritable".
2. Aller-Retour vers les serveurs sont un véritable goulot d'étranglement (pensez mobile).
3. vitesse (pour les millisecondes) est vraiment important pour votre cas d'utilisation.
4. vous ne vous souciez pas (comme vous devriez, Si vous voulez que le web aller de l'avant) au sujet de IE5 et IE6.

mon point de vue.

Ce n'est pas une bonne pratique. Certains navigateurs ne prennent pas en charge les URIs de données (p. ex., IE 6 et 7) ou la prise en charge est limitée (p. ex., 32KB pour IE8).

Voir aussi cet article de Wikipedia pour des détails complets sur les désavantages URI de données:

• Données de schéma d'URI

désavantages

• les données ne sont pas mis en cache séparément de leurs documents contenant (par exemple, fichiers CSS ou HTML) de sorte que les données sont téléchargées chaque fois que les documents contenant sont rechargés.
Le contenu
• doit être réencodé et réincorporé chaque fois qu'une modification est apportée.
• Internet Explorer par la version 7 (environ 15% du marché en janvier 2011), manque de soutien.
• Internet Explorer 8 limite les URIs de données à une longueur maximale de 32 Ko.
• les données sont incluses comme un simple flux, et de nombreux environnements de traitement (tels que les navigateurs web) peuvent ne pas prendre en charge l'utilisation de conteneurs (tels que multipart/alternative ou message/rfc822 ) pour fournir une plus grande complexité tels que les métadonnées, la compression de données, ou la négociation de contenu.
• Base 64-Les URI de données encodées sont 1/3 plus grandes que leur équivalent binaire. (Cependant, cette charge est réduite à 2-3% si le serveur HTTP compresse la réponse en utilisant gzip)
• URIs de données rendent plus difficile pour le logiciel de sécurité de filtrer le contenu.

j'ai utilisé data-uri pendant environ un mois, et J'ai juste arrêté de les utiliser parce qu'ils ont fait mes feuilles de style absolument énorme.

données-uri do work in IE6 / 7 (vous avez juste besoin de servir un mhtml fichier à ces navigateurs).

le seul avantage que j'ai obtenu de l'utilisation de données-uri's était que mes images de fond rendus dès que la feuille de style a été téléchargé, par opposition au chargement progressif nous voir ailleurs

c'est bien que nous ayons cette technique disponible, mais je ne l'utiliserai pas trop à l'avenir. Je recommande de l'essayer, juste pour que vous le sachiez par vous-même

j'aurais plus tendance à utiliser des Sprites CSS pour combiner les images et enregistrer sur demande. Je n'ai jamais essayé la technique base64 mais apparemment ça ne marche pas dans IE6 et IE7. Cela signifie également que si des images changent, vous devez restaurer l'ensemble perdu, sauf si vous avez plusieurs fichiers CSS, bien sûr.

je n'ai aucune idée sur les meilleures pratiques, mais je ne voudrais pas voir ce genre de chose si je pouvais l'aider. :)

les navigateurs Web et les serveurs ont une charge entière de cache des choses construites dans donc j'aurais pensé que votre meilleur pari était juste d'obtenir votre serveur pour dire au client de mettre en cache des fichiers image. À moins que vous ayez des tas d'images vraiment petites sur une page, alors je n'aurais pas pensé que la surcharge de plusieurs requêtes était si importante. Navigateur généralement utilisera la même connexion pour demander beaucoup de fichiers, il n'y a donc pas de nouvelles connexions réseau en cours d'établissement.donc, à moins que le volume de trafic via les en-têtes HTTP soit significatif par rapport à la taille des fichiers image, Je ne m'inquiéterais pas trop des demandes multiples.

y a-t-il des raisons pour lesquelles vous pensez qu'il y a trop de requêtes vers le serveur en ce moment?

je le suggérerais pour des images minuscules qui sont utilisées très souvent, par exemple les icônes communes d'une application web.

• Minuscule, parce que le codage Base64 augmente la taille
• souvent utilisé, parce que cela justifie le temps de charge initiale plus long

bien sûr, les problèmes de support avec les navigateurs plus anciens doivent être gardés à l'esprit. Il peut aussi être une bonne idée d'utiliser la capacité d'un cadre automatiquement inline les images une URL de données comme le ClientBundle de GWT ou au moins utiliser les classes CSS au lieu de l'ajouter au style de l'élément directement.

plus d'informations ici: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to /