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:
It links to this guide for iPhone-sizes:
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?