En El Webmaster comentan unos pocos trucos expuestos en Sentido web, originalmente mostrados en Codeitred, acerca de como optimizar la carga de nuestro sitio web.

De los allí vertidos discrepo en la implementación de uno de ellos. La precarga de imágenes creo que es mejor hacerla ocultándolas sin especificar dimensiones ya que así evitamos trabajo extra del ordenador del cliente. Además tampoco generamos un elemento que, aunque tenga unas medidas mínimas como recomiendan de 1×1, puede alterar el orden o incluso mostrarse como pequeños puntos en algunos navegadores.

Para usar este método pongo al final de la página index y antes del cierre del body:

  1. <img class="hideimage" src="images/nombre_de_la_imagen.jpg" alt="texto_alternativo" tit="titulo_de_la_imagen"/>

esto lo repito con todas las imágenes que quiero precargar.

En el CSS:

  1. .hideimage {
  2.     display: none;
  3. }

Luego en cada página cada imagen tendrá su propio ID que será referenciado en el CSS:

  1. #foto2 img {
  2.     position: relative;
  3.     top: 0;
  4.     left:-5%;
  5.     width:100%;
  6. }

Al no haber establecido antes un tamaño basta poner el witdth en 100% para que se establezca automáticamente el height en 100%, de esta manera se redimensiona la imágen de acuerdo al tamaño de la pantalla. Aunque también es posible darle las medidas exactas.

Esta técnica está aplicada en www.axiscentreclinic.com

Deje una respuesta