approximately how many pixels width of an image is good for very large screens?

Forum|Forum|5 years ago
April 22, 2020
4 replies
4191 views

Hallo,

I am learning webdesign and I know very large photo's slow down the website.

I know also I have to scale down the quality of an image in photshop to get the best of it.

now my question is how many pixels width of an image I have to choose to get the best results of an image on very large screens.

is 1200 pixels width is enough for good looking of an image for very large screens or I have to choose something between 1400 -2000 pixels or more?

I want to have just an idea.

thanks

johannes

FAQ

This topic has been closed for replies.

didiermazier

Community Expert

THe size of the screen is one thing, the distance between viewer and the screen another. If you are working for big dispplay screens for instance on an exhibition booth, you should consider 4K. Just because people will be rather near the screen. If the screen is up the ceiling 1920 should be OK.

Regarding web, you should consider Mobile First, so 1280 is OK. For the icons and navigation, Google is calculating the pixels density for Androîd : dp = (width in pixels * 160) / screen density. But in this case SVG will free you from resolution

You can check this : https://material.io/design/layout/pixel-density.html#density-independence

J

johannes999Author

Inspiring

thanks

Derek Cross

Community Expert

It might be worth noting more people access the web on smart phones and tablets than on computers nowadays.

D Fosse

Community Expert

A standard display is either 1920 or 2560 pixels wide. So a 1200 pixel image fills half to two thirds of the screen.

In other words, 1200 pixels wide has traditionally been regarded as a comfortable size for web images.

Then came retina/4K/UHD screens, at a resolution of 3840 pixels wide or more. That caused a lot of panic everywhere, because the same image would now be very small. Several workarounds have seen the light of day, but the standard workaround today is that the application/web browser scales up in a perfect pixel doubling. One image pixel is represented by four screen pixels. In effect, the high resolution display is turned into a standard one. You lose resolution, but not crispness.

Now, some people would respond to this question with "responsive web design" - scaling to whatever resolution is available in the browser window. That sounds neat - but this continuous scaling completely wrecks image sharpness and turns it to mush in an instant. I hate that and go to great lengths to avoid it.