It will also know that if the image will be displayed at 320 pixels wide on a retina screen, it should choose an asset that is at least 640 pixels wide. It’s smart enough to know that on a low-resolution desktop screen if the image will be displayed at 800 pixels wide, it should choose an asset from the list that is at least 800 pixels wide. The browser will choose the best image based on a complex set of criteria including what size the image is displayed to the user at their current viewport size, and whether the user has a high-resolution display or not. Each item in the list looks like this: “ image.jpg 1000w,” which tells the browser that the file image.jpg is 1000 pixels wide.īy providing a collection of image assets in this way, you’re saying to the browser: “I’m giving you a list of images and I trust you to pick the best one.”

It’s a comma-separated list of URLs paired with widths. Oh, and don’t worry about browser support! Not only do these attributes have excellent support across the board, we’ll also be providing a fallback for older browsers like IE11. We’ll use the srcset attribute to provide a list of image assets to choose from, and the sizes attribute to tell the browser how large the image will display at various breakpoints. Thankfully, the browser is better equipped than we are to handle this logic. It involves determining how large the image will be displayed, as well as understanding whether the user is on a high-resolution display, among other things. The logic behind displaying an image responsively is complicated. We call this resolution switching, and you can accomplish it using the srcset and sizes attributes. The responsive images spec is fantastic and covers a lot of use cases, but in my experience, most of the time you’ll only need to understand one of them: Serving a different sized copy of the same image depending on the user’s viewport width. This image is based on a tweet by Harry Roberts

Image responsive resize css