What’s the best resolution for exporting images for screen viewing in Affinity Publisher?

Quote from Jeff

However, I often create smaller versions of these images, such as 1,920 × 1,080 px, 2,560 × 1,600 px, or 2,880 × 1,800 px, for display on screens. I’m trying to keep the file size as small as possible while still looking sharp. What resolution would you recommend when setting up a document in Affinity Publisher for on-screen viewing? And why is that resolution usually considered the best for digital display?

You mention specific pixel dimensions and ask for a recommended resolution. Does your request concern the pixel dimensions or rather the DPI value for this sizes? In case of the first there is no general "best" size, in case of the latter the DPI value saved for an image file doesn't influence the screen view at all. And it is even not important for print matters where the document resolution of the layout document defines the printed resolution while the effective resolution (DPI values) of each image just depends on the a. pixel dimensions of the image and b.) the placed size in the layout.

In on-screen display, the displayed image quality and physical size depend on the monitor/screen hardware + resolution (graphic card settings), not on the DPI value saved for an image. A screen's resolution is defined by the hardware's pixel size and their density. For example, an image displayed on a smartwatch appears sharper not because it is displayed smaller (on that tiny screen), but because this hardware has smaller, higher-density hardware pixels compared to, say, a television screen or digital billboard.

This means that your 2,560 x 1,600 pixel image will be displayed at very different physical sizes depending on the device's hardware and software. Therefore, you can't influence or force a specific display size or a specific ("best") resolution. Many apps today use antialiasing when displaying images and can therefore influence (improve) visual quality by appropriately generating subpixels.

To keep the file size small you can either reduce the pixel dimensions or the compression rate. It appears that a higher resolution (pixel dimension) with a lower compression quality (higher compression rate) is more effective regarding size + onscreen quality than vice versa a low pixel dimension with a high compression quality (less compression).

The algorithm used by Affinity to save/export JPG or PNG files isn't particularly effective in terms of file size. Therefore, it may be advisable to export at maximum quality = minimum compression and then recompress the image in a separate step using a separate app. For macOS, there's the free program "ImageOptim" which offers very flexible settings and high compression capacity with less impact on image quality.

In my comparative tests from a couple of years ago, experimenting with various settings in Photoshop CS5, GraphicConverter and Affinity, I came to the following JPEG export setting which offers relatively small file size without compromising the image quality of photos by introducing too many visible artifacts:

• resample: bicubic
• quality: 60

Alternatively, the Lanczos 3 compression algorithms will add slightly more sharpness, which can be especially useful when downscaling.

As noted, this works well with photos or scans for me.
If you're exporting graphics and text as images, you definitely do not want to use JPEG.

PNG export from Affinity is rather mediocre, partially even broken depending on certain settings. See e.g. https://forum.affinity.serif.com/index.php?/top…Comment-1342383 ff.

The aforementioned ImageOptim does a good job in optimizing the compression further.

Quote from Jeff

I stumbled across this forum completely by accident — it’s kind of hidden! It doesn’t really show up in normal search results, and if I hadn’t clicked a direct link from another site, I probably wouldn’t have found it at all. Is there a reason it’s not easier to find?

Well, it's a completely new forum, only a few weeks old. Search engines apparently haven't fully indexed it yet.

Jeff I'll add a few thoughts to the above, excellent comments...

JPEG is probably your best bet for file size at the current time, due to its universal support. Other formats do a better job compressing files (HEIC, AVIF, JPEG-XL, etc), but aren't as widely supported in different apps and browsers. PNG files will be much larger.

According to one of the authors of the original JPEG compression algorithm, it makes little sense to use "maximum" quality (100%) with JPEG because that just inflates file sizes without any noticeable difference in the image quality. Also, the "quality settings" in different applications aren't necessarily equivalent, i.e., a quality of 60% in Photoshop is not necessarily the same quality as 60% in Affinity Photo or other photo editing apps.

In AfPhoto, you can see an "estimated file size" when you export to JPEG format as you adjust the overall pixel dimensions and the Quality level. Here's an example using an original photo that measures 5600 x 3800 pixels, saved at full pixel dimensions at various JPG compression "qualities" from AfPhoto.

Quality File Size
100%. 21 MB
98%. 13 MB
90%. 5.2 MB
85%. 3.5 MB
80%. 3.0 MB
70%. 2.2 MB
60% 1.6 MB
50% 1.1 MB

Even dropping from 100% to 98% quality greatly reduces file size. I have generally settled on 85% Quality when exporting JPEG from AfPhoto. That is still very high quality, but at a massive reduction in file size compared to 100% quality (at least in Affinity apps, using their quality scale). My decision was somewhat arbitrary, and based partly on the above size evaluation, but works for me and still retains quality I am happy with. You may opt for a higher or lower quality setting, depending on your file size limitations and your quality expectations. But even the author of the JPG algorithm says using 100% is typically overkill and unnecessary.

