CodePark/ questions / Images & fonts
START PRACTICINGPRACTICE
Frontend question · Browser & web performance › Images & fonts

This card image is shown 300px wide in a grid, on a 1280px-wide laptop screen with a device pixel ratio of 1. There is no sizes attribute. Which file will the browser most likely pick?

<img
  srcset="card-400.jpg 400w, card-800.jpg 800w, card-1600.jpg 1600w"
  src="card-800.jpg"
  alt="Blue running shoe">
card-1600.jpg, because without sizes the browser assumes the image fills the viewport

The browser picks from srcset before layout, so it doesn't know the image will be 300px wide. Without sizes, it assumes 100vw. On a 1280px screen, that needs at least 1280 pixels, so it picks card-1600.jpg.

"card-400.jpg" is the tempting wrong answer. It would be right only if you tell the browser the display width, for example sizes="(min-width: 1024px) 300px, 100vw". Missing sizes is a common reason why a responsive image still downloads a huge file.