From the course: Developing for Web Performance

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Responsive images

Responsive images

From the course: Developing for Web Performance

Start my 1-month free trial Buy for my team

Responsive images

“

- Even a fully optimized image can slow down the performance of your site if it's delivered to the wrong browser at the wrong time. This is the problem Responsive Images Markup is meant to solve. Here's a quick intro to Responsive Images. Using a standard image elements, the same image file is delivered to all browsers regardless of how big the displayed image is. That means if you want to deliver a full bleed 1,920 pixel wide image to full width desktop browsers. That same 1,920 pixel wide image will also be delivered to a 320 pixel wide feature phone. Which is not great for performance on that phone. To solve this issue, we have to responsive images attributes. Source sets and sizes. Source sets allows you to provide a literal sets or list of image sources for the browser to choose from. So in addition to providing the default source attribute, you also provide a source set attribute holding a list of different sized…

Contents