Ideal dimensions (not resolution) for digital image import relative to final size

Question

I just read this article on the 72ppi myth:https: //www.photoshopessentials.com/essentials/the-72-ppi-web-resolution-myth/ which essentially says that you don't need to worry about the ppi of your images for web/screens (for good reason).

I was just wondering then, what are the ideal pixel dimensions that you want to place an image at on the web or in a digital document size, relative to that document (or placeholder on the web) so that it doesn't look pixelated? For example, if I place an 800px image into an 800px wide InDesign document, it looks really crook when exported. Is there a rule of thumb, like 1.5 larger than the final export size (or viewing size on the web)? (In the above example then, a 1200px image placed into a 800px doc/web placeholder?)

D Fosse · Answer

Basically, a web image displays on screen according to your screen resolution. If the image is 800 pixels wide, it occupies 800 of your screen pixels. So if the screen is, say, 1920 pixels wide, the image takes up 0.417 of the screen width. That's the size on screen.

It follows that the image doesn't really have a "size" as such. It's just pixels. Screen size depends on the pixel density of whatever screen it's seen on.

Enter two complications: The first is responsive web design, which has been all the rage for some years. This means the site is specially coded so that the image is scaled to fill the screen width whatever the original dimensions. That sounds nice - but personally I hate that, because all that scaling kills sharpness and turns the image to mush. Worst case it looks out of focus.

A fixed size image is always significantly sharper and crisper. Prepare at final size, don't scale anything.

The second complication is high resolution screens (4K/retina etc). The problem with that is that everything shrinks accordingly. So it has to be scaled up. That's fine for text and vector, but a huge problem for pixel-based images. One way is to upload two versions of the image, one for standard screens and one for hi-res screens, and then code the site to choose the appropriate one. But the standard way is to simply scale up. All current web browsers are set to do this when a high-resolution screen is detected. The advatage of this is that you don't have to do anything. It just works. But it doesn't look as good as it should or could.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded