Imagens de Propósito Especial

Imagens clicáveis

Imagens clicáveis são imagens em uma página web nas quais se pode clicar, tipicamente para navegar para outra página web ou realizar outras ações. Geralmente, precisamos dessa abordagem ao lidar com lojas online. Os usuários se acostumam a clicar na imagem e obter um cartão com uma descrição completa do produto e preço.

Para tornar uma imagem clicável, podemos envolver a tag <img> dentro de uma tag <a>. Por exemplo:

Neste exemplo, a tag <a> especifica a URL para a qual se deve linkar no atributo href, e a tag <img/> especifica a imagem a ser exibida. Quando o usuário clica na imagem, o navegador vai para o URL especificado no 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 - elemento que contém tanto os elementos figcaption quanto img;
• figcaption - especifica o texto da legenda, visível para os usuários;
• img - especifica a imagem a ser exibida.

• 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.