HTML: One Tag at a Time—IMG

It’s worth a thousand words.

Photo by NASA on Unsplash

In the early days of web design, the img tag did all of the heavy lifting for bringing visual designs to life. We didn’t just use images as illustrations, they were used to render buttons, borders, radius corners, and even entire user interfaces. Complex visual designs were done in PhotoShop. Then the “mock” was “sliced” into smaller images and reassembled with pixel precision using tables-based layouts and then later CSS-based layouts. The result was a mess of complex code that was brittle, hard to maintain, and slow to load. The designers were happy, the engineers were not. Thankfully CSS support has come a long way and we can apply nearly all of the visual treatments that images were used for with a few lines of code, and the image tag is back to its intended purpose; illustrative content.

Basic usage of img is very simple:

<img src="https://www.nasa.gov/sites/default/files/thumbnails/image/iss067e187085.jpg" alt="The International Space Station is pictured orbiting 258 miles above the Persian Gulf.">

There are two attributes that are required for the img tag; src and alt. The first tells the browser where to find the image to render and the second provides a short description of the image as a fallback in case the browser is unable to retrieve the image file. The alt attribute is also essential to comply with accessibility requirements.

Note that the tag is non-terminated, meaning it does have a closing tag. In some cases, you may see the /> at the end of the tag. This is used to terminate the tag. That terminating slash is an artifact of the days when HTML was required to be well-formed to comply with the requirements of XML. You can feel free to dispense with it from your code.

But wait! There’s more!

Image files can be very large and eat up significant chunks of data allotments for mobile service plans that do not have unlimited data. Large files also take a while to load and can slow down your website enough that people will just leave before they see your beautiful work in all of its glory. Fortunately, the standards body found a way to mitigate this very issue; srcset and sizes.

The srcset attribute allows you to set alternative images to use at specific viewport widths. You can also set whether an image is intended for standard or higher pixel density as found in retina screens and other high-density screens.

Here’s a simple example of srcset:

<img src="mtshasta.jpg" alt="Mount Shasta"
    srcset="mtshasta_480.jpg 480w, mtshasta_786.jpg 768w,
            mtshasta_1024.jpg 1024w, mtshasta_max.jpg 1280w
            mtshasta.jpg 345w"
>

This example demonstrates using width to set which image option to use. In this case the “w” refers to the width of the image, not the viewport. So the browser will determine which option to use based on the area available.

Here’s an example that incorporates a pixel density option:

<img src="mtshasta.jpg" alt="Mount Shasta"
    srcset="mtshasta@2x.jpg 2x"
>

This example supplies an image for mobile that is double the pixel density of the default 72 pixels per inch to ensure that high density screens display high quality images. Keep in mind that double and triple density images result in larger file sizes and will impact page load and bandwidth for your users. One complication with this method is that it is up to the browser to decide which option to choose, so you can’t be certain which image option will be displayed if you mix width and pixel density options in the srcset. Fortunately, there is another attribute that will allow you to offer more specific choices to the browser; sizes.

The sizes attribute allows you to incorporate media queries that can more accurately determine which image option to use:

<img src="mtshasta.jpg" alt="Mount Shasta"
    srcset="mtshasta_480.jpg 480w, mtshasta_786.jpg 768w,
            mtshasta_1024.jpg 1024w, mtshasta_max.jpg 1280w
            mtshasta.jpg 345w"
    sizes="(min-width: 800px) 800px, 100vw"
>

This example indicates to the browser that the image should not exceed 800px of area if the viewport is at least 800px wide, otherwise the image should take up the full width of the viewport if the viewport width is less than 800px.

The biggest drawback for using the srset and sizes attributes for image options is that you can’t be certain which option the browser will use because there are a number of factors that might result in the use of an image that is not ideal a specific device or viewport. You can use the picture element (to be featured soon) if you need to be able to specify the exact image the browser should use in specific conditions.

One more thing…

The last attribute that I want to discuss is the usemap attribute. Obviously you can link an entire image to a specific resource by wrapping an a tag around it. But there was a time when we wanted to be able to link to multiple resources with one image by detecting where within the user clicked and then getting that resource. Early implementations of these “image maps” used to require a combination of backend functionality to capture the coordinates the user clicked on and then return the relevant resource. This process tended to be slow because of the extra processing that had to happen on the backend to return the desired resource. Enter themap element and the usemap attrbute of the img tag.

To demonstrate this, I’ll need to cover a couple of bonus tags; map and area. The map element contains each area element that definse the coordinates within an image that should be linked. Note that these coordinates are pixel based and are based on the dimensions of the image, so the image dimensions have to remain fixed for all viewports.

The map attribute looks like this:

<map name="imagemap">
    <area shape="circle" coords="125, 125, 72" 
          href="home.html" alt="Go to the homepage">
</map>

To use the map with a specific image you would do this:

<img src="logo.png" alt="Our company logo" usemap="imagemap">

The name attribute is used to tell the browser which map to use as indicated in the usemap attribute of the img tag. The area element defines the shape of the area that is linked and in the case of a circle, the x (125px across) and y (125 pixels down) coordinates as the center of the circle’s location on the image and the circle’s radius (72 pixels from the center to the perimeter). There is also an href attribute that represents the resource you want to get and the alt attribute that is used to indicate where the linked area is leading to. Other shapes that you can define include rect and poly. Learn more about map and area from the great resources from the Mozilla Developer Network.

Now you might ask why would I want to use a map with an image? There are a number of cases where this could be useful. The areas register as links to the search engine crawlers so they would be indexed. The ability to limit links on an image to just a specific area is one way to incorporate “Easter Eggs” into your site, though you should have secondary ways for users to find content that is import since they may not find it otherwise.

Next, you might ask; is this even a good idea to use this these days? The answer to that is a bit more nuanced. As I already stated, you should not rely on these as the only link to important content. Add to that the fact that you cannot resize the image as you would in a responsive layout, and you may find that it is not worth using these at all.

Conclusion

That about covers everything I wanted to share about the image tag. Have fun making websites more beautiful and entertaining.