¿Cómo puedo alentar al navegador a descargar imágenes del archivo CSS más rápido?

Utilizo CSS para colocar muchas de mis imágenes (como fondos para <div>) y, a menudo, encuentro que se cargan muy lentamente de esta manera. Parecen ser lo último en cargar. Incluso las pequeñas imágenes de iconos pequeños tardan un tiempo en aparecer de esta manera. ¿Hay alguna manera de decirle al navegador una prioridad para las imágenes? ¿O puede descargar las imágenes en el archivo CSS antes y renderizarlas antes?

CSS es para diseñar, no para contenido. Los navegadores (correctamente) intentan mostrar contenido antes de agregar estilo, de ahí la razón por la cual las imágenes en las hojas de estilo generalmente se descargan al final. Si las imágenes son importantes para su contenido , agréguelas a través de <IMG>etiquetas HTML estándar .

Use los URI absolutos de su hoja de estilo y agregue las imágenes de las etiquetas IMG a una oculta <div>en la página (esto supone que está utilizando las mismas imágenes en cada página; idealmente en el pie de página para que todos estén cargados y almacenados en caché en cualquier llamada de página dada )

Las imágenes en la página tienen prioridad y, una vez que las imágenes se almacenan en caché, se mostrarán inmediatamente en las solicitudes de página posteriores.

Para los navegadores que admiten el tipo de URI de datos (consulte http://en.wikipedia.org/wiki/Data_Uri para obtener información) para incluir la imagen en el propio CSS.

Sin embargo, esto tiene algunas desventajas:

• Los datos se vuelven a cargar cuando el CSS es, en lugar de almacenarse en caché por separado, aunque a menos que su CSS cambie regularmente, esto no es un gran problema.
• La falta de herencia de CSS y eso significa que puede haber ocasiones (pérdida de ancho de banda) cuando tiene que incluir el mismo gráfico varias veces o alterar las clases utilizadas en su documento.
• Las imágenes están codificadas en base64 cuando se usan de esta manera, lo que significa que toman más ancho de banda (aunque el problema del ancho de banda es mucho menos significativo si envía los datos comprimidos).
• Deberá proporcionar estilos alternativos para los navegadores que no admiten los URI de datos, algunos de los cuales están lejos de ser poco comunes (IE6 e IE7, por ejemplo).

A partir de ahora no hay forma de especificar qué archivos se descargan primero. Para su información, las imágenes especificadas en los archivos CSS como imágenes de fondo descarga última probablemente debido a que el navegador los ve no el contenido y por lo tanto baja prioridad para evitar su uso para las imágenes importantes que desea cargar rápidamente.

Use sprites CSS , especialmente para iconos.

Haz tus imágenes lo más pequeñas posible. Puede usar smush.it para eliminar bytes innecesarios.