The 1x / 2x / 3x form tells the browser which file to load at each device pixel ratio. The browser picks the smallest image that meets or exceeds the screen density, so a phone with devicePixelRatio: 2 downloads [email protected] instead of the 3x version. Always include explicit width and height so the browser reserves space before the image loads (this prevents layout shift). The 1x entry is also the src for browsers that do not support srcset, so the fallback is automatic.

The width-based form is correct when the rendered size depends on viewport width (a hero image, a card cover). The srcset lists candidate files with their natural widths, and sizes describes how wide the image will be at each breakpoint. The browser combines viewport width plus density and picks the closest candidate. This single tag replaces a stack of media queries and gives the browser, not the developer, the final say on which file is best.

When the picture itself should change (a wide landscape crop on desktop, a tight portrait crop on mobile), srcset alone is not enough; the image needs different art at different sizes. <picture> lets you list <source> elements with media queries and falls back to the inner <img> when none match. The browser picks the first <source> whose media matches, then applies the same density logic to its srcset. This pattern is the right answer for hero images that need cropped variants per breakpoint.