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

Forum|Forum|5 years ago
April 22, 2020
返信数 4.
4191 ビュー

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

このトピックへの返信は締め切られました。

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

johannes999作成者

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.

D Fosse

Community Expert

...of course, nothing of what I wrote above takes phones and tablets into consideration. That's where responsive design may be the only viable solution despite the obvious disadvantages in sharpness. But for a computer screen, fixed sizes will always look much better, and 1200 pixels is as good a place to start as any.

T

Test Screen Name

Legend

thanks,

johannes

Worth remembering that a big screen doesn't mean a bigger window. I have a huge screen but I don't just fill it with one browser window. I have a big screen specifically so I can have different apps on screen at the same time. My browser window is no larger than average. Typically the only people who fill a huge screen with a browser are those who have a big screen as a status symbol rather than because they need it. (Of course, these people often make purchasing decisions, and if you want to sell to them you may have to design for them!)