Open/Import PNG Results in Jagged Edges

[Ross V]

No matter what transparent PNG file I open or import in the latest version of Affinity Designer, it butchers the quality and I end up with jagged edges

Image1.png - original

Image2.png - after import

I do not remember this problem before upgrading to the latest version

[R C-R]

PNG is a raster only format, meaning the graphic is just a grid of pixels. For your image1.png, the grid is 512 by 512 pixels & each of those pixels can be only one color. That's why it has jagged edges, which you can easily see if you zoom in far enough or use viewing software that allows enlarging part of the image. For example, this is what the magnifier built into Apple's Preview app shows:

[Ross V]

Ok, but why does it happen on the pixel persona tab also?

If I open this PNG is a less advanced editor, it "appears" nice and sharp, well, at least as sharp as it can be given what you point out

The point is, I can manipulate these PNGs to a degree in a simple editor and use them on the web without them looking destroyed, my feeling is I should be able to do the same thing and more with an advanced editor like Affinity Designer, no?

There are many times I acquire high quality PNGs and will need to do something to them before they are suitable for the task, and my other "simple" editor has limitations, which brings me back to AD but then I have this problem

[R C-R]

1 hour ago, RossV said:

The point is, I can manipulate these PNGs to a degree in a simple editor and use them on the web without them looking destroyed, my feeling is I should be able to do the same thing and more with an advanced editor like Affinity Designer, no?

You cannot completely avoid the jagged edges if you are working with a raster-only format file like a PNG. The only thing you can do to minimize the jaggedness is increase the pixel dimensions, & maybe apply some smoothing to minimize the alias artifacts.

You also can't trust every app (including browsers) to display a raster image the same way, since some will make images look smoother by automatically applying anti-aliasing & maybe scaling them in various ways as well.

[Ross V]

Do you know if there are instructions anywhere for doing what you suggest, i.e. increase the pixel dimensions and apply some smoothing, sorry but I'm not exactly certain what you mean

[lepr]

.

 

[Medical Officer Bones]

The answer to the OP's question is really very simple: in Affinity Photo and the pixel persona any zoom factor other than an exact multiple of more than 100% results in jaggy-looking edges. No matter the View Quality setting (at least, it makes no difference on my system).

That is all. In your screenshot the zoom factor is set to 93.6%, which is a decimal zoom factor that won't allow for a nice looking preview, and Affinity renders the pixels approximately. Which results in outliers, and an ugly preview. [EDIT: on my system it does render nicely below 100% as long as the view setting is set to bilinear, just like @>|< mentions above.]

Depending on the software's view rendering implementation the screen interpolation may be much improved.  As an example, the older versions of Photoshop were unable to render nice smooth edges at decimal and none times X100 zoom factors. At some point the PS developers used the video card's hardware accelerated OpenGL to enable  smooth viewport rendering. Turn off the hardware acceleration in Photoshop, and the same issue rears its ugly head again.

Krita's developers spent a LOT of time and effort on getting this right as well. As did the developers of ClipStudio. When I open the OP's file in Krita, I have no jaggies at any zoom factor. Nor in ClipStudio. Or in IrfanView with resample with zooming activated.

So, in short, the problem is caused by Affinity's viewport rendering, which is (sorry) sub-par compared to other applications at this time when zooming in beyond 100% and non-multiples of 100%.. At least, on Windows. I haven't checked this on the Mac.

By the way, about that file: whoever created it had either no clue about properly rendering a vector as a bitmap, or downsampled a larger version. The giveaway clue: the straight edges are anti-aliased, and if you know what you are doing it can be easily prevented.

 

[lepr]

.

[Medical Officer Bones]

2 minutes ago, >|< said:

I don't know why you cannot see it, but the view quality setting (NN versus bilinear) makes a huge difference to the display at under 100% zoom.

 

You are right, I corrected this in my answer. But any value over 100% that is not a multiple of 100 results in badly jagged edges in the viewport. That ought to be addressed.

[lepr]

.

 

[Medical Officer Bones]

@>|< Corrected. Although this still doesn't solve the issue when zooming in.

[R C-R]

2 hours ago, Medical Officer Bones said:

