Settings to have the same quality png exported as it the image shows in the app before gets exported

[mrko]

Hi Team!

I am struck by the quality of the exported .png. I never had this issue before - or I just haven't used transparent background png? - and after reading around in different forums I have not found a working solution or a list of settings to go by to avoid the terrible quality of the exported image file.

I am well surprised that it is not the default setting that whatever I see on my screen will look the same once it gets exported to whichever format.

So my request is, to please provide a list of settings that I can copy/mimic to set my document in a way that the exported .png has:

1. transparent background

2. sharp as a 'katana' i.e. without pixelation

3. has exactly the same color

Thanks a bunch!

P.S.: I use the updated V2 of the app and I run it on win11

[Old Bruce]

If you really do want a file that is not pixelated then you shouldn't use PNG because pixels are all it has.

[mrko]

Thanks for the great input mate! It was worth sharing, really helpful

[R C-R]

https://en.wikipedia.org/wiki/PNG may help you understand more about what PNG does & does not support.

[NotMyFault]

5 hours ago, mrko said:

I am struck by the quality of the exported .png. I never had this issue before - or I just haven't used transparent background png? - and after reading around in different forums I have not found a working solution or a list of settings to go by to avoid the terrible quality of the exported image file.

PNG is normally not a limiting factor. Can you please upload:

1. an example Affinity file
2. an example export
3. screenshot of the export settings you were using
4. explain in detail what you mean by „terrible“ and pixelated.

[thomaso]

8 hours ago, mrko said:

2. sharp as a 'katana' i.e. without pixelation

3. has exactly the same color

2. depends on the exported image size, and the used resolution -> effective number of pixels per inch -> zoom level when viewing the exported PNG.

3. depends on the used colour space and profile for document vs. export and the used app when viewing the exported PNG.

[mrko]

Thanks for sparing the time guys! These are the answers/suggestions already available throughout the web.

What I am interested in and would really appreciate:

Can anyone share the steps of setting up the document/artboard for a small - like a profile pic - .png file and for a large - like a background image for a 30" screen - as well the export settings if necessary for having the result without background, unwanted pixels and matching colors?

Thanks in advance!

[R C-R]

6 hours ago, mrko said:

What I am interested in and would really appreciate....

There is no 'one size fits all' answer for any of this. For one thing, as mentioned above different apps may not use the color profile included in the file to display it, even if it has one. For another, there is only so much detail you can cram into a file that does not have a lot of pixels before you get what I think you mean about "unwanted pixels."

Anyway, as requested about can you upload the items requested above? This may help us better understand what your end goal(s) are.

Edited January 9 by R C-R
Fixed typos

[thomaso]

On 1/8/2025 at 7:19 PM, mrko said:

These are the answers/suggestions already available throughout the web.

What I am interested in and would really appreciate:

Can anyone share the steps of setting up the document/artboard for a small - like a profile pic - .png file and for a large - like a background image for a 30" screen - as well the export settings if necessary for having the result without background, unwanted pixels and matching colors?

There is nothing special and your request is that general that, imho, it does not appear different from "suggestions already available throughout the web."
(btw: a 30" screen is a bit vague because it's a relative size, it can have a quite different absolute number of pixels, just depending on the size of the hardware pixels)

However, attached an .afpub / sRGB profile / 1 page 150x150 px, the other 5000 x 3500 px. The export setting is nothing special, too, it's simply the default "PNG" preset delivered with the Affinity apps.

In the screenshot (JPG) the three files appear to show "matching colors", the 100% views of the two exported PNG files don't show "unwanted pixels."  The PNG viewing app is Apple's Preview.app, its transparency colour is set to gray (this app does not show a transparency pattern).

Archiv.zip (it's zipped to avoid file manipulation by the forum's software)

[mrko]

OK if there is no special setting then it is what it is! Once I have time again to fiddle around with it, I am sure the images will come out crispy enough - or else I will just make pixely edges part of the whole design

Thanks for sparing the time!

[mrko]

Hi People!

I haven't figured out the magic with the sharp edges, but I am wondering if this behavior is a result of my dumbness again or what is happening? On the attached image there are the settings of the export as well as the source and the result of it... is this how an image without background shows up in windows?

Thank you!

[mrko]

I guess this must be the default look of the built in pic editor on win11

[mrko]

FYA

I attached a screenshot that shows the exported .png image size and the screen resolution and the exported image set as background looking very different then in the Designer app

I am sure I am missing out on something here...

[thomaso]

5 hours ago, mrko said:

I attached a screenshot that shows the exported .png image size and the screen resolution and the exported image set as background looking very different then in the Designer app

This screenshot appears to show a 1072 px wide version of the image displayed on a 1920 px wide screen -> at ~200%.

As mentioned, the pixel size of an image AND the zoom level displayed affect the appearance of the image. To directly compare the appearance of an image to its layout in AD, you need to display the same pixel dimensions AND the same zoom level. If the layout is vector data, the appearance may quite likely be different from a rasterized image.

[mrko]

Where do I control the zoom level? How do you know it is ~200%?

[thomaso]

50 minutes ago, mrko said:

How do you know it is ~200%?

In Affinity the zoom level is displayed in the Toolbar > Status (> next to the document name) and in the Navigator Panel.

For Windows I calculated the "~200%" from the values shown in your screenshot of the background image Dimensions + the Display resolution. I don't know if you can control the zoom level of this specific image in Windows.