Affinity Publisher: What is the right resolution for an image intended for the screen?

[Pyanepsion]

Hello everyone,

I mainly work for the printing industry, where I use 5000×4000 px initial images that will be printed at 400 PPP.

However, I sometimes create versions of these images in 1920×1080 px or 1080×1920 px for screen display. To optimise quality and compatibility, what resolution do you recommend using when creating a document in Affinity Publisher for on-screen display? Can you explain why this resolution is preferable for on-screen display?

Thank you for your clarification.

 

[Brian_J]

If you're exporting raster files like JPG or PNG to be viewed on screens (web, etc.), the document DPI doesn't matter. All that matters is the pixel resolution (i.e., pixel dimensions).

DPI is a physical unit of measure and there is no fixed relationship between pixels and physical units of measure.

It can be hard to wrap your head around, but here's a little experiment that may help.

1. Create a 400 DPI graphic in Affinity Publisher. Export the file as a PNG or JPG.
2. In Document Setup, change the Document DPI from 400 to 1. Export the file in the same file format as in step 1 (PNG or JPG).

The files exported in step 1 and step 2 will be the same file size and dimensions.

[Pyanepsion]

Caution.

1. If I take an original 5000×4000 image and use the Insert tool (an image), with the final dimensions 1920×1080 px, the file will be 3 MB. If I take the version of the original 5000×4000 image cropped to 1280×800 and use the Insert tool (one image), with final dimensions of 1920×1080 px, the file will be 2.17 MB. The size of the original image therefore has an impact.

2. If I take an original image measuring 1280×800 and use the Insert tool (an image), with the final dimensions 1920×1080 px, and the resolution is 72, the software informs me that the image resolution is insufficient at 47 ppi. If I set the document resolution to 400, the image resolution increases to 266 ppi.

So what can you do?

 

[Alfred]

15 minutes ago, Pyanepsion said:

the software informs me that the image resolution is insufficient at 47 ppi

The minimum acceptable resolution for an image depends on the output intent. If you’re printing an intricate design on A4 paper, 47 ppi will be much too low; if you’re printing an advertisement for display on a large roadside billboard, 47 ppi will usually be more than adequate.

[walt.farrell]

2 hours ago, Pyanepsion said:

If I take an original image measuring 1280×800 and use the Insert tool (an image), with the final dimensions 1920×1080 px, and the resolution is 72, the software informs me that the image resolution is insufficient at 47 ppi.

Why would you pay any attention to a Preflight message if you're not planning to Print the file?

[Pyanepsion]

@Alfred, @walt.farrell,

I’ve added this information (3 MB vs. 2.17 MB; and the odd 72 DPI  -> 47 PPI vs. 400 DPI –> 266 PPI for the same image) because I don’t understand what is the optimum resolution to use to produce an image for the Internet. My aim is to get the best possible image quality without excessively long loading times.

[Alfred]

12 minutes ago, Pyanepsion said:

I don’t understand what is the optimum resolution to use to produce an image for the Internet

The DPI/PPI information stored in an image file has no relevance when the image is viewed in a browser, since the PPI of the device will always be used. So you should forget about display resolution and focus on pixel dimensions instead.

12 minutes ago, Pyanepsion said:

My aim is to get the best possible image quality without excessively long loading times.

Use PNG format at maximum compression. That will take longer to save when you’re creating the image, but it will minimize the file size and the consequent loading time. JPEG files can be relatively small, but they’re always lossy (even at ‘100%’ quality).

[carl123]

 

13 minutes ago, Pyanepsion said:

My aim is to get the best possible image quality without excessively long loading times.

If using JPG files you can specify the compression factor (Quality) to the minimum you find acceptable for your types of images and that will give you the minimum file size for that image

 

7 hours ago, Pyanepsion said:

To optimise quality and compatibility, what resolution do you recommend using when creating a document in Affinity Publisher for on-screen display?

[R C-R]

3 hours ago, carl123 said:

If using JPG files you can specify the compression factor (Quality) to the minimum you find acceptable for your types of images and that will give you the minimum file size for that image

Just in case is not obvious to the OP how important the text I highlighted in red is in that reply, note that the acceptable JPG quality/compression will vary depending on the content of the file; IOW, that there is no "one size fits all" setting that is best for all files.

BTW, not that it matters but that screen resolution chart does not seem to include high-resolution displays, like the 5120 x 2880 px display for my now long-in-the-tooth 27" iMac.

[Bad_Wolf]

Hi Pyanepsion,

When you upscale an image from 1280x800 and a resolution of 72 DPI to 1920x1080 it is normal that your dpi is decreasing. You will also notice that the quality goes down and your image look jagged.

You can solve this issue by using a dedicated application which upscale images without quality loss. That is the only possible way to increase an image size or change the DPI. Even for decreasing the size or the DPI, I use such an application (PhotoZoom). Nevertheless, there is a learning curve if you want fine control over scaling.

[Pyanepsion]

On 6/22/2024 at 10:16 AM, Bad_Wolf said:

When you upscale an image from 1280x800 and a resolution of 72 DPI to 1920x1080 it is normal that your dpi is decreasing. You will also notice that the quality goes down and your image look jagged.

That's not the point I was making.

