Working with Clickable Images, Captions, and Optimization

Clickable Images

Clickable images are images on a web page that can be clicked on, typically to navigate to another web page or perform other actions. Generally, you need this approach when dealing with online stores. Users get used to clicking on an image and getting a card with a complete product description and price.

In order to make an image clickable, you can wrap the <img> tag inside an <a> tag. For example:

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.

Image Caption

You can use the HTML figure and figcaption elements to associate a caption with an image on a web page. Here's an example:

• 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, you 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, JPEGs are used 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

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