What is the best width and height of the image should be to show it without its pixels?

[sami22464086jzuw]

I have an app that allows users to sell or rent their cars by publishing an ad.

I developed a new feature. The feature allows the user to add his ad to the banner that exists on the main screen for a certain amount of money.

Before adding the ad to the banner the user should upload an image with a specific measurement.

I made the width of the image take the full screen and I made the height of the image take 10% of the screen.

The only obstacle that I face is knowing, What is the image width and height should be before uploading it to the server?

The image shows its pixels when shown on large screens.

What is the best width and height of the image should be to show it without its pixels? Because the image will be low quality.

[Signfeld]

"without its pixels?"

What does that mean?  NOT full size?

-

AFAIK, you should do the image manipulations on the server. Many users are "not interested" or able to make the perfect size for you. You can probably refuse the pic if the dimensions are "not greater than." Otherwise, take it in your own hands from there.

See that a larger/smaller pic doesn't "blow up" your page 😄

[sami22464086jzuw]

This feature will target auto showroom owners for 95% so I don't think they have a problem designing the image. This feature is for serious people only.

If you want to pay 400$ to feature your ad of course you will hire someone to create a beautiful image for your ad to put it on the banner.

Let's back to the question, When I said without pixels I was mean when you show the image on large screens the quality of the image will be low not like showing it on small screens will be high quality.

The question is:
When the advertiser designs a new image to put on the banner, What width and height should the image be to look high quality on all screens?

Thank you for your reply.

[D Fosse]

This is all pixels. Traditionally, an HD screen is 1920 pixels wide. So on such a screen, an image 1920 pixels wide will display perfectly full-screen.

Then we have some 27 inch monitors at 2560 pixels wide. Do you want to accommodate that? Your choice.

And then, of course, we now have 4K screens at 3840 pixels wide. Natively, the 1920 pixel image would then just cover half the screen. But that's not such a big practical problem as it might seem, because an industry standard workaround has been devised to cover exactly this problem. All web browsers and consumer-oriented image viewers, when they detect such a screen, will scale up images 2x. Instead of mapping pixels 1:1, they use four screen pixels to represent one image pixel.

In other words, these 4K screens are made to behave like standard HD screens, and so the same images can be used.

So it goes full circle. I'd go for 1920 pixels wide as a good practical compromise.

[sami22464086jzuw]

I'll try with 1920x540 on the large screens, Do you this the height looks good?

Thank you for your reply.

[sami22464086jzuw]

Do you think* the height looks good?

[D Fosse · Accepted solution]

You decide the height. It wil hit the width limit before that.

I don't know how critical image quality is here. You could specify 2560 pixels wide to cover those screens too, but I don't think any more than that will serve any sensible purpose.

I assume this is responsive site design so that the image always fills the browser width. Then again, do people usually have browsers full screen? my experience is not.

In any case, there will always be variables and compromises here. Personally, I'm not very keen on responsive design, precisely because of the continuous image scaling. Image quality will always suffer. There really isn't much you can do about that.

[sami22464086jzuw]

My app is target the android operating system for mobiles, So I'll search what is the biggest screen that exists on the android and design the image depending on it. I don't know if that best solution or not. I appreciate your help and time.

[Signfeld]

Re. " I don't think they have a problem designing the image."

My point is more that you can't trust upon that; people can make errors.

So you either have to refuse an incorrect upload or manipulate that image on the server.

Main thing is to prevent wrong dimensions throwing off your site layout. (If it would only destroy a user's own page, that would be less bad and on them to some extent — it would just make you look bad too if others can visit that page.)

[sami22464086jzuw]

When the user uploads the image to the server, I'll check if it matches the rules or not, and depending on that I'll accept or reject it. Thank you.

[Signfeld]

Cool. The dimensions would probably be controlled by your CSS, but a user might upload a heavy file (like a jpg at Quality 100%), making your site load slow.  They are used to Facebook taking care of everything and making the quality worse, so they may expect the same from you. IOW, a file size check may be in order too.