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?