Change Image Resolution Using Srcset and Picture Tags

Tell your browser the perfect image to load for each user

Big, beautiful images are all the rage in website design nowadays. On desktop, these images fill the entire screen to gorgeous effect, leading the user’s eye all over the page. But this may cause a problem on mobile, where there’s not as much space to work with. Or maybe the image is fine, but it’s taking too long to load and slowing down the experience. This is where we need to change image resolution, specifically through the “picture” and “srcset” (which stands for source set) tags.

How the “picture” tag works to change image resolution

The picture tag is great for using totally different images based on screen size. An example picture tag will look something like this:

<picture>
  <source srcset="img_pink_flowers.jpg" media="(min-width: 650px)" />
  <source srcset="img_white_flower.jpg" media="(min-width: 465px)" />
  <img style="width: auto;" src="img_orange_flowers.jpg" alt="Flowers" />
</picture>

Don’t be confused by the image tag: the source is where the good stuff is happening. The media variable is any standard media query, while the srcset is the file for the image you want to use. Simple as that! This quickly and easily allows only the relevant image to be loaded, based on screen size.

One of the main drawbacks of this method is that the “picture” tag is largely unsupported at this time of writing. Only a few browsers can read the tags, which is why we see the image tag built in. If the browser doesn’t support “picture,” it will fall back to the basic image. You can learn more about the in depth working of this tag from W3Schools.

How “srcset” simplifies even more

The next solution, “srcset”, is much more common and supported. And while “picture” is great for changing between distinct images, “srcset” takes the cake for changing resolutions on the same image. Why? In short, it’s much more flexible. Through the tag, you provide several resolutions, and the browser itself runs some behind-the-scenes math to figure out which image is best for the user. Where you have to tell “picture” exactly what to do through media queries, “srcset” is totally self-sufficient. You can learn more about the calculations from CSS-Tricks, if the mechanics interest you.

“Srcset” builds right into the standard image tag, and a typical example looks like this:

<img src="flowers-small.jpg" srcset="flowers-medium.jpg 1000w, flowers-large.jpg 2000w" />

Where the “1000w” and “2000w” are just telling the browser the exact width of your images, in pixels. And that’s really it! Hopefully these are a few easy ways to help your website load time!

Tags: mobile, responsive, website