•  
  •  
  •  
  •  
  •  
  •  

Appropriate usage of picture and img tags within your website benefits you, your SEO efforts, but also your users. Since late 2017, more people have been browsing the internet using mobile devices vs desktop computers. This means that a single website may be viewed through dozens of different types of screens. Furthermore, not all of those devices are connected to high-speed Wi-Fi networks. It is important that your website is responsive and optimized for all types of screens and networks. Images can give your webpage the necessary lift to stand out of the crowd. However, it is important to know how to properly embed them. Responsive images are a de-facto standard now. As such, let’s explore the benefits of picture and img HTML tags, which are core technologies allowing for responsive images.

Graph of Mobile Share vs Desktop/Laptop Share Since Mid-2017
Graph of Mobile Share vs Desktop/Laptop Share Since Mid-2017

Why Simple Img Tags Aren’t Enough

The goal here is to grasp how to properly use picture and img tags. But first, we need to understand why there are two different tags in the first place. Picture tag’s older sibling—the img tag—was created with the inception of the web: in 1992 by Marc Andreessen, the co-author of Mosaic, the first widely used Web browser. Until this day, img tags are deeply-rooted in HTML. One of the main reasons is their ease of use; all you need is a src attribute pointing to the image you want to display.

<img src="https://your-website.com/your-image-path"

This approach worked great in the pre-mobile era when all screens were about the same size, and all users had similar connection speeds. However, this simplistic model permanently broke down with the emergence of smartphones, and the reason is two-fold.

Problem no. 1: Resolution Switching

Firstly, there is the issue of resolution switching. On one hand, website designers want to showcase their beautiful high-resolution images at full scale when viewed on large monitors. While such images can quickly grow in file size, large-screen devices usually have high-speed internet access, and their users are unlikely to notice any significant rendering delays. On the other hand, website designers also want their pages to load quickly on mobile devices, which can have internet speeds much slower than their desktop cousins.

This juxtaposition highlights the crux of the issue that lies with the simple img tag: the browser has only one image URL to work with. Pick an image that high-res but large, and you will hinder mobile performance. On the contrary, pick an image that is small in size but also low-res, and you will lose the delight that high-res, large screens can offer to your users.

Top-To-Bottom Slow Image Loading Issue
Top-To-Bottom Slow Image Loading Issue

Problem no. 2: Art Direction

Secondly, since smaller devices have screen ratios different from desktops and laptops, we now have to consider art direction. At its core, art direction is a technique of serving different images for different screen sizes. More often than not, an image that may be exquisite on a larger screen becomes so small on a smartphone that all the details are lost. The simple img tag forces us to become creative and find ways to visually crop the image on the fly using CSS, and other techniques.

Picture Tags Can Help With Art Direction
Picture Tags Can Help With Art Direction

What Can We Do?

Ultimately, the old-school img tag with a singular source URL does not work well in the modern web. It demands from us that we sacrifice image resolution in order to speed up mobile layouts. It also forces us to come up with creative solutions in order to adapt this compromised, singular image to a variety of screens to better showcase the focal points of the image. Fortunately, modern HTML already has tools to solve these issues. At our disposal, we now have the srcset and sizes attributes of the img tag, and a completely new HTML tag: the picture tag.

Modern Img Tags: a Tool for Resolution Switching

Srcset attribute is one of the best tools that web developers can use to solve for resolution switching. Instead of providing just one URL, web developers can now supply a list of URLs. This allows the browser to pick the best image. It is also important that all of these URLs represent images that contain the same art, and not cropped versions of it, as the browser will fit and scale the entire content of the resource.

<img srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1600.jpg 1600w"
     sizes="(min-width: 1280px) 600px,
            (min-width: 768px) 500px,
            100vw"
     src="image-800.jpg"
     alt="Munster Dom">

Srcset Attribute

The srcset attribute accepts a list of image URLs alongside intrinsic widths of their resources. The widths tell the browser exactly how wide is the image in pixels, denoted by the w symbol. In above example, the browser can choose between images that are 400px, 800px, and 1600px wide.

Sizes Attribute

The sizes attribute allows us to tell the browser how much space the image will take up on the screen. Since HTML is parsed before loading CSS, this gives the browser even more clues about which URL from the srcset collection is the best fit. We can use almost any length value, e.g. em, rem, pixels, and viewport width, but not percentage values. In this example, we are telling the browser that if the screen width is at least 1280px, the image will take up only 600 pixels. If the screen width is at least 768px, the image will take up only 500 pixels. Else, on mobile devices, the image will take up the entire width available.

How Do Browsers Interpret This?

When the browser parses this HTML, it will decide which URL to actually load. This decision is influenced by various criteria such as physical screen size, screen pixel density, zoom level, screen orientation, network speed, and combined with the specified sized attribute. Ultimately, the browser takes on the responsibility of optimizing rendered images to deliver the best experience possible for the users. All we have to do is give it a few URLs to choose from.

Which Browsers Support These Attributes?

You may be wondering which browsers actually support this great feature. Over 90% of all users have access to browsers that do. While the biggest offender here is Internet Explorer (IE), your images will still work properly due to the old-school src attribute.

Can I Use srcset? Data on support for the srcset feature across the major browsers from caniuse.com.

Picture Tags: a Tool for Art Direction

As we discussed previously in this article, art direction is a technique for serving distinct images (art) depending on the device being used. We should start off by mentioning on common mistake that lots of web developers make. While occasionally useful, you may actually not need the picture tag at all. Most of the time, in fact, your original image may be pleasant to look at on mobile devices, and none of the details get lost due to the small screen size. In these situations, simple img srcset and sizes attributes are all you need to improve the page performance. However, if you have an image that has a main focal point, and you think it becomes invisible on a smaller scale, then using the picture tag is how you can highlight the most important parts of your image.

