Trabajando 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, normalmente para navegar a otra página web o realizar otras acciones. Generalmente, este enfoque es necesario al trabajar con tiendas en línea. Los usuarios se acostumbran a hacer clic en 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:

• View the Code
• Open the Live Page

En este ejemplo, la etiqueta <a> especifica la URL a la que enlazar en el atributo href, y la etiqueta <img/> especifica la imagen que se mostrará. Cuando el usuario hace clic en la imagen, el navegador navegará a la URL especificada en el atributo href.

Pie de foto de imagen

Puedes utilizar los elementos HTML figure y figcaption para asociar un pie de foto 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 a 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;
• Usar formatos de archivo apropiados. Generalmente, JPEG se utiliza para fotografías, PNG para gráficos e imágenes con transparencia. Evitar archivos BMP o TIFF más grandes;
• Comprimir 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.