Jump to content
You must now use your email address to sign in [click for more info] ×

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


Recommended Posts

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.

 

6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity  Publisher, Affinity Designer, Affinity Photo).

Mais je vous le demande, peut-on imaginer une police sans sérifs ?

Link to comment
Share on other sites

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.

Windows 10 22H2, 32GB RAM | Affinity Designer/Photo/Publisher 2 (MSI/EXE)

Link to comment
Share on other sites

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?

 

6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity  Publisher, Affinity Designer, Affinity Photo).

Mais je vous le demande, peut-on imaginer une police sans sérifs ?

Link to comment
Share on other sites

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.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Link to comment
Share on other sites

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?

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.5, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.5

Link to comment
Share on other sites

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

6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity  Publisher, Affinity Designer, Affinity Photo).

Mais je vous le demande, peut-on imaginer une police sans sérifs ?

Link to comment
Share on other sites

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

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Link to comment
Share on other sites

 

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?

screenres.jpg

To save time I am currently using an automated AI to reply to some posts on this forum. If any of "my" posts are wrong or appear to be total b*ll*cks they are the ones generated by the AI. If correct they were probably mine. I apologise for any mistakes made by my AI - I'm sure it will improve with time.

Link to comment
Share on other sites

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.

All 3 1.10.8, & all 3 V2.5.2 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

6 cœurs, 12 processus - Windows 11 pro - 4K - DirectX 12 - Suite universelle Affinity (Affinity  Publisher, Affinity Designer, Affinity Photo).

Mais je vous le demande, peut-on imaginer une police sans sérifs ?

Link to comment
Share on other sites

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

BrowserView.png

ScreenWidthHeight.html

Microsoft Windows 11 Home, Intel i7-1360P 2.20 GHz, 32 GB RAM, 1TB SSD, Intel Iris Xe
Affinity Photo - 24/05/20, Affinity Publisher - 06/12/20, KTM Superduke - 27/09/10

Link to comment
Share on other sites

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.

Windows 10 22H2, 32GB RAM | Affinity Designer/Photo/Publisher 2 (MSI/EXE)

Link to comment
Share on other sites

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

All 3 1.10.8, & all 3 V2.5.2 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.5, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.5

Link to comment
Share on other sites

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.

To save time I am currently using an automated AI to reply to some posts on this forum. If any of "my" posts are wrong or appear to be total b*ll*cks they are the ones generated by the AI. If correct they were probably mine. I apologise for any mistakes made by my AI - I'm sure it will improve with time.

Link to comment
Share on other sites

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 

Microsoft Windows 11 Home, Intel i7-1360P 2.20 GHz, 32 GB RAM, 1TB SSD, Intel Iris Xe
Affinity Photo - 24/05/20, Affinity Publisher - 06/12/20, KTM Superduke - 27/09/10

Link to comment
Share on other sites

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.

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.5, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.5

Link to comment
Share on other sites

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

 

screenres.jpg

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.

www.JAmedia.uk  and www.TamworthHeritage.org.uk
[Win 11  | AMD Ryzen 5950X 16 Core CPU | 128GB Ram | NVIDIA 3080TI 12GB ]
[MB ASUS ProArt B550| C Drive:; 1TB M2 980 Pro | D Drive; 2TB M2 970 EVO ]

Link to comment
Share on other sites

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.

www.JAmedia.uk  and www.TamworthHeritage.org.uk
[Win 11  | AMD Ryzen 5950X 16 Core CPU | 128GB Ram | NVIDIA 3080TI 12GB ]
[MB ASUS ProArt B550| C Drive:; 1TB M2 980 Pro | D Drive; 2TB M2 970 EVO ]

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.