Imágenes de Propósito Especial

Imágenes clicables

Las imágenes clicables son imágenes de una página web en las que se puede hacer clic, normalmente para navegar a otra página web o realizar otras acciones. Generalmente, necesitamos este enfoque cuando se trata de tiendas online. Los usuarios se acostumbran a hacer clic en una imagen y obtener una ficha con una descripción completa del producto y su precio.

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

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

Leyenda de la Imagen

Podemos utilizar los elementos HTML figure y figcaption para asociar la leyenda de la imagen o pie de foto a una imagen en una página web. He aquí un ejemplo:

• figure - contiene los elementos figcaption e img;
• figcaption - especifica el texto del título, 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 de la página y hacer que el sitio web parezca lento. Siguiendo los siguientes consejos, podemos mejorar el rendimiento general y la accesibilidad del sitio web.

• Redimensionar las imágenes al tamaño adecuado. Redimensiona 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 utilizando HTML o CSS;
• Utiliza formatos de archivo adecuados. En general, utiliza JPEG para fotografías, PNG para gráficos e imágenes con transparencia. Evita los archivos BMP o TIFF de mayor tamaño;
• Comprime las imágenes. Hay una gran cantidad de herramientas en línea que pueden comprimir imágenes sin comprometer la calidad. Hazlo antes de subir las imágenes a la web.

Nota

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