Reducir el número de peticiones http con CSS Sprites
Últimamente estoy aprendiendo mucho sobre la optimización de sitios web, tanto a nivel de código css y html como a nivel de navegadores y experiencia de usuario.
Hace unos días leí el artículo how to reduce the number of HTTP request, muy útil para acelerar la carga de nuestras webs. Además justo estos días atrás en lawebera.es escribimos un artículo sobre el tema, y anteriormente hemos publicados otras cosas relacionadas que puedes leer aquí: Cómo hacer diseños web de carga rápida y como acelerar la carga de un sitio web.
Entre otras cosas, en el artículo explican la utilidad básica de CSS Sprites:
- CSS Sprites: es una técnica usada para combinar una serie de imágenes en una. A continuación, utilizando la propiedad background-position en el archivo CSS se controla qué parte de esa imagen será visible para un cierto elemento. De esta manera, en lugar de tener una petición HTTP para cada imagen individual, sólo habrá una para un archivo de imagen más grande que contiene a todas las demás. Muy recomendable.
Algunos recursos sobre CSS Sprites:
- CSS Sprites Generator: subes las imagenes a juntar en el sprite y la aplicación te crea la imagen padre junto con el background-position adecuado para cada imagen.
- Tutorial básico de CSS Sprites: un tutorial para iniciarse en el uso de esta técnica y empezar a ver sus ventajas, muy sencillo.
- Guía de CSS Sprites I y II: una guía mucho más completa de esta técnica. Muy recomendable su lectura.
- CSS Sprites de A List Apart: este artículo sobre el tema es casi una leyenda de las veces que ha sido nombrado y enlazado. Está en inglés, pero merece la pena leerlo.
¡A optimizar!
