Which attribute combination is used to allow an image to adapt to different screen resolutions and pixel densities?

Which attribute combination is used to allow an image to adapt to different screen resolutions and pixel densities?

• A. media and source
• B. src
• C. srcset (and sizes)
• D. picture

Answer: (C)

Images can look sharp on both standard and high-density displays by offering multiple image resources and letting the browser pick the best one. The combination of srcset and sizes provides exactly that: a list of candidate images with their intrinsic widths or density descriptors, plus a hint of how large the image will appear in the current layout. The browser uses the device pixel ratio and the viewport width (guided by sizes) to choose the most appropriate resource, so a higher-resolution image is used on high-DPI screens while smaller or lighter images are used on smaller or lower-density displays. This approach avoids unnecessary bandwidth while keeping images crisp. While the picture element can also modify images based on conditions, the specific mechanism for adapting to screen resolutions and pixel densities on a single img element is srcset (and sizes).

Images can look sharp on both standard and high-density displays by offering multiple image resources and letting the browser pick the best one. The combination of srcset and sizes provides exactly that: a list of candidate images with their intrinsic widths or density descriptors, plus a hint of how large the image will appear in the current layout. The browser uses the device pixel ratio and the viewport width (guided by sizes) to choose the most appropriate resource, so a higher-resolution image is used on high-DPI screens while smaller or lighter images are used on smaller or lower-density displays. This approach avoids unnecessary bandwidth while keeping images crisp. While the picture element can also modify images based on conditions, the specific mechanism for adapting to screen resolutions and pixel densities on a single img element is srcset (and sizes).