HTML5 Image Tag

Test your understanding on image tag in HTML5

An MCQ assessment and code analysis:

Coding scenario:

Resolution switching and responsive images

In the case where we open a web page on a mobile phone, there’s no need to embed large-sized images on our website. Conversely, when viewed bigger than its original height, a small raster image tends to appear grainy (a raster image is a fixed number of pixels wide and a fixed number of pixels thick).

In comparison, displaying a large picture on a screen with a considerably smaller size for which it was intended will cause wastage of bandwidth. Even so, certain systems have high-resolution displays that need larger images for the displayed result to appear well.

To solve these concerns, the img tag introduces two attributes: srcset and sizes, to provide additional source images along with media conditions (explained ahead) to help the browser choose the right resolution image for the right screen size.

We explain the above with a coding demo:

Explanation

The srcset attribute defines the set of images that the browser can select from according to its viewport width and what size each image is from the list of images available. Each piece of image information is separated from the previous one by a comma.

The syntax is as follows:

srcset="image_file_source width1(unit w),
        image_file_source width2(unit w)"

The $w$ unit is the image’s real size, which can be found by inspecting the image file on your computer (e.g., on a Mac you can select the image in Finder and press Cmd + I to fetch the info screen).

In our example, https://www.educative.io/udata/Mwq2QELRRw9/butterfly-2049567_640.jpg and , https://www.educative.io/udata/GQZ8amGyGgW/butterfly-2049567_1280 (1).jpg are both just image source links we’ve kept at the backend, nothing fancy. :)

Via this, we can provide multiple image files to the browser, all of which display the same content but contain different pixel numbers (resolution switching).

The sizes attribute specifies a set of media conditions (e.g. screen widths) and determines what image size would be best to select when certain media conditions (explained below) are true.

The syntax is as follows:

sizes"(a_media_condition) slot_width(unit w)"

A media condition defines a potential state in which the screen may be in. In this case, by specifying (max-width:600px) we are saying “when the viewport width equals $600px$ or less”.

The width slot is the width of the slot the image will fill when the media condition is true (480px).

Try viewing the browser at different screen widths and see how the image responds. You can see for yourself in the example given below as well, but make sure to give it a try yourself too! :)