By the way, about that file: whoever created it had either no clue about properly rendering a vector as a bitmap, or downsampled a larger version.

It is a 512 by 512 px PNG raster image file. No matter how it is rendered, or by what app, the file itself is still limited to that pixel resolution, whether or not it was derived from vector objects. That means any part of it that is not exactly horizontal or vertical (like the circles & curved sections of the camera outline) will either show jagged edges or need to be anti-aliased by the viewing software, which may or may not be an Affinity app. It most certainly will not be if (as the OP mentioned in an earlier post) that file is used on a web page. Moreover, if that software is a browser, the image may be displayed scaled up or down, & anti-aliased or not, depending on the device, the browser's capabilities, & any user-adjustable features it offers.

So with that in mind, I am not sure what the relevance of Affinity's view mode or zoom factor has to do with the OP's issue, which is the reduction or elimination of jagged edges in the file itself. AFAIK, the only way to do that, in Affinity or any other image editing software, is to resample the image to larger pixel dimensions, thus increasing the pixel resolution, & use any of several methods to 'bake' the desired amount of anti-aliasing into the image.

[lepr]

.

 

[R C-R]

26 minutes ago, >|< said:

You have a complete misunderstanding of the OP's problem.

Maybe, but I still think the OP's "use them on the web" comment is relevant & needs clarification before deciding what the problem really is. Obviously, I hope, the Affinity software will not be the software people use to view a web page.

[Ross V]

Thanks for all the feedback, this has been a real problem for me, maybe others too, I have learned a couple important things because everyone's input here

a) when I open that image, it opens at 94% which I did not realize, which seems to be fooling me for if I increase it to 100%, the quality is noticeably better, thank you "Medical Officer Bones" for pointing this out

b) in response to the comment from ">|<" about changing the View Quality, this made a HUGE difference, even at 94%, thank you

To "R C-R", thanks for your sharing your expertise, and just wanted to clarify that I am not using AD to view web pages, I was simply trying to create some images for my own site, more specifically, I just wanted to add a background behind the camera, I ended up drawing one, but now with everyone's help, I think I could use the original one

[EDIT]

I ended up trying again with the original PNG after following the advice here, and it didn't turn out too bad

 

[R C-R]

5 hours ago, RossV said:

a) when I open that image, it opens at 94% which I did not realize...

The zoom level depends on the pixel dimensions of the file & the size of the workspace window -- it won't always be 94%.

5 hours ago, RossV said:

To "R C-R", thanks for your sharing your expertise, and just wanted to clarify that I am not using AD to view web pages, I was simply trying to create some images for my own site ...

What I was trying to make clear is that people who view your web site will not be using Affinity Designer to do that, so when you export your images from AD to PNG files & add them to your web pages, there is no way to know what size or pixel resolution their browser will use to display them. IOW, the AD View Quality mode & zoom level are independent of whatever methods their browsers use to render web page content.

[Martijn Hoppenbrouwer]

I think most people don't understand the problem and are trying to explain things that are irrelevant.
I see more reactions about PNG and what it technically is, but the real problems is within Affinity and how it handles PNG, esspecially PNG-8.

If the viewport or zoomlevel gives you certain problems, that is not even the main or biggest problem that i have.

It's that after exporting a PNG to an 8-bit file, with transparency, it also gives the(se) ultra ugly jagged edges.
The final file you work with in a website is simply unusable (ugly or 2 to 5 times too large)

The difference between Adobe's export to a PNG with 8-bit and transparancy is night and day (Affinity export looks like a really bad GIF from 1992, and Photoshop delivers a perfect PNG with smooth edges and transparency and an even smaller filesize as well!)

As a webdesigner i need PNG's to be the best they can be - professional, smooth and small in size.

I'm really willing to start using Affinity, but this PNG (handling & export) problem is a 100% showstopper.
What bothers me is that multiple people have been addressing this problem, but i haven't seen even 1 reaction from Affinity about this problem and IF and WHEN they are going to fix this.
I think that no single webdesigner can use Affinity (Photo AND Designer) with the current state of PNG export.

PS. i have tried this about a year ago, but my trial has ended obviously. I truly hope it is fixed, but after searching the internet i haven't found anyone with a (good) solution.

[lepr]

.