Una de las primeras técnicas que se recomienda utilizar cuando intentamos reducir el peso de una página web que hayamos diseñado y por tanto el tiempo de carga de la misma es el uso de sprites CSS para la gestión de las imágenes de la página. Para los que preferimos los diseños con bastante carga de imagen esta práctica se vuelve prácticamente indispensable.Cuentan los veteranos del mundo informático que el concepto de sprite, y por tanto el uso de ese término en la actualidad, se remonta a los comienzos del uso de gráficos en el entorno de las aplicaciones informáticas. Un sprite no es más que un archivo único de imagen que contiene a su vez varias imágenes una al lado de la otra. Cuando el programa requiere mostrar una imagen en concreto, acude al sprite y toma del mismo la sección que comprende la imagen que necesita mostrar, obviando el resto.

El sprite principal de la página www.ammclaracampoamor.es

Esta práctica también puede aplicarse al diseño web mediante el uso de CSS. Las ventajas son, en primer lugar, que normalmente una sola imagen compuesta tiende a pesar algo menos que la suma de los pesos de los diferentes archivos de imagen individuales que lo componen. En segundo lugar, y más importante, es que la forma en que nuestra página solicita la imagen al servidor es mediante una HTTP request; es una operación sencilla y rápida, pero que cuenta con la limitación de que no puede realizarse más de una solicitud al mismo tiempo, de forma que si la página se compone de multitud de archivos de imagen que descargar del servidor, estas formaran una cola y se irán ejecutando una a una, con el consiguiente retraso en el tiempo de carga.

El principal inconveniente es que la preparación de los gráficos durante el diseño de la página es menos intuitivo. En vez de crear un archivo nuevo con cada elemento gráfico que vamos creando, hay que incorporarlo al sprite, aumentando el tamaño de este, y referenciar las coordenadas de ubicación del gráfico en el CSS de la página.

El sistema cuenta también con algunas limitaciones. En primer lugar, hay que tener en cuenta que todos los elementos gráficos que hagan uso del sprite deberán contar con el atributo display:block, lo cual puede suponer algunas dificultades en la composición de la página, principalmente en casos en los que convendría más usar display:inline por motivos de maquetación (parece que con la llegada de CSS 3 contaremos con un útil inline-block, pero actualmente aún no podemos beneficiarnos de su uso). Además, habrá que especificar la anchura y altura del elemento que corresponda a la imagen a mostrar, lo cual impide usar el sprite en casos en los que el elemento pueda cambiar de tamaño (en un menú desplegable, o similar), o en fondos en los que el gráfico se repite en ambos sentidos (x e y).

Una vez comprendidas las limitaciones y asimilada la técnica de trabajo, es una práctica muy recomendable para incorporar a los nuevos proyectos web que abordemos. Si se trata de reconstruir una página ya creada para optimizarla, también podemos probar con algún servicio automatizado, como el que ofrece la página SpriteMe. Aún no he tenido ocasión de probarlo.