<picture>
     <source media="(max-width: 767px)" srcset="close-up-image.jpg">
     <source media="(min-width: 768px)" srcset="normal-zoom-image.jpg">
     <img src="normal-zoom-image.jpg"" alt="Munster Dom"">
</picture>

Picture Tags

As you can see in the above snippet, picture tags are nested tags, whereas img tags are not. In other words, picture tags have an opening and a closing tag, and they contain child DOM elements: source tags and an img tag. In this example, if the screen width is at most 767 pixels, the browser will display the “close-up-image.jpg” image, and ignore all others. Else, if the screen width is at least 768 pixels, the browser will display the “normal-zoom-image.jpg”image, and ignore all others. The last img tag is there for backwards compatibility for browsers that do not support picture tags.

Art Direction Examples #2
Art Direction Examples #2

You may have noticed that the source elements use the srcset attribute, and not a src attribute. You may also ask yourself if this srcset attribute is in any way similar to the one of img tags, and the answer is yes! We can most definitely supply a number of URLs for each source tag, alongside the intrinsic widths of each image. If we want to, we can even add the sizes attribute as well.

<picture>
     <source media="(max-width: 767px)"
             srcset="close-up-image-200.jpg 200w,
                     close-up-image-600.jpg 600w,
                     close-up-image-1000.jpg 1000w"
             sizes="(min-width: 700px) 500px,
                    (min-width: 600px) 400px,
                    100vw">
     <source media="(min-width: 768px)"
             srcset="normal-zoom-image-700.jpg 700w,
                     normal-zoom-image-1200.jpg 1200w,
                     normal-zoom-image-1600.jpg 1600w"
             sizes="(min-width: 768px) 700px,
                    (min-width: 1024px) 600px,
                    500px">
     <img src="normal-zoom-image.jpg"" alt="Munster Dom"">
</picture>

How Do Browsers Interpret This?

When a compatible browser parses this HTML, it will pick a source tag first by using the media queries. Once a source tag is picked, it will then decide which of the srcset URLs should be loaded, according to the same logic that we discussed earlier.

Which Browsers Support These Attributes?

If you are again wondering which browsers support this feature, there is good news here as well. Just as with img srcset and sizes attributes, over 90% of all users have access to browsers that support picture tags. Again, the biggest offender here is Internet Explorer, but your images will still work properly due to the old-school img tag included inside the picture tag.

Can I Use picture? Data on support for the picture feature across the major browsers from caniuse.com.

The Uses and the Misuses of Picture Tags and Img Tags

It is clear that modern web gives us numerous tools that we can use to improve how we render images on our websites. While options are great, they can also cause confusion about how to properly use them.

Img Tags

<img srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1600.jpg 1600w"
     sizes="(min-width: 1280px) 600px,
            (min-width: 768px) 500px,
            100vw"
     src="image-800.jpg"
     alt="Munster Dom">

Do’s

  • Supply the srcset attribute with a few URL options to choose from. We can trust the browser to pick the right image no matter the device, its orientation, or the speed of the network.
  • Supply the sizes attribute with appropriate media queries. This will tell the browser how much screen estate will the image actually occupy. This will help the browser make an even-better informed decision.
  • Supply the src attribute with a fallback image URL. While most of the browsers support the srcset and sizes attributes, Internet Explorer does not, so make sure to support its users as well!
  • Last, but not least, srcset and sizes attributes of the img tag are meant to solve for the resolution switching dilemma. All of the supplied URLs should represent the same image (art), just at different resolutions. The browser will display the full image, but it will attempt to pick the best size.

Dont’s

  • While the srcset attribute allows us to supply many URLs, there is no need to create 100s of resolutions for a single image. While there isn’t one rule dictating just what resolutions are “the best,” you probably do not need more than 6-7. See Paolo Mioni’s excellent analysis of this topic.
  • You should not change the actual art represented in the various srcset URLs. If you need to show different art depending on screen size, picture tags are a better option.
  • Do not get intimidated by the srcset attribute! While it is slightly more complex than the old-school src attribute, it has obvious benefits. Forcing your users to download high-res 10MB images on mobile is not fair to them, but neither is sacrificing the image quality for desktop users. With srcset, you can make everyone happy!

Picture Tags

<picture>
     <source media="(max-width: 767px)" srcset="close-up-image.jpg">
     <source media="(min-width: 768px)" srcset="normal-zoom-image.jpg">
     <img src="normal-zoom-image.jpg"" alt="Munster Dom"">
</picture>

Do’s

  • Picture tags are great for art direction. By supplying a few source tags within a picture tag, you can tell the browser which art to display for different screen sizes.
  • The order of source tags matters! The browser parses your picture tag’s source tags top-to-bottom. Once it finds a media query matching the current screen, it will pick that source.
  • Supply the default img tag. While most of the browsers support picture tags, Internet Explorer does not, so make sure to support its users as well!

Dont’s

  • One of the most common mistakes is to skip the img srcset and sizes tags and go straight for picture tags to display all of the images. Unless you are dealing with art direction specifically, do not use picture tags. Picture tags’ list of source elements is parsed top-to-bottom. By using picture tags for resolution switching, you are limiting browser’s options. If we are entrusting the browser with picking the right image size, we should give it as many options as possible.
  • If you are in fact dealing with art direction, your source elements srcset tags may not need more than one URL. It may be tempting to include a large list of URLs for each source tag. However, look at your media queries and check if adding additional URLs will accomplish anything at all.

What Do You Think?

What are your thoughts about modern img tags and picture tags? Do you think they are necessary, or do you think they overcomplicate things?

If you found this post useful, share it! If you have other comments, or questions, leave them below, or drop me an email!


  •  
  •  
  •  
  •  
  •  
  •