Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using Responsive Images in HTML5

Wednesday, December 27th, 2017 by Servage

responsive-designThe <picture> element has been part of HTML5 for a relatively long time. Surprisingly, the element is still quite rarely used, although it clearly has some benefits to it. Most importantly, you can choose which version of an image to load based on the screen size of a visitor’s device.

Responsive Images: The Old Way

Images are usually placed inside containers such as divs. If there is no CSS applied to the image, the image takes as much space as its dimensions are. In most cases, this causes the image to “overflow” the container div. The typical way of fixing this is to add “max-width: 100%” to the image. This resizes the image to be as wide as the container if it would otherwise be larger than the container. The same can also be done for the height of the image.

While this approach generally works, the size of the image in bytes does not change. Phones with small screen have to download the full-resolution version of the image, which slows down page loading times.

The New Way

Fortunately, there is an easy solution. The picture element supports multiple image files and media queries to choose which of the versions to load. The others are not downloaded. Have a look at the following example: <picture><source srcset=”small.jpg” media=”(max-width: 768px)”><source srcset=”large.jpg”><img srcset=”default.jpg”></picture>.

The picture element can have multiple source elements inside. The media attribute contains a typical CSS media query to decide which of the source images to load and display. In this case, the small.jpg image is displayed if the device’s viewport width is 768 pixels or less. Otherwise the large.jpg image is displayed, which is suitable for high-resolution desktops. Needless to say, the file size of the large.jpg is bigger, which makes it faster for mobile devices to load the smaller image.

If the device’s browser doesn’t support the picture tag, it will fall back and use the img tag and display default.jpg. At the time of writing, all major browsers support the picture tag. The only notable exceptions are Internet Explorer and Opera Mini.

This is all you need to optimize images based on the screen sizes of devices. The main benefit is to save bandwidth on mobile devices, although this approach will also benefit some desktop browsers and even the servers serving those images. The only downside is that you have to store multiple versions of the same image. However, there are many handy picture resizing tools available these days, such as www.picresize.com, that will do the work for you in just a few seconds.

Using Responsive Images in HTML5, 3.7 out of 5 based on 3 ratings
Categories: Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.