Provide different images for different high density screens

HTML/CSS
1

question about part of images, part Supporting High-density Screens
why we should provide different versions of image for different high-density screen?
for example, the “srcset” tag provides an image for 1x, 2x, 3x, …

<img
  src="photo/gallery/tezos@1x.jpg"
  alt=""
  srcset="photo/gallery/tezos@1x.jpg 1x,
  photo/gallery/tezos@2x.jpg 2x,
  photo/gallery/tezos@3x.jpg 3x"
/>

can I provide one image with high resolution for all screens?
and then give it a width with a relative unit like rem and allow the browser resize the image itself

2

High-resolution images take up more bandwidth. If a device is not capable of displaying images at the higher resolutions, it might make sense to save on bandwidth/space/time by sending them a lower-resolution version of the image.

2 Likes
3

Thank you, Thank you for your response