HTML5 and the Evolution of Images

Images were first seen by the general consumer in September of 1993 when the NCSA Mosaic browser became the first to include text and images on the same page. The inclusion of the now ubiquitous <IMG> tag to the HTML lexicon no doubt played a role in the explosive growth of the World Wide Web into the behemoth that it is today. As the Internet morphs into whatever it will eventually become, the trusty <IMG> element is starting to show its age. Sadly, vector graphics notwithstanding, that vast majority of image types have specific pixel based widths that cannot change. This makes them a poor fit for today’s exhausting variety of web-enabled devices and the myriad of resolutions that require images to stretch or shrink to fit devices’ wildly varying viewport sizes. Will the <IMG> element evolve or will it be joining the Beta VCR (uh…all VCRs) in the scrap pile of outmoded technological accessories? Only time can tell, but there are some techniques that we can implement to make our images more responsive.

Image Width and Height Attributes

The HTML5 specification did away with the align, border, hspace, and vspace image attributes. This was done presumably to push web designers towards CSS. Strangely, the Width and Height attributes remain intact even though these could easily be replaced by CSS. One compelling reason for doing so might be that an image can be considered to be part of a page’s content whereas CSS styling pertains to a page’s layout. So how you set an image’s dimensions does largely depend on what its intended purpose is.

So, if an image is part of your page’s content, then by all means include its actual height and width in the <IMG> tag. This does purportedly help the browser size the <IMG> element in the page before the CSS and/or image resources are loaded.

Otherwise, you should come up with a strategy for making your images responsive. The remainder of this tutorial will cover that subject.

An Easy, but Not Terribly Versatile Solution

The following CSS ensures that none of the images in a page extend beyond the width of their parent container. That way, if the parent container shrinks below the width of the image, the image will scale down along with it. The height: auto; setting preserves images’ aspect ratios as they contract and/or expand.

img {
    max-width: 100%;
    height: auto;
}

While it is incredibly easy to implement this solution, it depends on a browser’s image rendering capabilities, which can vary. By default each browser will attempt to apply aliasing to a scaled image in order to prevent distortion, but this can sometimes be a problem if we want the image to preserve its original pixelated form. CSS does offer us some assistance there too. The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions. It offers three values:

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

Here’s a little info on what each value means:

• auto: default value that uses the browser’s standard algorithm to maximize the appearance of an image.
• crisp-edges: the contrast, colors and edges of the image will be preserved without any smoothing or blurring. According to the spec this was specifically intended for pixel art. This value applies to images scaled up or down.
• pixelated: as the image changes size the browser will preserve its pixelated style by using nearest-neighbor scaling. This value only applies to images that are scaled up.

Using CSS Media Queries

CSS media queries were specifically created to tailor CSS towards specific viewport sizes. I have personally used this approach and find it to be quite serviceable.

<style>
/* For width smaller than 400px: *
#image {
    background-image: url('img_smallflowers.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    #image {
        background-image: url('img_largeflowers.jpg');
    }
}
</style>

The min-device-width property also works, but it checks the device width rather than the browser width, so the image will not change when you resize the browser window.

Using the <PICTURE> Element

HTML5 offers a new <PICTURE> element that offers declarative support for responsive image presentation based on the viewport size without the need for additional CSS or scripting. It employs a media attribute to select the image source based on a media query. You can also nest an <IMG> inside of the <PICTURE> tags to set an image to display when none of the media queries apply or for browsers that do not support the <PICTURE> element.

The following HTML would display an image of a Maserati in three different sizes, based on the minimum viewport width:

<picture>
  <source media="(min-width: 650px)" srcset="/imagesvr_ce/1640/Maserati_GranTurismo-large.jpg">
  <source media="(min-width: 465px)" srcset="/imagesvr_ce/7877/Maserati_GranTurismo-medium.jpg">
  <!-- img tag for browsers that do not support picture element -->
  <img alt="Maserati_GranTurismo-small (49K)" src="https://assets.htmlgoodies.com/uploads/2021/04/Maserati_GranTurismo-small.jpg" height="216" width="350" />
</picture>

Conclusion

As the need for responsive design increases, there’s a good chance that we’ll continue to see more and more pure HTML solutions like the <PICTURE> element. In the meantime, judicious use of CSS media queries can work very well.