Trabajar con Imágenes Clicables, Leyendas y Optimización

Imágenes clicables

Imágenes clicables son imágenes en una página web que pueden ser pulsadas, generalmente para navegar a otra página web o realizar otras acciones. Por lo general, este enfoque es necesario al trabajar con tiendas en línea. Los usuarios están acostumbrados a pulsar sobre una imagen y obtener una tarjeta con la descripción completa del producto y el precio.

Para hacer que una imagen sea clicable, puedes envolver la etiqueta <img> dentro de una etiqueta <a>. Por ejemplo:

En este ejemplo, la etiqueta <a> especifica la URL a la que se enlaza en el atributo href, y la etiqueta <img/> especifica la imagen que se muestra. Cuando el usuario pulsa sobre la imagen, el navegador navegará a la URL especificada en el atributo href.

Pie de imagen

Puedes utilizar los elementos HTML figure y figcaption para asociar un pie de imagen a una imagen en una página web. Aquí tienes un ejemplo:

• figure: el elemento contiene tanto los elementos figcaption como img;
• figcaption: especifica el texto del pie de foto, visible para los usuarios;
• img: especifica la imagen que se mostrará.

Optimización de imágenes

Esto es importante para las páginas web, donde los archivos de imagen grandes pueden ralentizar los tiempos de carga y hacer que el sitio web se sienta lento. Siguiendo los siguientes consejos, se puede mejorar el rendimiento general y la accesibilidad del sitio web.

• Redimensionar las imágenes al tamaño adecuado. Redimensionar las imágenes al tamaño en que se mostrarán en la página web en lugar de subir imágenes grandes y redimensionarlas usando HTML o CSS;
• Utilizar formatos de archivo apropiados. Generalmente, JPEG se usa para fotografías, PNG para gráficos e imágenes con transparencia. Evitar archivos BMP o TIFF de mayor tamaño;
• Comprimir las imágenes. Existen muchas herramientas en línea que pueden comprimir imágenes sin comprometer la calidad. Hacerlo antes de subir las imágenes al sitio web.

Nota

Puede utilizar las siguientes fuentes para comprimir imágenes: Optimización de gráficos rasterizados, Optimización de gráficos vectoriales. ¿Cuál es la diferencia entre ellos? - Considere esto en el próximo capítulo.