Dois-je intégrer des images dans data/base64 en CSS ou HTML
De réduire le nombre de demandes sur le serveur j'ai incorporé quelques images (PNG & SVG) en BASE64 directement dans le css. (Automatisé dans le processus de construction)
comme ceci:
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);
Est-ce une bonne pratique? Y at-il des raisons pour l'éviter? Sont là certains des principaux navigateurs qui n'ont pas de données prise en charge des url?
Question Bonus:
Est-il judicieux de le faire pour le CSS & JS aussi?
- pas beaucoup de gens utiliser IE7 plus et pour tous les inconvénients il y a vraiment une bonne tête en, "moins" fichiers d'image à gérer! c'est à dire si vous avez besoin de dessiner des lignes spéciales pour un composant de l'arbre, puis l'incorporation de la petite coude images dans le css lui-même en combinaison avec repeat-x ou repeat-y supprime la nécessité de faire en sorte supplémentaire fichiers d'image sont à la bonne place (avec très peu de frais généraux pour ce cas d'utilisation)
Vous devez vous connecter pour publier un commentaire.
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.
De l'encodage Base64 gonfle la taille d'une image de 33%.
S'il est servi dans un format de ressources,
data:
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.Commun 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.
Sûr, C'est de la bidouille. sans aucun doute. même les sprites sont un hack. Dans un monde parfait ce ne sera pas nécessaire, jusqu'alors, c'est une pratique possible si ce dont vous avez besoin à résoudre est:
mon point de vue.
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:
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 recommande de l'essayer, mais, si vous le savez vous-même
Je serais plus enclin à utiliser des Sprites CSS pour combiner les images et les enregistrer sur demande. Je n'ai jamais essayé le base64 technique mais apparemment il ne fonctionne pas sous IE6 et IE7. Signifie également que si toutes les images des changements, alors vous devez remettre tout 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 de la mise en cache des trucs intégrée, donc j'aurais pensé que votre meilleur pari est de simplement obtenir votre serveur pour dire au client pour mettre en cache les fichiers d'image. À moins que vous ayez des charges de très petites images sur une page, alors je n'aurais pas pensé à la surcharge de plusieurs demandes a été un gros problème. Les navigateurs sont généralement utiliser la même connexion à la demande de beaucoup de fichiers, donc il n'y a pas de nouvelles connexions réseau établies de sorte que si le volume de trafic via les en-têtes HTTP est significative par rapport à la taille des fichiers d'image je ne voudrais pas vous soucier de multiples demandes trop.
Sont là des raisons pourquoi vous pensez qu'il y a trop de demandes allant vers le serveur à l'instant?
Je dirais il pour de petites images qui sont utilisées très souvent, par exemple commun des icônes d'une application web.
Des cours de soutien à des problèmes avec les anciens navigateurs 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 de données des url de la forme de GWT est ClientBundle ou au moins utiliser des classes CSS au lieu d'ajouter à l'élément de style directement.
Plus d'informations sont réunis ici: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/