Reducir 80% la carga de Imágenes en 5 minutos con Rollovers

L80385-flash-superhero-logo-1544En las páginas web cada vez introducimos más imágenes y más iconos, y por cada una, tiene que hacer una llamada al servidor, lo que conlleva una sobrecarga a considerar, teniendo en cuenta la cantidad de iconos que se usan actualmente. Existen diferentes formas, para minificar la carga, la que voy a indicar

Aunque existen diversas formas de minificar la carga y las llamadas para la carga de imágenes, en este caso vamos a indicar como realizarlo con rollovers, aunque en la mayoría de los casos aconsejaría con imágenes vectoriales (svg) y convirtiéndolas en fuentes para el css.

En el caso de que nuestra web tenga muchas imágenes pequeñas, iconos o animaciones, y estemos realizando muchas llamadas al servidor, podemos optimizar todo esto:

  1. Copia todas las imágenes a una sola más grande, que será la que llamarás

 

  1. Optimiza dicha imagen, para que no tenga gran peso, pero sin perder calidad. Ten en cuenta en que formato se está guardando la imagen. Intenta no usar bmp o png.

 

  1. Realiza las llamadas a dichos icónos e imágenes con CSS mediante las coordenadas de background. Los tamaños suelen ser proporcionales.

 

 background-position: 0 -32px;

 

Os dejo este ejemplo hecho por alguien en Fiddle: http://jsfiddle.net/simurai/cgmce/

Para poderlas crear, podéis hacerlo mediante editores de imágenes como photoshop o con algunas páginas web, donde incluso nos indicarán las coordenadas. Una de ellas es: http://spritegen.website-performance.org/

 

Deja un comentario