Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Special Purpose Images | Media and Tables
Ultimate HTML
course content

Course Content

Ultimate HTML

Ultimate HTML

1. Web Development
2. Tags and Attributes
3. Document Structure
4. Media and Tables
5. Forms

bookSpecial 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:

html

index

css

index

js

index

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

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 4
some-alt