Utilisation d'un fichier image vs données URI dans le CSS

Question

J'essaie de décider de la meilleure façon d'inclure une image qui est nécessaire pour un script que j'ai écrit.

J'ai découvert this site et il m'a fait penser à essayer cette méthode pour inclure l'image en tant que data URI (définie par RFC 2397) car il était si petit - c'est un fichier d'opacité .png pixel 1x1 50% (utilisé pour un arrière-plan) - il se termine à 2 792 octets en tant qu'image contre 3 746 octets en tant que texte dans le CSS.

Est-ce que cela serait considéré comme une bonne pratique, ou est-ce que cela encombrerait inutilement le CSS?

Answer 1

Je ne pense pas que vous gagnerez beaucoup ... et s'il s'agit d'une image de fichier, le navigateur peut la mettre en cache. Je ne voudrais pas le faire avec CSS, sauf si vous en avez vraiment besoin.

Answer 2

Il existe une bonne raison d'utiliser une URI de données plutôt que l'image. L'URI de données est codé en base 64, ce qui signifie qu'elle est environ 25% plus grande que l'image. Cependant, votre fichier CSS peut être mis en cache, donc l'augmentation de petite taille n'est probablement pas un gros problème.

Si vous avez beaucoup d'images, il y a une surcharge pour les rechercher, à la fois en termes de résolution de noms et pour obtenir l'image comme une autre ressource. Tout cela signifie que si les images sont petites et que le fichier CSS global est encore petit, et que le CSS est partagé entre les pages qui sont souvent touchées, alors vous pouvez gagner en performance si vous passez aux URI de données. L'inconvénient est qu'ils ne fonctionnent que dans FX, Chrome, etc. Le travail partiel dans IE8, mais seulement pour les petites images. Ils ne fonctionnent pas dans IE7 ou moins du tout.

Answer 3

Je pense qu'il est négligeable en ce moment .. (? Une image qui est petit)

Cependant, il y a d'autres choses à considérer:

1. Y aura-t la possibilité de plus d'images dans l'avenir ?
2. GZipez-vous vos fichiers css?

Raison d'être ..
Pour chaque image chargée en est un de moins css appel au serveur, qui prend du temps. Nous savons tous cela des sprites. Même un sprite de plus grande taille, que toutes les images combinées, est préférable. Cela signifie que chaque image ajoutée représente un ralentissement potentiel de moins, si vous utilisez des données: URI.

et pour la deuxième question .. données: URI est très facile à utiliser. Je veux dire TRÈS. Nous avons quelques anciens fichiers CSS qui sont énormes. 109 kb énorme .. et quand nous données: URI l'image, qui gonfle dans un énorme 246 kb! Après gZipping, nous sommes à 126 kb. Sans oublier que les sprites ne sont pas amusants à maintenir, mais il y a beaucoup moins de raisons de spriter si vous utilisez des données: URI.

Espérons que cela aide.

PS. un lien concernant les données: URI. http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/#comment-5800

PS PS vérifier le bas de cette page, pour en savoir plus Nicolas a à dire au sujet des données: URI

Answer 4

Using Data URIs fait référence à Data URIs make CSS sprites obsolete et étend l'utilisation de l'outil CSSEmbed en créant une étape de construction Ant . CSSEmbed "prend également en charge un mode MHTML pour rendre les feuilles de style compatibles IE6 et IE7 qui utilisent des images internes similaires aux URI de données."

De même, lorsque vous comparez des octets de fichiers d'images à des octets encodés en base64, n'oubliez pas que chaque requête/réponse d'image http a la charge d'octets des en-têtes http. Cet exemple contre Yahoo consomme environ 900 octets (j'ai modifié le nom du proxy en exemple.com). De plus, le domaine yimg.com est optimisé pour ne pas avoir de cookies et sauvegarder ces octets potentiels.

GET http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png HTTP/1.1 
Accept: */* 
Referer: http://www.yahoo.com/ 
Accept-Language: en-US 
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.5; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET4.0C; .NET4.0E) 
Accept-Encoding: gzip, deflate 
Host: l.yimg.com 
Proxy-Connection: Keep-Alive 

HTTP/1.0 200 OK 
Date: Sat, 31 Jul 2010 22:27:25 GMT 
Cache-Control: max-age=315360000 
Expires: Tue, 28 Jul 2020 22:27:25 GMT 
Last-Modified: Wed, 16 Jun 2010 18:06:49 GMT 
Accept-Ranges: bytes 
Content-Length: 1750 
Content-Type: image/png 
Age: 321472 
Server: YTS/1.17.23.1 
X-Cache: MISS from a-proxy-server.example.com 
Via: 1.0 a-proxy-server.example.com:80 (squid/2.6.STABLE22) 
Proxy-Connection: keep-alive 

Answer 5

Quand utiliser des données URIs

Lorsqu'il est utilisé au lieu d'un sprite d'image, URIs de données enregistrer une requête HTTP unique, et chaque petit geste compte. Cependant, ils sont encore plus utiles pour les images difficiles à inclure dans les feuilles de sprites, par exemple les puces de listes personnalisées qui nécessitent une quantité variable d'espaces.

Bien que les URI de données constituent un excellent moyen de réduire les requêtes HTTP, il est inutile de les utiliser dans toutes les situations. Comme ils intègrent les données de fichier brutes directement dans la feuille de style, les URI de données peuvent conduire à une surcharge de la feuille de style si elles sont utilisées de manière abusive.

Voici quelques liens utiles.

http://jonraasch.com/blog/css-data-uris-in-all-browsers

http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/