Responsive images on the web: how to build with srcset, sizes and picture

I recently wrote an article on how to use responsive images on the web, using srcset, sizes and picture. Responsive images are now supported by lots of browsers, including Microsoft Edge (starting Windows Insider Build 10547), and it is highly recommended to start using them on your website, if you haven’t yet. This is how the article begins:

In this connected world where people have a variety of devices, ensuring your website works seamlessly across all of them is a need, not an option. Your website views won’t come from a single resolution device, or a single form-factor. To cater to all of them, your website needs to be responsive.

If you’re familiar with responsive web design (RWD), you probably know the intricacies that come with a responsive design (and how Bootstrap solves a lot of them!). An important part … read more

The article was published on CodeProject and SitePoint. Feel free to read through it, including some self-made stick figures towards the end ;).

Also, reach out to me on Twitter @saurabhkirtani to discuss more on the topic.

Until next time,
Saurabh Kirtani

Comments

• Anonymous
  November 24, 2015
  Great read!! Looking forward to your next one.