Provide different images for different high density screens

HTML & CSS
,
1

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

I use this to enhance the speed with screens max 480px. The “correct” resolution for each media. Using the same high res image for all screens may affect the speed.

<picture>
    <source media="(max-width: 480px)" srcset="/img/cloud.jpg">
    <img src="/img/cloud_desk.jpg" alt="Cloud">
</picture>
3

Loading a large image and then displaying it at a lower resolution will work but will

  1. Take longer to than necessary to download
  2. Use more data than necessary

As smaller screens are more likely to be mobiles on limited data plans this could be an issue.

1 Like
4

If you are very good at optimising your images and don’t go overboard with massive images at massive quality then you may indeed select a mid-range quality and size image that will suit larger or smaller displays.

It won’t be as good as swapping the image but it may be good enough unless this is a site devoted to images where you need the highest quality. It’s all about compromise :slight_smile:

Whatever you do you should more or less always be making them responsive to their environment anyway and not fixed sizes.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.