Dois-je incorporer des images en données/base64 dans CSS ou HTML

Question

Afin de réduire le nombre de requêtes sur le serveur j’ai incorporé quelques images (PNG et SVG) comme BASE64 directement dans le css. (Son automatisée du processus de génération)

Comme ça :

Est-ce une bonne pratique ? Y a-t-il des raisons d’éviter cela ? Y a-t-il certains navigateur majeur qui n’ont pas données url soutenir ?

Question bonus : est-il judicieux de le faire aussi pour le CSS & JS ?

Answer 1

Est-ce une bonne pratique? Y at-il des raisons pour l'éviter?

C'est une bonne pratique généralement que pour de très petits CSS les images qui vont être utilisés ensemble (comme les sprites CSS) lorsque IE compatibilité n'a pas d'importance, et l'enregistrement de la demande est plus importante que cacheability.

Il a un certain nombre de notables inconvénients:

• Ne fonctionne pas du tout dans IE6 et 7.

• Fonctionne pour les ressources jusqu'à 32 ko taille dans IE8. C'est la limite qui s'applique à compter de l'encodage base64. En d'autres termes, n'est plus que de 32768 caractères.

• Il enregistre une demande, mais gonfle la page HTML à la place! Et les images cache. Elles sont chargées à chaque fois la page qui les contient ou une feuille de style chargés.

• Le codage Base64 gonfle la taille d'une image de 33%.

• S'il est servi dans un format de ressources, data: des images sont presque certainement va être une terrible pression sur les ressources du serveur! Les Images sont traditionnellement beaucoup de temps CPU pour compresser, avec très peu de réduction de taille.

Answer 2

Commune de réponses ici, semble suggérer ce n'est pas nécessaire, pour un ensemble de raisons légitimes. Cependant, tous ces semble négliger les applications modernes du comportement et du processus de construction.

Il n'est pas impossible (et en fait assez facile) pour la conception d'un processus simple qui va à pied à travers un dossier d'images et de produire un seul CSS avec toutes les images de ce dossier.

Cette css sera entièrement mis en cache et permet de réduire considérablement les aller-retour vers le serveur, qui est aussi correctement suggèrent par @MemeDeveloper l'une des plus grandes performances.

Bien sûr, Il est pirater. sans aucun doute. même les sprites sont un hack. Dans un monde parfait ce ne sera pas nécessaire, jusqu'à ce que, c'est une pratique possible si ce dont vous avez besoin à résoudre 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 (penser mobile).
3. vitesse (pour les millisecondes) est vraiment important pour votre cas d'utilisation.
4. Vous n'avez pas de soins (comme vous devriez, si vous voulez le web pour aller de l'avant) sur IE5 et IE6.

mon point de vue.

Answer 3

Ce n'est pas une bonne pratique. Certains navigateurs ne sont pas données à l'appui des Uri (par exemple, IE 6 et 7) ou de la prise en charge est limitée (par exemple, 32 ko pour IE8).

Voir aussi cet article de Wikipedia pour les détails complets sur les Données URI inconvénients:

• Les données de schéma d'URI

Inconvénients

• Les données Uri ne sont pas séparément en cache à partir de leur contenant des documents (par exemple, des CSS et des fichiers HTML) donc les données sont téléchargées à chaque fois le contenant des documents sont retéléchargé.
• Le contenu doit être ré-encodé et re-embedded chaque fois qu'une modification est faite.
• Internet Explorer jusqu'à la version 7 (environ 15% du marché en janvier 2011), manque de soutien.
• Internet Explorer 8 limites des données Uri pour une longueur maximale de 32 KO.
• Les données sont inclus à titre de simple ruisseau, et de nombreux environnements de traitement (tels que les navigateurs web) ne peut pas soutenir à l'aide de conteneurs (comme 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.
• Des données codées en Base64 Uri sont 1/3 de plus grande taille que leur équivalent binaire. (Toutefois, ce traitement est réduit à 2 ou 3% si le serveur HTTP comprime la réponse à l'aide de gzip)
• Les données Uri de le rendre plus difficile pour un logiciel de sécurité pour filtrer le contenu.

Answer 4

J'ai été en utilisant les données d'uri pour environ un mois, et j'ai juste arrêté de les utiliser parce qu'ils m'ont fait des feuilles de style, absolument énorme.

Data-uri de faire des travaux dans IE6/7 (vous avez juste besoin de servir un mhtml fichier à celles des navigateurs).

L'un des avantages que j'ai eu de l'aide de données d'uri, c'est que mes images de fond rendus dès que la feuille de style a été téléchargé, par opposition à l'progressive de chargement de nous voir autrement

C'est bien que nous avons cette technique disponible, mais je ne vais pas l'utiliser trop dans l'avenir. Je ne recommande d'essayer, juste pour que vous sachiez vous-même

Answer 5

J’avais plus enclins à utiliser des Sprites CSS pour combiner les images et enregistrer sur demandes. Je n’ai jamais essayé la technique de base64, mais apparemment il ne fonctionne pas dans IE6 et IE7. Signifie aussi que si toutes les images change alors il faut remettre le tout perdu, sauf si vous avez plusieurs fichiers CSS, bien sûr.