CSS Sprites

Antes que nada, quería explicar que esta entrada no pretende mostrar un ejemplo práctico de como se usan los CSS Sprites, mi objetivo es dar unas nociones de qué es exactamente esta técnica. Los CSS Sprites es una técnica antigua que se usaba en los juegos bidimensionales y que con un poco de CSS esta técnica se puede aplicar al mundo web. La idea es muy sencilla, todas las imágenes que necesitamos se unifican en una sóla y despues mediante las CSS elegimos la zona de la imagen global que queremos usar en cada momento.

 

Imagen usada en CSS Stripes

Mediante CSS creamos las capas necesarias, en caso de que sea una imagen que cambia, es decir, que por ejemplo sea un enlace que cuando estamos encima, pinchamos o ya ha sido visitado,  usamos la técnica de reemplazo de imágenes que más nos guste. Después lo que hay que hacer es posicionar las capas mediante CSS donde deseemos y finalmente le añadimos una imagen de fondo a nuestra capa con las coordenadas que queremos que se muestre de la imagen maestro. Algo tal que así:

   #capa  {
    background: transparent url(nav_logo3.jpg)
    -100px -200px no-repeat;}

El primer valor es el offset horizontal, desde el extremo izquierdo, y el segundo valor es el offset vertical. En realidad, necesitamos jugar un poco con los valores de los pixeles para comprender como funcionan los offsets, pero en cuanto lo hagamos unas cuantas veces, lo dominaremos sin problema.

¿Cuáles son los beneficios y los problemas que existen con esta técnica? Para empezar diremos que en Opera 6, no se pueden poner imágenes a los links, aunque si se hace bien, aunque no se muestren las imágenes nuestros enlaces se veran bien y funcionaran. Otro problema surge si un usuario ha decidido quitar las imágenes, es decir, ha deshabilitado la opción de mostrar imágenes del navegador, pero sigue usando las css, en ese caso, todos los elementos que usen una imagen de fondo no la tendran, en el caso de que lo hayamos usado para un enlace, el enlace funcionará, pero no se verá nada. Una de las ventajas es que el tamaño de la imagen maestro es menor que la suma de los tamaños de las imagenes que la componen.

 

 

 

 

Consejos para mejorar el redimiento de una web II

Como dije en la otra entrega, la mayor parte del tiempo de respuesta se emplea en realizar peticiones HTTP para la descarga de los distintos componentes más que en el propito HTML, por lo tanto si reducimos el número de elementos a descargan se reduciran el número de peticiones sin que esto signifique tener que deshacernos de elementos y, por tanto, perder calidad en el diseño. Las técnicas que se pueden utilizar para eso son:

• Mapa de Imágenes: Si tenemos muchos enlaces con imagenes, tendremos que realizar muchas peticiones para obtener todas las imáganes, en cambio, si usamos un mapa y le asociamos todos los enlaces, sólo tendremos que realizar una petición HTTP para obtener los enlaces. Existen dos tipos de mapas de imagenes, los del lado del servidor y los del lado del cliente, los mas típicos ya que no requieren de ningún back-end.
  Está técnica tiene un problema, el área se tiene que definir a mano y es tedioso y próblematico además de que sólo pueden ser rectangulares y no
  se pueden crear de forma dinámica ya que el DHTML falla en IE.
• CSS Sprites: La idea es que todas las imágenes se combinan en una y mediante las hojas de estilos se muestra la zona de la imagen que se desse. Evidentemente, se reduce el número de peticiones, de forma significativa y son más flexibles que los mapas de imágenes. Así mismo, y aunque parezca mentira, el tamaño de la imagen combinada es menor que la suma de todas las que la forman, ya que, se reduce la información de las imágenes (tablas de color, información del formateo, etc…)
• Scripts y css combinados: Es recomendable usar ficheros externos para los scripts y los css y aunque a veces se tienda a modularizar en muchos ficheros css y js, esto influye negativamente en el rendimiento porque se traduce en más peticiones HTTP. De todas formas, esto nos puede soñar extraño a todos los
  desarrolladores, siempre nos han metido en la cabeza la modularización por todas las ventajas que conocemos, además de que estaríamos cargando
  información innecesaria en la página. 
  Por lo tanto, lo que debemos hacer es, analizar un poco y crear un proceso para generar un fichero que nos devuelva la combinación de ficheros javascript necesaria para una página en concreto.

Todo esto reduce el tiempo de respuesta para usuarios que acceden por primera vez a la página web, es decir, aquellos usuarios que no tengan elementos en caché y demás.