Best practice web design picture sizes and multiplier

Question

Web Design: there are a lot of screen sizes to consider. Especially high resolution devices use multiplier. I read this very helpful article about the theory:

https://sebastien-gabriel.com/designers-guide-to-dpi/

It links to this guide for iPhone-sizes:

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

After all, it states that you have to use different screen sizes like 1920×1080, 1280×800 or 375×812 and then provide different multiplier for the high-res devices like @2 and @3.

I am currently building a small website with a large hero image. Do I need to provide like twenty different resolutions with their multiplier? Seems like a lot of Photoshop (and CSS Media Query) work for just a single hero image?

I know I could just deliver one image that fits all. But that might not be a good web design work and the phones also need to load the very large and mobile data consuming high-res images.

If I just consider three or four resolutions, like the ones mentioned above, are they enough? Or should I use different resolutions?

Answer 1

I think this amounts to the level of construction and visual complexity you want for any particular web build at any particular resolution of display.

It is entirely possible to use 1 image for every possible screen resolution. You can use 1 small image and let it look poor on more 4k/retina screens. Or you can use 1 large image and let it slow load times for screens where it is not necessary.

So, inevitably it comes down to how targeted you want any user's experience to be. The more you create resources for specific target resolutions, the better the user experience will be at those resolutions. If you wish the user experience to be optimum at all resolutions, then you need to create images for each of those resolutions.

Given a general target audience and availability of workload, I personally "split the baby" and work for @1x and @2x in order to target the most possible users while realizing that users outside those resolutions may see less favorable versions of images. But I also view the work on those resolutions just to be certain there's nothing visually horrendous displayed. If there is, I may decide to adjust to something such as 1x and 3x.