So a 1280×800 image (https://upload.wikimedia.org/wikipedia/commons/9/96/000003-lescun_1200x800.jpg)

I fit it into a 1920×1080 area.

• With a document resolution of 72 DPI, the software tells us that the image is magnified to 160% and that the result gives a resolution of 45 dpi.
• With a document resolution of 400 DPI, the software tells us that the image is magnified to 160% and the result is a resolution of 250 dpi.

 

 

dpi.afpub

[David in Яuislip]

On 6/21/2024 at 2:34 PM, Pyanepsion said:

My aim is to get the best possible image quality without excessively long loading times.

Decide on your target viewer, the most popular screen size per carl123's quoted barchart above is 1920x1080
On the basis that you want the image in the browser to appear without scrollbars it'll need to be a bit smaller
If you're not bothered about scrollbars read no further

This pc has a max screen res of 2560x1600 but I've set it to 1920x1080 for this exercise

The available space in a browser window will depend also on System/Display/Scale (Windows speak)
These are my figures for two scale values, the attached html was used

Display: 1920 x 1080
Browser: 1536 x 776
devicePixelRatio: 1.25

Display: 1920 x 1080
Browser: 1920 x 991
devicePixelRatio: 1.00

Hence there is no point in serving an image >991px high
Using h = 990 then w = 1920 / 1080 * 990 = 1760

(1760 * 990) / (1920 * 1080) = 84% so a reasonable saving already

Now the website designer needs to understand the difference between devicepixels and csspixels and adjust image sizes based on the viewers pc
This can be done client side by establishing the devicePixelRatio and adjusting the image zoom; details are outside of the forum scope

File format probably webp, I use cwebp.exe available at the Chrome developers area. It can be used by drag/dropping images over a bat file to produce various quality factors at the same time, outputs can be loaded as a stack into Photo then the optimum chosen. There is also a lossless mode, I don't know whether PhotoV2 can do that

ScreenWidthHeight.html

[Twolane]

Use 72 or 96 for your on-screen images. Anything else is overkill for a screen, be it lapatop, desktop, or phone.

[Brian_J]

2 minutes ago, Twolane said:

Use 72 or 96. Anything else is overkill for a screen, be it lapatop, desktop, or phone.

The DPI of the Affinity file has no bearing on the exported raster file (png, jpg). See my previous comment.

[R C-R]

@Pyanepsion, for a comprehensive discussion of when DPI is important & when you can ignore it, please read the Understanding DPI Affinity Spotlight article.

[Twolane]

You'll have to excuse my ignorance of the preceeding esoteric discussion, but I thought that if one was preparing images for a web site, you know, like on a W-E-B screen (for the intertubes) if I may be allowed to be so crude, a 72-dpi image was sufficient. At most, a 96-dpi image was overkill, but okay, use it anyway. Anything else is wasted download time, but go for it with your 5000 dpi images. You'll kill all the interest in your web site when people spend five minutes waiting for images to display - which, by the way, in many parts of the world, still happens because some of us think those images in all their fine resolution are important.

[David in Яuislip]

[Twolane]

Well thanks for all that, but I'll stick with my antiquated images and obvi out of date knowledge that I use on half-a-dozen of my web sites - that people still on dial-up in many parts of the world peruse at their leisure.

[walt.farrell]

15 minutes ago, Twolane said:

but I'll stick with my antiquated images and obvi out of date knowledge that I use on half-a-dozen of my web sites - that people still on dial-up in many parts of the world peruse at their leisure.

What matters for them is the file size in bytes, which is determined by the overall pixel dimensions of your images (that is, the total number of pixels), the image format, and what compression you've used on the images. The DPI is irrelevant.

[carl123]

Question (for all):

Is DPI relevant if the images on a website are expected to be, not only viewed on screen but can also be right-clicked, downloaded and printed.

[David in Яuislip]

This might help, gif files don't contain dpi info

[David in Яuislip]

9 minutes ago, carl123 said:

Is DPI relevant if the images on a website are expected to be, not only viewed on screen but can also be right-clicked, downloaded and printed.

Good question and my answer is no. Even by oversizing the images then constraining the displayed size by css, the site builder has no idea what software would be used to make the print. In such a case I would consider using pdf 

[walt.farrell]

18 minutes ago, carl123 said:

Is DPI relevant if the images on a website are expected to be, not only viewed on screen but can also be right-clicked, downloaded and printed.

In that situation, it is still (in my opinion) the overall image pixel dimensions that matter. You do not know what kind of printer the user has, but in the scenario you mention it is unlikely that the user will be wanting professional quality prints. If they do, and have a good printer, they can adjust the DPI themselves. or adjust how the image is printing using the Print dialog or the Printer options.

But the DPI itself is not very relevant because it only helps set the default printing dimensions of the image, which the user can always adjust.

[Chills]

On 6/21/2024 at 2:49 PM, carl123 said:

 

If using JPG files you can specify the compression factor (Quality) to the minimum you find acceptable for your types of images and that will give you the minimum file size for that image

 

Which goes to show it is pointless doing video in anything higher than 1080p  HD.
This is because on phones, tablets and laptops  you can't see the difference with anything higher resolution eve if you *think* you can. 
Besides on UHD devices such as consumer TV's they have extremely good hardware upscaling from 1080p to 4K  that will give  a far better picture than streaming 4K.
Sorry for the de-rail...

Back on topic: In reality, this is true:-

1 hour ago, Twolane said:

Use 72 or 96 for your on-screen images. Anything else is overkill for a screen, be it lapatop, desktop, or phone.

I tend to go for 96-150 depending on the image, but that is it.    

For my PDF magazine I do it all at 300, but the online version is downsampled to 150.

[Chills]

On 6/21/2024 at 12:20 PM, walt.farrell said:

Why would you pay any attention to a Preflight message if you're not planning to Print the file?

Because it does spilling and grimmer chicks.

Also, it highlights overflows, things missing, and things that are too low a resolution for your output resolution.

It is always worth chucking the pro-flirt just in cases.