Images with <img> tag - advanced attributes

In this second article about the <img> element we'll take a look at some advanced features that this tags allows us to use, some of them I bet you're not aware of. We'll not talk here about the alt (alternative text) attribute or accessibility, since we've already done it in the previous article (if you haven't, click here to read it).

Dimensions-related attributes

width and height attributes

I've started coding before table layouts. Back then inline styles was the barebone of web design. Then, when external stylesheets bloomed, everything style-related were stripped from html code. Only recently I found that specifying height and width attributes in images is actually a good practice, thanks to some recent css updates!

Specifying starting width and height helps dramatically in avoiding "layout shifts", these annoying and sudden changes in layouts caused by images loading and moving their surroundings, ruining often the user experience in heavy loading pages or in slow connections.

Defining image sizes before page load lets the browser leave that space blank, waiting for the image to load, instead of moving the remaining content afterwards.

Implications and details on this topic should require an article by its own, so I better cut here, but if you're interested I could write something about it: let me know in the comments.

srcsetattribute

This attribute tells the browser to choose the best image source between those listed. This choice can be based on

pixel density (nx): This is useful when you have images at different resolutions, and you want to display in normal resolution for normal-density screens (common screens and displays) or in hi-res for those with high-density ("Retina").

<img src="small.jpg"
  srcset="small.jpg 1x,
          medium.jpg 2x,
          large.jpg 3x">

width (w): specifies the width of the image file in pixels: the browser checks the width of the available space of the image's container and picks the file with the most appropriate resolution.

<img src="small.jpg"
  srcset="small.jpg 600w,
          medium.jpg 1200w,
          large.jpg 2000w">

This helps in reducing the size of the images being served, which can improve the performance of the website, user experience and It's great for making responsive images.

When using the srcset attribute, remember to provide a fallback src attribute which references an image that will work for all devices. This is necessary in case the browser doesn't support the srcset attribute or cannot choose an appropriate image from the list specified in srcset.

sizes attribute

When the sizes attribute is present, the browser iterates over srcset, and for each, it applies the first registered size that matches or the last size registered: based on the following code example, and given a screen width of 900px, the browser will do the following:

1. it checks the horizontal resolution (900px);

2. in sizes, it sees that it has to fall in the second condition (900px is greater than 640px but less than 1024px);

3. now it sees that at 900px resolution our image will be wide 50vw (450px);

4. it now goes into the srcset list and picks the image that is wide 450px or the one immediately larger (small.jpg, the first larger than 450px).

<img src="small.jpg"
  srcset="small.jpg 640w,
          medium.jpg 1024w,
          large.jpg 1200w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         1200px"
 alt="An example image">

I know, I know, it's a bit tricky, but if you're aiming at fast performances and/or you have quite large image files I think you should give it a try.

File's origin-related attributes

crossorigin attribute

It specifies that the image is being requested from a different server from the one that the web page is hosted on. This is mainly used to prevent security risks associated with cross-site scripting, asking the browser to use an anonymous CORS (Cross-Origin Resource Sharing) request to fetch the image. Without going too much into it, CORS is a security feature implemented by web browsers that helps protect users' data from being accessed by unauthorized sources.

<img src="https://example.com/image.jpg" crossorigin="anonymous">

The anonymous keyword specifies that requests for the resource won't include credentials (such as cookies or HTTP authentication information) and is the default behavior if the attribute is not set. The other possible value is use-credentials, but the topic goes way beyond the scope of this article.

Note only that this attribute is not exclusive to image files, since it can be applied to any other external source import, such as stylesheets and scripts.

Imagemaps-related attributes

What are imagemaps

Just to briefly introduce the concept (image maps are not so much used nowadays, so maybe you could not be familiar with them), an imagemap is a type of image that has clickable/hoverable areas to trigger an action or display additional information.

Take a world map, for example: you could define a shape for each country, each of them clickable to display data.

usemap attribute

This attribute specifies the name of an image map to use for the <img> element. this <map> element simply contains the coordinates of each area (you can define shapes or free forms and their coordinates.

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

ismap attribute

This attribute specifies that the <img> element represents an image map and the click coordinates are sent to the server as a URL query string. Honestly, this implementation is so rare that I've never found it.

Note: The ismap attribute is allowed only if the <img> element is a descendant of an <a> element with a valid href attribute.

<img src="image.jpg" ismap>

Loading related attributes

loading attribute

This attribute specifies how the browser should load the image using one of the possible values:

1. eager (default): the image should start loading immediately, even if it is off-screen. Useful if the image is essential for the content and should be loaded as soon as possible.

2. lazy: the image will start loading when the user scrolls near it. This can improve page first load performance by reducing the number of requests made upfront but slowing down during navigation.

<img src="image.jpg" alt="I load immediately">
<img src="image.jpg" loading="eager" alt="I load immediately too">
<img src="image.jpg" loading="lazy" alt="I load when you're near me">

Final Words

A lot of stuff for the (apparently) basic <img> tag, isn't it? But at least knowing what <img> can manage, beyond its basic application will give you an edge when dealing with advanced applications. At least, you know where to check now!

And if you want to take a look back to labeling and description attributes, remember that there's a first part to this topic!