Highlighted

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

Explorer ,
Oct 09, 2020

Copy link to clipboard

Copied

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

TOPICS
How to

Views

101

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Oct 09, 2020

Copy link to clipboard

Copied

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

TOPICS
How to

Views

102

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 09, 2020 0
Adobe Community Professional ,
Oct 09, 2020

Copy link to clipboard

Copied

Moving to the Photoshop forum from Using the Community

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2020 0
Explorer ,
Oct 09, 2020

Copy link to clipboard

Copied

This is also applicable equally to InDesign though. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2020 0
Adobe Community Professional ,
Oct 09, 2020

Copy link to clipboard

Copied

Do you want me to move the thread to the Indesign forum, you posted a link to a Photoshop Essentials article so I assumed you were referring to Photoshop.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2020 0
Explorer ,
Oct 09, 2020

Copy link to clipboard

Copied

It's applicable to both, so I guess it could stay here. It's about image pixel dimensions/quality on screens, so it's really applicable to all Adobe applications that use images. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2020 0
Adobe Community Professional ,
Oct 09, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2020 0
Explorer ,
Oct 09, 2020

Copy link to clipboard

Copied

Thanks for your reply. 

 

I got the first part as that's what I've been reading about.

 

My biggest issue though is InDesign. I often use it to create artwork for clients for socials (Instagram, LinkedIn banners etc) as I find it much quicker to work in than Photoshop (or digital PDF docs, which are obviously easier in InDesign). So if I've been supplied a 1000px wide image, I've previously scaled it so that it's a minimum of 72 effective ppi in InDesign. I realise ppi is now meaningless for web/screens, so I'm wondering what I should stick to as a minimum when using images in this context - should I be making sure instead that they are exported at (in the social artwork, PDF doc etc), for example, 1.5 times the original pixels dimensions of the image I'm importing? 

 

I've also found if I have an image that's going to sit 500px wide in a non-responsive web design, uploading it at 500px doesn't end up looking quite as sharp as uploading it slightly bigger so that it scales down. Am I just exporting them using the wrong settings (this would be in Photoshop, not InDesign)? 

 

Sorry - it's a difficult question to explain! 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2020 0
Adobe Community Professional ,
Oct 09, 2020

Copy link to clipboard

Copied

"uploading it at 500px doesn't end up looking quite as sharp as uploading it slightly bigger so that it scales down."

 

The main point of preparing at final pixel size, is that you can then optimize final output sharpening. You should always do that.

 

Any scaling, anywhere, will soften the image. As long as you scale down you can compensate by a little resharpening, but don't do any scaling after that.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2020 0
lubalbs LATEST
Explorer ,
Oct 10, 2020

Copy link to clipboard

Copied

I'm not doing any scaling up. If it's 500px wide, I wouldn't place it larger than 500px on the artboard/page etc.

I'm really looking for guidelines - in this case so that I know what my smallest dimensions would be for a 500px final output (what minimum pixel dimensions should the image I'm inputting be). I can then tell the client if the image is too small or that I need to find another one etc. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 10, 2020 0