Reducir el número de peticiones http con CSS Sprites
(1 votos) 
Loading ...Escrito el 29 enero, 2010 por Verónica Milán
Ú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!
|
Artículos Relacionados Problema en ie7 – ie6 con text-indent en inputs, submit buttons… Es frecuente usar imágenes de fondo para dar estilo a los botones de un formulario.... Crea fondos para tu web de forma online Muy en la línea del anterior post, en este os enseño una herramienta lista para... |
Publicado en Optimización | 7 Comentarios
7 Comentarios para “Reducir el número de peticiones http con CSS Sprites”
Enlaces a esta entrada
RSS
Hola Verónica.
Pues no sabía yo sobre esta técnica de los css sprites. Y realmente se le ve mucha utilidad.
Como tú bien dices, la optimización de sitios web, es fundamental en todo desarrollo web, que vayamos a realizar.
Optimizar el código, siempre lo máximo posible. Y fundamental el apartado de usabilidad y experiencia del usuario.
Ya puedes trabajar en el seo de un sitio web, para aparecer los primeros y que tengas muchas visitas, que como tu web no reúna aspectos básicos en optimización y usabilidad, como también una buena imagen de diseño, el usuario, tal como entra se va.
Saludos
30/01/10 - 11:13 #
Saludos, es buenos saber que hay personas que compartan sus conocimientos sobre las diversas tecnologías y métodos para el posicionamiento de páginas web.
Gracias por su aporte a la comunidad…
7/02/10 - 18:55 #
La verdad que la tecnica CSS sprite es verdaderamente muy util, la trato de utilizar cada vez que puedo. Aunque es verdad que no es una tecnica muy moderna ya hace tiempo que se utiliza. En el primer sitio que la vi implementada fue en http://www.google.com hace ya unos años, y todavia la siguen utilizando…asi que debe ser porque todavia es una muy buena tecnica y no muy compleja.
Saludos
10/02/10 - 16:22 #
Muchas gracias por la info, muy importante.
Saludos!!!
11/02/10 - 1:19 #
Realmente muy util este articulo..
gracias por compartir..
Mauro.
TuProgramador.com
17/02/10 - 21:23 #
Nosotros pensamos que son idóneos para diseño a una sola columna.
Pero para diseños fluidos, dónde las columnas tienen otras dimensiones para el diseño, creemos que existen otras técnicas CSS más adecuadas para seguir el código del diseño sin conflictos para los contenidos a incluir y/o incluidos.
Todo depende del diseño que le interese al cliente.
4/03/10 - 13:07 #