En 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:
- Copia todas las imágenes a una sola más grande, que será la que llamarás
- 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.
- 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/