comparte el articulo 

Reducir el número de peticiones http con CSS Sprites

Actualizado el 09/10/2013 < > 7 Cometarios

Ú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!

Publicado el 29/01/2010, última actualización 09/10/2013.

Licencia: Eres libre de distribuir este artículo siempre que mantengas los enlaces dentro del mismo intactos y des los créditos al autor.

Autor: Verónica Milán

URL: Front end

Añadir Comentario (Subir al texto)

7 Cometarios

  1. diseño web valencia

    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

    Sábado, 30 de enero 2010

  2. pagina web cancún ::ProyectoDW::

    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…

    Domingo, 7 de febrero 2010

  3. 7 Consejos para diseñar tu web de forma eficaz

    […] en lawebera.es, pero conviene insistir para no perderlo de vista. Es fundamental conseguir que tus páginas sean veloces como el rayo, porque así se mueve la información en la web actual, y si no eres capaz de seguir […]

    Martes, 9 de febrero 2010

  4. Hernán

    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

    Miércoles, 10 de febrero 2010

  5. Pablo

    Muchas gracias por la info, muy importante.
    Saludos!!!

    Jueves, 11 de febrero 2010

  6. diseño web

    Realmente muy util este articulo..
    gracias por compartir..

    Mauro.
    TuProgramador.com

    Miércoles, 17 de febrero 2010

  7. Proyectos Web SEO

    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.

    Jueves, 4 de marzo 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras