¿No te has encontrado alguna vez una situación en la que piensas por qué tu página Web vá tan lenta? Uno de los problemas más frecuentes en el diseño de un sitio Web es la cantidad de peticiones HTTP que hace el servidor para cargar un recurso a una página, como una imágen. El 80% de la carga corresponde al servidor, mientras que el 20% se destina a cargar al cliente los archivos JavaScript, las imágenes y estilos CSS. Las imágenes que no estén optimizadas, o sea, que tengan un tamaño de archivo demasiado grande, provocan una gran carga al servidor a la hora de descargar la imágen desde su sistema de archivos, y eso se traduce en un enlentecimiento de la página.
Pero este artículo no hace referencia a las imágenes grandes, sino más bien a la enorme cantidad de imágenes que utiliza la plantilla, o el diseño de la propia página en sí. A la hora de cargar todas imágenes para visualizarlas, se generan varias peticiones HTTP, una por imágen, para que el servidor pueda descargar esas imágenes para que se muestren en la página, que como dije anteriormente, esto hace la página vaya más lenta que de costumbre.
Ahora bien, ¿cómo se mejora esto? Pues con una técnica llamada "CSS Spriting". Esto consiste en combinar todas las imágenes en una sóla y empleando las propiedades CSS de los fondos de imágen para poder sacar esa porción de la imágen a la página, haciendo así como que no pertenece a una imágen grande.
Explicar esto vá a resultar complicado, pues dependerá de las dimensiones que tendrá cada imágen. Lo más fácil sería colocar las imágenes de grandes dimensiones por encima, y por debajo se ván colocando las de menores dimensiones. Y si las menores cuentan con las mismas dimensiones, pues mira, ¡mucho mejor! Aunque ya te digo, esto es utilizar el Photoshop con la cuadrícula o las guías, y encajarlas.
También hay que mencionar que hay que cambiar cosas en el código HTML o PHP para eliminar todas esas imágenes con la etiqueta img y hacer que se visualicen como fondos mediante las propiedades CSS como background-image y mostrar esa porción del fondo mediante background-position: anchura altura.
¿Quieres ver un ejemplo? Pues mira a la barra lateral donde están los botones de contacto. Aunque en un principio veas 8 imágenes separadas, no es así. Todas estas imágenes están incluídas en una sola, inclusive las que cuando pasas el ratón por encima de ella.
En Internet también puedes encontrar herramientas para poder combinar todas las imágenes en una sóla y de ahí puedes sacar el archivo CSS resultante, o viceversa.
SpritePad
Arrastra las imágenes dentro del panel y, al mismo tiempo, verás que se actualiza el código CSS.
Sitio: http://spritepad.wearekiss.com/
CSS Sprite Generator
En esta página puedes subir todas las imágenes que tu quieras, y una vez que se han subido, puedes ver una previsualización de cómo quedará tu imágen, junto con los códigos CSS y HTML para que luego tú lo emplees en tu página.
Sitio: http://css-sprit.es/
Gracias a esta técnica tu página se cargará más deprisa, pues sólo necesita una petición para cargar la imágen. YouTube lo hace, y los sitios más profesionales también.
Comparte esto
¡No te pierdas nada sobre este blog! ¡Suscríbete por e-mail!