How the browser selects the right image When we try to make simple images responsive, we often encounter a problem. The browser can't always pick up the image size that we need for the layout we've designed, especially when we assume that the image will take up 100 percent of the viewport width. What is the problem and why does it happen? In fact, this entire system is designed for speed optimization. The browser wants to figure out which image to download as quickly as possible. The browser selects the image during page loading, before the CSS is parsed and the final layout is created. As a result, the browser has no idea what we want to do with the image. It doesn't even know what the size of the box in which the image will be placed will be. Solution for srcset and sizes attributes To solve this problem, HTML5 gave us two powerful attributes: srcset and sizes. These two attributes work together to help the browser select the right image. Understand the srcset attri...
