Comment puis-je encourager le navigateur à télécharger plus rapidement des images à partir d'un fichier CSS?

J'utilise CSS pour placer beaucoup de mes images (comme arrière-plans <div>) et je trouve souvent qu'elles se chargent très lentement de cette façon. Ils semblent être la dernière chose à charger. Même les petites images de petites icônes mettent du temps à apparaître de cette façon. Existe-t-il un moyen d'indiquer au navigateur une priorité pour les images? Ou obtenez-le pour télécharger les images dans le fichier CSS plus tôt et les rendre plus tôt?

CSS est pour le style, pas pour le contenu. Les navigateurs (à juste titre) essaient d'afficher du contenu avant d'ajouter un style, d'où la raison pour laquelle les images dans les feuilles de style sont généralement téléchargées en dernier. Si les images sont importantes pour votre contenu, ajoutez-les via des <IMG>balises HTML standard .

Utilisez les URI absolus de votre feuille de style et ajoutez les images des balises IMG à un caché <div>sur la page (cela suppose que vous utilisez les mêmes images sur chaque page; idéalement dans le pied de page afin qu'elles soient toutes chargées et mises en cache sur un appel de page donné ).

Les images sur la page ont la priorité et, une fois les images mises en cache, elles s'afficheront immédiatement lors des demandes de page suivantes.

Pour les navigateurs qui prennent en charge le type d'URI de données (voir http://en.wikipedia.org/wiki/Data_Uri pour plus d'informations) pour inclure l'image dans le CSS lui-même.

Cela présente cependant quelques inconvénients:

• Les données sont rechargées lorsque le CSS l'est, plutôt que d'être mises en cache séparément, mais à moins que votre CSS ne change régulièrement, ce n'est pas vraiment un problème.
• Le manque d'héritage de CSS et de tels moyens il peut y avoir des moments (gaspillage de bande passante) où vous devez inclure le même graphique plusieurs fois ou modifier les classes utilisées dans votre document.
• Les images sont codées en base64 lorsqu'elles sont utilisées de cette façon, ce qui signifie qu'elles prennent plus de bande passante (bien que le problème de bande passante soit beaucoup moins important si vous envoyez les données compressées).
• Vous devrez fournir des styles alternatifs pour les navigateurs qui ne prennent pas en charge les URI de données, dont certains sont loin d'être rares (IE6 et IE7 par exemple).

À l'heure actuelle, il n'y a aucun moyen de spécifier les fichiers à télécharger en premier. Pour votre information, les images spécifiées dans les fichiers CSS sous forme d' images de fond télécharger la dernière sans doute parce que le navigateur ne les voit pas le contenu et donc une priorité inférieure afin éviter de les utiliser pour des images importantes que vous voulez charger rapidement.

Utilisez des sprites CSS , en particulier pour les icônes.

Faites vos images aussi petites que possible. Vous pouvez utiliser smush.it pour supprimer les octets inutiles.