Las miniaturas que no son miniaturas

La pregunta era: "Aunque estoy usando miniaturas para mostrar imágenes que luego se abren en otra ventana, mi página tarda mucho en cargarse ¿Qué pasa?"

Buena pregunta, ¿qué pasa? ¿Acaso no se supone que de esa manera agilizamos la carga del sitio?

La respuesta es SI pero ... hay un error conceptual; el código es este:

<a href="mi_imagen" target="_blank">
  <img src="mi_imagen" width="128" height="128" />
</a>

¿Estamos cargando miniaturas? NO. Estamos cargando la imagen tal como es, en este caso, de 700x700 y le colocamos en la etiqueta los atributos width y height para que el navegdor la muestre más pequeña y ese es el problema. La muestra pequeña pero carga la grande.

Es un problema de sentido común. Hay un archivo que tiene una imagen, un único archivo. El navegador lo carga y una vez cargado, le decimos que lo muestre de alguna forma y los atributos width y height o las propiedades CSS equivalentes, sólo hacen eso. Podríamos decirle que lo recorte, que lo coloque acá o allá pero siempre sería ese archivo único de 700x700.

Claro, una imagen de ese tamaño demorará un poco pero, si hablamos de muchas imágenes, las cosas se complican. Sólo diez imágenes de ese tamaño significarán uno tres millones de bytes. Es un número sin significado aparente pero, imaginen que una plantilla tiene unos cien mil bytes, una librería como Prototype otro tanto ¡y nos preocupamos por su tamaño!

Para usar miniaturas debemos tener miniaturas, es decir, dos archivos, uno con la imagen original y otro con la imagen reducida y entonces sí, el código será parecido pero diferente:

<a href="mi_imagen" target="_blank">
  <img src="la_miniatura" width="128" height="128" />
</a>

Donde los atributos width y hight sólo son un apoyo que permite que el navegador reserve el espacio necesario para cargar la imagen miniatura que tiene 128x128.

Muchos servicios de alojamiento de imágenes como ImageShack, Photobucket o Picasa nos dan la dirección URL de la imagen original pero a la vez, crean miniaturas automáticas que podemos usar. Blogger hace lo mismo, al subir una imagen se generan miniaturas de distintos tamaños que podemos usar y que reducirán sustancialmente el tiempo de carga.

Esto, no significa que siempre debemos usar miniaturas, significa que debemos entender qué estamos haciendo y cómo funcionan las cosas. Cargar una imagen grande y mostrarla pequeña es una técnica aceptable, puede servir, por ejemplo, para usar un zoom sencillo:

En estos casos, cargamos la imagen más grande y luego la manipulamos. Si usáramos una miniatura, el efecto se perdería ya que debería cargarse la segunda imagen.

En resumen, ambas técnicas son aceptables y no tienen nada de malo. Sólo hay que entender qué hacen y usar las herramientas adecuadas.