Código de HTML para ampliar imágenes para un sitio web

Por laurel storm
Código de HTML para ampliar imágenes para un sitio web
Jupiterimages/Creatas/Getty Images

Ya sea que éstes creando un sitio web para vender tus productos o simplemente mostrándole a tus amigos las fotos de tus vacaciones, llegarás a la conclusión de que una imagen vale más que mil palabras. Al incluir muchas imágenes de gran tamaño en una página, ésta podrá quedar desordenada, lo cual frustrará a los usuarios. La solución consiste en mostrar versiones más pequeñas de las imágenes en la página a través del uso de un simple código HTML y ligarlas a otras más grandes.

Vinculango imágenes grandes

La forma básica de utilizar código HTML para agrandar la imagen consiste básicamente en vincular a cada imagen de gran tamaño a una versión más pequeña de la misma, llamada "thumbnail". Cuando los lectores hagan clic en una imagen pequeña, ésta se cargará grande en tu pantalla para volver a la página anterior, utiliza en tu navegador el botón "Atrás". Este código hace uso de las etiquetas de HTML y .

Beneficios

Existen múltiples beneficios para vincular imágenes de gran tamaño a través del uso de imágenes en miniatura. Dado que las imágenes de gran tamaño no se incluyen directamente en el sitio web, cada página se carga más rápido, reduciendo el riesgo de que los visitantes experimenten conexiones lentas y pierdan la paciencia, generando así que decidan visitar un sitio diferente. Además, los usuarios decidirán por sí mismos si desean cargar imágenes de mayor tamaño en lugar de que se les imponga y sobre todo para los que utilizan conexiones con límites de descarga, así como aquellos que pagan por su conexión en función de la cantidad a descargar. Éstos usuarios no se exceden del límite para no tener que pagar dinero extra si no lo desean.

Consideraciones

El código básico se fundamenta en los visitantes que utilizan el botón "Atrás" para regresar a donde se encontraban. Esto puede confundir a algunos usuarios que podrían cerrar la ventana que contiene la imagen de gran tamaño y por lo tanto no hay manera de volver a la página anterior. Una alternativa es abrir cada imagen grande en una ventana nueva, aunque esto puede confundir a los usuarios del mismo modo ya que puede que no se den cuenta de la apertura de la ventana y se pregunten por qué su botón "Atrás" no funciona. Otra alternativa es crear un archivo HTML para cada imagen más grande y un enlace a este archivo HTML en lugar de ir directamente a la imagen. Esto permite incluir un enlace que conduce de nuevo a la página anterior con cada imagen, logrando sencillez en la navegación.

Alternativas

Tanto CSS como JavaScript ofrecen maneras de agrandar las imágenes en la misma página en lugar de forzar al usuario a navegar por una nueva. La desventaja de este método es que se basa en la inclusión de imágenes de gran tamaño dentro de la página las cuales se encuentran ocultas hasta que el usuario interactúe con las imágenes en miniatura. Si un lote de imágenes están en la página, lo que aumenta es el tiempo de carga de la página de forma exponencial. Sin embargo éste método puede que no funciones para los usuarios que visiten su página con un navegador antiguo o desde sus teléfonos inteligentes.