Hace unos meses publiqué un post sobre como añadir los botones de redes sociales a WordPress. En aquella ocasión indiqué como hacerlo añadiendo una imagen por cada red social, sin embargo, si has analizado tu Web con el Google Page Speed, habrás visto que se puede mejorar la velocidad de carga de tu sitio combinando las imágenes en objetos móviles CSS, usando los llamados sprites. En este post explicaré como combinar diferentes imágenes de forma fácil para aquellos que no sepan sobre CSS.
La técnica consiste en utilizar una misma imagen de fondo para cada enlace y decirle al navegador que muestre sólo una parte concreta de ese fondo para cada enlace. Por ejemplo, en el caso de mi blog, tanto los iconos de redes sociales como los de las categorías son una sola imagen.
En primer lugar lo que debes hacer es unir todas las imágenes en una, mediante algún editor de imágenes como illustrator, Paint shop pro, etc. Una vez que has creado la imagen anota cuál es su tamaño en pixeles y cada cuántos pixeles la quieres dividir, en el ejemplo todas las partes tienen el mismo tamaño, aunque pueden ser de diferente tamaño.
A continuación debemos crear mediante CSS diferentes selectores de ID, uno para cada uno de los enlaces en los que vamos a dividir la imagen. (El selector de ID va precedido de # y el nombre que le otorguemos, y servirá para que cuando añadamos el código HTML, nos baste con indicar el ID de cada enlace, para que automáticamente le dé el formato que hayamos otorgado a ese ID) [Leer más…] acerca deCombinar imágenes en objetos móviles CSS de forma fácil