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

[johannes999]

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

[Peru Bob]

Exactly how large is the screen?

[johannes999]

I have to look tomorow on my brother business and I let you know.

because he has this large screen.

thanks

[johannes999]

I had to tell you the size of the screen.

the resolution is 1920-1080 Full-HD Acer

the diagonal screen size is 23 inch.

ratio:16.9.

Dot-Pitch: 0.265mm.

thanks

[D Fosse]

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.

[johannes999]

thanks for your advise.

johannes

[D Fosse]

...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.

[johannes999]

thanks,

johannes

[Test Screen Name]

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!)

[D Fosse]

That's right. Here's my browser window right now, on a 27" 2560 x 1440 display. Effective size would be roughly 1200 pixels.

[Derek Cross]

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

[didiermazier]

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

[johannes999]

thanks