Optimización de Imágenes

La optimización de imágenes es muy importante a la hora de la carga de una página web, entre mas imágenes tengas en una página web no importando de que tamaño sean, tardará mas tiempo. Pues el navegador las irá mostrando de una en una junto con los scripts de la página y el código CSS.

Y para reducir el número de imágenes existe un método en CSS para posicionar imágenes mediante coordenadas X y Y. Permitiendo colocar varias imágenes en una misma y poder mostrarlas por separado.

Voy a mostrar un ejemplo sencillo que haré con el traductor para el blog. Este traductor utiliza nueve imágenes, que muestra todas por separado:


Por lo que al cargar la página nos restará velocidad de carga así que vamos a unirlas todas en una única imagen:

Ahora que ya tenemos una sola imagen resta colocarla en el traductor, así que comenzaremos con ver como se coloca:

[1] Primero debemos conocer el ancho de la imagen o imágenes, en este ejemplo las imágenes son del mismo tamaño(29px), así que si quiero mostrar solo la bandera de japón tengo que sumar 29 seis veces ya que la coordenada 'X' va en negativo o avanza hacia la izquierda, a lo que nos da 174px:

<div style='width:30px;height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIjcu9uWTW98TBIu2vw8H1jh-B1uLG6OiUT80D4gya3M2kT06fn14Ig_qE90hCWL_Nb3lQ-u_T5Hlyzi2u_uRZEE_3VA_GWqlBl_rPfRtb5ZzSiaYxGNpOxCqBRG9fv2bRFRj9TM7fW61t/s1600/tra.png) 174px 0px;'></div>

Y para la bandera de Inglaterra solo avanzaria una bandera o 29px:

<div style='width:30px;height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIjcu9uWTW98TBIu2vw8H1jh-B1uLG6OiUT80D4gya3M2kT06fn14Ig_qE90hCWL_Nb3lQ-u_T5Hlyzi2u_uRZEE_3VA_GWqlBl_rPfRtb5ZzSiaYxGNpOxCqBRG9fv2bRFRj9TM7fW61t/s1600/tra.png) 29px 0px;'></div>

Asi podrás reutilizar la misma imagen en las nueve banderas del gadget.

[2] Pero existe el inconveniente de que la imagen no puede tener enlaces debido a que esta de forma de fondo, para esto podremos usar una imagen en PNG totalmente transparente para colocarle de fondo la imagen única:

<a href='http://santyweb.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ4sDL-KWu29nNsa8wrCCfDvIu-vPOpwaHvNOEPACLepREjpYr44ko7B4XAujir_ZvBUSVPf_FUDtljC6A-XUHcui3FZXDimBw2wVHRwj6jEe1XNQHdwn8P7TV0cMYlmMShan8UYZA7oDQ/s1600/blank.png' style="width:30px;height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIjcu9uWTW98TBIu2vw8H1jh-B1uLG6OiUT80D4gya3M2kT06fn14Ig_qE90hCWL_Nb3lQ-u_T5Hlyzi2u_uRZEE_3VA_GWqlBl_rPfRtb5ZzSiaYxGNpOxCqBRG9fv2bRFRj9TM7fW61t/s1600/tra.png) 232px 0px;" alt='Italiano' title='Italiano (imagen con enlace y fondo de múltiples imágenes)'/></a>

Y con lo anterior el traductor optimizado quedaria de la siguiente forma:

Traducir el Blog a: