All about images

Images: modern web design would be lost without them. They're essential for content, but also for interface and decorations. There are many ways to display and use them. Here I made a short series of articles about images in HTML specifically, that I hope will help you learn something new about image-related tags and their sometimes unknown features.

Without further ado, let's introduce them!

<img> + src element

<img> - Without doubt the most common way to add an image to an HTML document. It's a self-closing tag that requires a src attribute, which specifies the URL of the image file.

<img src="path/to/image.jpg" alt="image description" width="500" height="300">

Read the article Images with <img> tag (coming soon).

<img> + srcset element

<img> with srcset - The srcset attribute lets you provide multiple versions of an image with different resolutions, so the browser can choose the most appropriate version based on the device's screen size and resolution.

<img src="path/to/small_image.jpg"
  srcset="path/to/small_image.jpg 500w,
          path/to/medium_image.jpg 800w,
          path/to/large_image.jpg 1200w"
  alt="image description">

Make sure to read the "Differences between img srcset and picture" at the end of this article!

Read the article Images with <img> tag - advanced features (coming soon).

<figure> element

The <figure> tag is used to group images and their descriptive text or captions. You can use this tag along with the <figcaption> tag to add a caption to the image. You can imagine it like a <div> containing an image and a text, but semantically meaningful (<div>s don't have a semantic value).

<figure>
    <img src="path/to/image.jpg" alt="image description">
    <figcaption>Caption for the image</figcaption>
</figure>

Read the article Images with <figure> tag (coming soon).

<picture> element

The <picture> tag provides multiple versions of an image file that differ in size, resolution, or format. The browser will choose the best fit for the device it is running on.

<picture>
    <source media="(min-width: 768px)" srcset="large_image.jpg">
    <source media="(max-width: 767px)" srcset="small_image.jpg">
    <img src="default_image.jpg" alt="image description">
</picture>

Make sure to read the "Differences between img srcset and picture" at the end of this article!

Read the article Images with <picture> tag (coming soon).

imagemap element

I tricked you: there is no imagemap tag out there, but only a combination of <img> with the tags <map> and <area> - These tags are used to create image maps, which are images with custom clickable areas that can be used for links or action triggering purposes. The <map> tag contains one or more <area> tags that define the various areas.

<img src="path/to/image.jpg" alt="image description" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="0,0,50,50" href="page1.html">
<area shape="rect" coords="50,50,100,100" href="page2.html">
</map>

Differences between img srcset and picture

The <picture> and <img> with srcset are really similar: they both allow you to provide multiple versions of an image with different resolutions. However, there are a couple of differences that I personally find between the two:

1. Flexibility: <picture> is slightly more flexible than <img> with srcset because it allows you to provide alternative image sources in different formats, such as WebP or SVG, based on browser support. You can also provide multiple <source> tags with different media queries, enabling you to fine-tune the images served to different devices.

2. Syntax: The syntax for using <picture> is slightly more complex than that of <img> with srcset. You need to include both <source> and <img> tags within the <picture> element. But in complexity, I must admit that lots depends on personal preferences.

Here's an example where the browser supports WebP images and the viewport is at least 768 pixels wide, large_image.webp will be loaded as the primary image. Otherwise, large_image.jpg will be loaded as the fallback image.

<picture>
  <source 
    type="image/webp" 
    media="(min-width: 768px)" 
    srcset="large_image.webp 1200w">
  <img src="large_image.jpg" 
    alt="image description" 
    width="1200" 
    height="600">
</picture>

In addition, here's an example using the <img> tag with srcset, offering the same thing as the above example.

<img src="large_image.jpg"
     srcset="large_image.webp 1200w"
     sizes="(min-width: 768px) 1200px, 100vw"
     alt="image description"
     width="1200"
     height="600">