Tutorial sobre CSS Sprites
Como sabrás si me lees de continuo me gusta mucho el tema de la optimización web; el WPO (Web Performance Optimization u Optimización del tiempo de carga).
Este mini tutorial pretende explicar cómo optimizar una de esas cosas que son tan importantes hoy en día en un sitio web: las imágenes, pero de cara a CSS.
¿Qué sería de nuestro sitio web sin imágenes? Ya sea en el propio contenido o como elementos del diseño, son imprescindibles (Salvo que lo hagas a lo MotherFuckerWebsite, entonces no).
¿Qué es un CSS Sprite?
No se puede entender qué es un CSS Sprite sin explicar el concepto, así que vamos allá.
No te dejes llevar por el nombre, te puede colapsar el cerebro y aún así no entender qué es un CSS Sprite. En Inglés se utiliza «Sprite» para un concepto bastante diferente de lo que realmente se aplica en este caso. Un CSS Sprite es una gran imagen. Seguro que has visto cientos de veces el efecto de «encendido» y «apagado» (o de activo y no activo) en los botones o enlaces de la web, ¿A que sí?
Esta idea, si la realizamos con dos imágenes, ralentiza el tiempo de carga (milésimas de segundo, pero lo hace); si sumamos varias veces este efecto por todo el diseño de nuestro sitio web tenemos un tiempo de carga bastante peor de lo que podríamos tener.
Espera, explícame esto mejor.
¿Por qué utilizar CSS Sprites?
Como digo, cada vez que creamos un efecto de este estilo sin CSS Sprites llamamos a dos imágenes distintas: una para «apagado» y otra para «encendido».
Este efecto conlleva dos peticiones HTTP y un efecto «feo» que da la extraña (y nada agradable) sensación de «carga por trozos». Explico esto último: Si las dos imágenes que componen este efecto de «Encendido» y «apagado» de nuestro botón (por ejemplo, se puede aplicar en otras cosas que no sean botones) son grandes, entre un estado (encendido) y el otro (apagado) habrá un salto proporcional al tiempo de carga de la segunda imagen.
Veamos un ejemplo.
Mi idea, es crear un botón sólo con imágenes (en ocasiones es necesario por el tipo de diseño que estamos maquetando); una para el botón en su estado por defecto, donde no interactuamos con él; y otra para el botón en el estado «hover», cuando posamos el ratón encima.
El HTML sería tan sencillo como esto:
< !doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Tutorial CSS Sprites dariobf.com</title> </head> <body> <h1>Tutorial CSS Sprites por dariobf.com</h1> <a class="boton" href="https://www.dariobf.com">Aquí el texto del botón, en este primer ejemplo no se mostrará.</a> </body> </html> |
Como ves, un simple enlace con una clase, desde la que modificaremos con CSS las propiedades para poner las imágenes al botón.
<style> .boton { display:block; text-indent: -9999px; width:250px; height:100px; background:url(boton_off.png) center no-repeat; } .boton:hover { background:url(boton_on.png) center no-repeat; } </style> |
Si te fijas, tenemos dos selectores: «.boton» y «.boton:hover»; con el primero aplicamos las reglas necesarias al botón por defecto, dimensiones (las mismas que las de nuestra imagen), el text-indent que hace «desaparecer» el texto hacia la izquierda (si usas una imagen sin texto no es necesario), y el fondo.
En el primer selector el fondo llama a la imagen «boton_off.png», nuestra imagen por defecto, mientras que el selector «.boton:hover» se llama a otra imagen, con un efecto contrario.
Para entender el funcionamiento échale un vistazo al ejemplo. Es posible que si tienes una conexión muy rápida no aprecies la carencia que te menciono arriba; sin embargo, si abres el depurador de tu navegador verás que esa página realiza una petición HTTP por cada imagen (2).
Mismo ejemplo, aplicando CSS Sprites
Ahora vamos a repetir el mismo ejemplo pero aplicando CSS Sprites. Como digo, es mucho más óptimo (las pequeñas cosas marcan la diferencia) de cara a optimizar nuestro tiempo de carga, tal y como expliqué en el tutorial de WPO.
En este ejemplo el HTML sigue siendo el mismo, misma idea.
En cuanto al CSS quedaría así:
.boton { display:block; text-indent: -9999px; width:250px; height:100px; background:url(boton_spriteCSS.png) center no-repeat; background-position:0 0; } .boton:hover { background-position:0 -100px; } |
Hemos cambiado las llamadas a ambas imágenes por una sola, la del estado por defecto (.boton) y asignado la posición del fondo a ambos selectores.
El funcionamiento de background-position es muy sencillo; recibe dos parámetros, la posición del eje X y la del eje Y, respectivamente.
Como nuestra imagen está dispuesta en vertical, al selector hover le tenemos que decir que la imagen subirá 100 píxeles (es lo que mide el botón); de ahí la regla CSS background-position:0 -100px.
Puedes ver el ejemplo aquí.
Aplicaciones de los CSS Sprites
Los usos más comunes son dos; el del ejemplo superior y el de los iconos. Si gestionas muchas redes sociales, por ejemplo, puedes utilizar un CSS Sprite que agrupe todos los iconos de ellas y utilizar CSS Sprites para llamar a las imágenes (el trozo del Sprite) que necesites.
Espero que se haya entendido bien el ejemplo, si te ha sido útil no olvides compartirlo. Si tienes algún problema o no entiendes algún concepto déjame un comentario, intentaré ayudarte.
Muy buen contenido, excelentemente bien explicado, sin embargo me hubiese gustado ver la agrupación de las imágenes, para que quedara más obvio (hablando visualmente) y/o explicar la manera de agrupar las imágenes ya que no todos saben (o sabemos) o somos expertos en Web o herramientas de diseño.
Sin embargo es sólo una opinión; nuevamente quiero hacer hincapié en que el contenido es excelente y me agradó mucho. Estaré siguiendo tus entradas.
¡Saludos!