Extendiéndonos un poco más sobre nuestro post de cómo Aumentar velocidad de carga de mi web vamos a dar algunos consejos para reducir el número de peticiones al servidor y que de este modo nuestra web cargue más rápido, reduciendo el tiempo de esperapara descargar los recursos que la componen.

CSS Sprites:

A “grosso modo” es una imagen compuesta de varias imágenes, por ejemplo si los logotipos de redes sociales de nuestra web tienen todos le mismo tamaño, podríamos juntarlos todos en una imágen y así cargar una sola, reduciendo a la vez tanto el peso general como el haber generado una sola petición al servidor.

Modo de empleo:

Juntar todas las imágenes que queramos en el Sprite.

Como funciona CSS Sprites?

Básicamente, reúnes todas las imágenes de una página, hovers, backgrounds, etc… y generas una sola imagen.

Con CSS y el atributo background puedes “mover” esta imagen para mostrar la parte de la imagen que necesitas, haciendo una especie de máscara.

Menu1

Menu2

.menu1 { background:url(menu.png) 0 0 no-repeat;

.menu2 { background:url(menu.png) -40px 0 no-repeat;

Tratamiento de imágenes:

::NO escalar usando CSS o HTML.

Ejemplo: <img src=”img1.jpeg” width=”30” height=”30” alt=””/> ó <img src=”img1.jpeg”style=” width=’30’; height=’30’;” alt=””/>

img1.jpeg es de 400×400 originalmente. Deben usarse <img> ajustadas a su mostrado.

::Especificar los atributos “Width” y “Height”. Esto reduce el reprocesado de la imagen en el navegador, evitando que tenga que adivinar el tamaño que ocupa dentro del documento HTML.

::Resolución de 72ppp y jpeg si es posible. La diferencia gráfica es inapreciable en imágenes de menos de 600×600 y reducimos su peso de forma muy notable.

En el proximo post os hablaremos de la optimización desde el propio servidor, mejoras sencillas que os ayudarán a que vuestros usuarios naveguen más rápido y ahorréis ancho de banda en el servidor.