Course Content
Ultimate HTML
Ultimate HTML
Special Purpose Images
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, we 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, we 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
We can use the HTML figure
and figcaption
elements to associate a caption with an image on a web page. Here's an example:
index
index
index
figure
- element contains both thefigcaption
andimg
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.
Thanks for your feedback!