Sprites, tips y mejores prácticas

Tabla de contenidos

No es una técnica nueva, pero el uso de sprites CSS, en lugar de un conjunto de imágenes sueltas/individuales más pequeños, acarreara como beneficio, una mejora en el rendimiento de las páginas web y mantendrá las cosas más organizadas. Veamos algunas de las mejores prácticas y algunas herramientas útiles para el flujo de trabajo con sprites.

En términos de CSS, sprite es un archivo grande que contiene varias imágenes para ser utilizados en distintos lugares del sitio web, el ahorro de tiempo de carga y espacio web, es muy significativo con el uso de esta técnica.

La característica principal de la utilización en las hojas de estilo CSS la técnica Sprite es que el servidor sólo tiene que enviar un archivo de imagen que contiene todas las imágenes, y no una serie de imágenes individuales – ya través de CSS puede mostrar cualquier pequeño segmento de ese archivo como fondo de un elemento, evitando de esta manera, las peticiones HTTP al servidor por cada una de las imágenes separadas.

Es importante mantener el número de peticiones HTTP de un sitio lo más bajo posible, ya que los navegadores sólo pueden hacer un número limitado de solicitudes de cualquier servidor al mismo tiempo.

Combinando las imágenes en un solo archivo, no sólo se va a disminuir considerablemente el número de peticiones HTTP, pero también disminuirá el tamaño total del archivo de las imágenes.

Enfoques

Hay dos enfoques «comunes» al utilizar la técnica sprites: hacerlo antes o después de la creación del sitio.

La primera: comenzando a la par con el proyecto, es decir de abajo hacia arriba, para ello se va a tener que actualizar el CSS para adaptarse, a medida que avanza el proyecto.

La segunda: como alternativa , se puede crear todas las imágenes como archivos separados, lo que hace a la edición de ellos mucho más sencillo. Una vez que el sitio este construido con todas las imágenes por separado, lo que queda es compilar de forma manual, (o utilizar una herramientas para ello)

Basado en mi experiencia, yo recomendaría utilizar siempre la segunda opción, ya que es más escalable.

Tips

Mantener todo organizado

Al colocar las imágenes en Photoshop (o cualquier otra herramienta que se este utilizando) es una buena idea tratar de organizar las cosas con la mayor claridad y facilidad posible. el redondeo (en tamaño) de las imágens a ser utilizadas es importante. Otro punto importante es el espacio entre imágenes, se debe intentar una cierta cantidad uniforme de espacio entre imagen e imagen. Esto ayudara al momento de escribir todo el CSS que lo acompaña, ya que no se tendrá que mantener la medida desiguales ni recordar coordenadas complejas.

Esperar hasta el final para definir todas imagenes con la técnica Sprite

Si se pone todas las imágenes en sprite, pasando bastante tiempo escribiendo el CSS y luego se decide/necesita una edición de imágenes, esto puede puede causar serios problemas, sobre todo si las imágenes necesitan un cambio de tamaño o redimencion, lo que significa que se tendrá que invertir mucho tiempo y esfuerzo en volver a definir posiciones.

El nombre de las etiquetas es fundamental

Si se utiliza Photoshop u otros editores de imágenes, entonces es una buena idea para mantener las capas de cada uno de sprites muy bien etiquetados y agrupados, así todo está muy claro si se tienen que modificar más adelante.

Esto debería ser una regla general para la mayoría de los diseñadores. Esto ahorra tiempo en el etiquetado si se ha tenido una hoja de estilos con sprites muy grande.
Por el lado del código CSS las etiquetas son definitivamente necesarias para confirmar que la imagen sprite se está seleccionado por el código/nombre respectivo.