Hope this helps.

Quote from ldina

a quality of 60% in Photoshop is not necessarily the same quality as 60% in Affinity Photo or other photo editing apps.

Definitely.
I vaguely remember that my "60" in Affinity roughly equals to "51" in the Photoshop's "Save for Web" export dialog which is just before the red colors would begin to "collaps" into muddy artifacts.

I was looking for the original article I referenced above by the author of the original JPEG algorithm, but unfortunately, was unable to relocate it. I believe that article was written by Pennebaker, and was very good and very detailed.

I did find the following article, which may be somewhat helpful, but it specifically applies to JPEG compression using LightRoom, so it won't be an apples vs apples comparison.

Jeffrey Friedl's Blog » An Analysis of Lightroom JPEG Export Quality Settings

Quote from ldina

Here's an example using an original photo

Reducing file size depends heavily on the amount of colours & details. A former Lightroom developer offers comparison with a handy overview. Scroll down to a sample image and hover over the quality values to see the effects of compression both visually and as a file size value.

Jeffrey Friedl's Blog » An Analysis of Lightroom JPEG Export Quality Settings

Although Lightroom is different from Photoshop and Adobe is different from Affinity, and the site is 15 years old, it still quickly gives a good impression of the different visual and numerical effects of compression.

EDIT: ah, ldina was faster

I found the article I was looking for. This page, and others on this site, offer additional information regarding JPEG Quality.

JPEG image compression FAQ, part 1/2Section - [5] What are good "quality" settings for JPEG?

Jeff I'm not sure if anyone offered suggestions on how to set up your document in Publisher or not (if so, I missed it).

I'd probably create that document at the highest resolution I anticipated needing for ANY given purpose. So, if you plan on making 600 dpi versions available for printing or other high quality purposes, and that is your most demanding requirement, set up Publisher at that highest resolution setting, and the appropriate color space (e.g., RGB/16, Adobe RGB, DCI P3, etc). That will be your master document. If you are sending it to a printing press or RIP that needs CMYK, you can convert on Export.

Another option is to edit those images (if photos...in Affinity Photo) at the highest resolution you anticipate needing, and best color space for sales or archival purposes, if you plan on sending individual images to customers. It depends on what you intend to do with these files.

When Exporting,, you can choose whatever file format, resolution and quality settings you require (for those file formats that offer variable compression, like JPG).

This is an issue that I have yet to fully understand, and I seem to struggle with. It would be very helpful if what @ldina and @loukash have written and referenced could be written up as a How To Cheat Sheet. This I would find very helpful. I like the idea of having 600 dpi settings for Printer and also have a good option for exporting for web view. What settings and pre image work should be done? How? Tools? etc..

Quote from thomaso

The algorithm used by Affinity to save/export JPG or PNG files isn't particularly effective in terms of file size. Therefore, it may be advisable to export at maximum quality = minimum compression and then recompress the image in a separate step using a separate app. For macOS, there's the free program "ImageOptim" which offers very flexible settings and high compression capacity with less impact on image quality.

Should the images should be compressed / optimized in "ImageOptim"  prior to adding them to our Publisher project?

Or should we place all images at 600DPI or higher for the printer and then export for the web at a different resolution? When/ How is ImageOptim used?

This thread is all very interesting and very informative.

Quote from bici

Should the images should be compressed / optimized in "ImageOptim" prior to adding them to our Publisher project?

Or should we place all images at 600DPI or higher for the printer and then export for the web at a different resolution? When/ How is ImageOptim used?

No, it doesn't appear useful to maximise the compression of an image before the export of its final layout. When exporting a PDF for print, Affinity handles image compression and you export typically with the layout document's resolution. If you export an image placed in the layout with optimized compression, the benefit of the smaller file size in the exported PDF will be reduced again due to Affinity compression.

For print files there is usually no benefit in a resolution higher than print resolution. It is or has been useful for 1-bit images (e.g. black line art) but Affinity doesn't support 1-bit im-/export. Also the prepress process at the print service may change your 600 dpi. However, for layouts at a scale other than 1:1 (e.g., 1:10 for large print formats), it's necessary to export the print PDF at a correspondingly higher resolution (e.g. 2000 DPI) to enable printing at 1000% (for results in e.g. 200 DPI).

For the web, a separate app like ImageOptim is useful for exporting the final version of an image file in the last step before uploading. In the intermediate steps, it's always advisable to work with little or no compression and maintain image quality throughout the layout process. For the web, file formats other than JPG may be more efficient these days. Furthermore, it may make sense to export an image at a larger size for the web these days simply because of improved screen hardware/software resolution (e.g., "Retina").