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.

In this example, the <a> tag specifies the URL to link to in the href attribute, and the <img/> tag specifies the image to display. When the user clicks on the image, the browser will navigate to the URL specified in the href attribute.

• figure - contiene los elementos figcaption e img;
• figcaption - especifica el texto del título, visible para los usuarios;
• img - especifica la imagen a mostrar.

• figure - element contains both the figcaption and img elements;
• figcaption - specifies the caption text, visible for users;
• img - specifies the image to display.

Image Optimization

This is important for web pages, where large image files can slow page load times and make the website feel sluggish. By following the following tips, we can improve the overall performance and accessibility of the website.

• Resize images to the appropriate size. Resize images to the size they will be displayed on the web page rather than uploading large images and resizing them using HTML or CSS;
• Use appropriate file formats. Generally, we use JPEGs for photographs, PNGs for graphics, and images with transparency. Avoid larger BMP or TIFF files;
• Compress images. There is a huge amount of online tools which can compress images without compromising quality. Do it before uploading images to the website.

Note

We can use the following sources to compress images: Raster graphic optimization, Vector graphic optimization. What is the difference between them? - We will consider this in the next chapter.