Exported PNG & JPG are blurry

[lusyo]

I am trying to export an artboard at its original size as a PNG. And the resulting PNG is blurry.

 

I have tried changing the sampling method, but no improvement.

 

The size artboard is 276x100 px, the export size is also 276x100 px. Seen at this size (or even at smaller sizes), the image is completely blurred.

 

Any idea what I could be doing wrong?

[Jaysirignano]

having the same issue. Made a header for a website and the letters are blurring. Would love a fix as it is driving me insane.

[R C-R]

PNG is a raster image format. That means when you export a vector based document to it, everything has to be converted to pixels. So for example, at 276x100 pixel resolution you won't get sharper edges than can be represented by that total number of pixels, resulting in blurring of anything that does not map exactly & completely to one of those 27600 pixels.

 

There is no way around this besides increasing the pixel dimensions so there are enough of them to minimize the blurring to an acceptable level, or designing the document so that its elements can be mapped exactly to the number of pixels in the exported version. Generally, that means avoiding curves & diagonals, since their edges will never fit exactly into a pixel grid.

[LKR]

This. I simply don't understand why Affinity differs from Photoshop in this regard. 

I'm not a professional graphic designer, I just create imagery for my website. I have several pixel dimensions I need to stick with depending on the use of the image (article header, content, product image etc.). In Photoshop I would create the document in the required dimension, create the image, and the export would look clear and crisp (exactly the way it looks while creating it). When I try to do this in Affinity it's always blurry. The image generally looks great within the application, but as soon as you export it the loss of quality is striking.

 

I understand the points made (that vector within the application is loss-less, and that exporting results in a loss of quality due to the fact it needs to be squeezed into pixels), but what I don't understand is why photoshop manages to achieve clear export results while affinity does not. 

 

I love affinity and don't want to return to photoshop, but damn this is annoying. Are there any tutorials for creating sharp web images in png/jpeg at specific px dimensions? Thanks in advance

[TonyB]

This. I simply don't understand why Affinity differs from Photoshop in this regard. 

 

I'm not a professional graphic designer, I just create imagery for my website. I have several pixel dimensions I need to stick with depending on the use of the image (article header, content, product image etc.). In Photoshop I would create the document in the required dimension, create the image, and the export would look clear and crisp (exactly the way it looks while creating it). When I try to do this in Affinity it's always blurry. The image generally looks great within the application, but as soon as you export it the loss of quality is striking.

 

I understand the points made (that vector within the application is loss-less, and that exporting results in a loss of quality due to the fact it needs to be squeezed into pixels), but what I don't understand is why photoshop manages to achieve clear export results while affinity does not. 

 

I love affinity and don't want to return to photoshop, but damn this is annoying. Are there any tutorials for creating sharp web images in png/jpeg at specific px dimensions? Thanks in advance

 

If you give us an example then we could offer advice. We would need the original and the exported image. Also, the file in Photoshop to show the difference,

[pixelrain]

Yes, blurry exports are a thing. But it requires some steps to reproduce.

Let's take TonyB's post as an example :P

1. Web page screenshot of his post (a print screen cropped to .png, 24bit, no compression)

2. Screenshot opened and added a little raster brush play (see end of post) and exported to .png with default settings. All is well.

3. Created a blank new larger document and dragged the screenshot in it, then, exported to .png with default settings. All is well, again.

4. Same document but this time we crop the document to a smaller size around the screenshot layer, and export it to .png again with default settings. And now we have Mr.Blurry Export !

Notes:

 

- Done with Photo 1.5.1.54, simple document export, not export "Persona".
- This is just how I've come across this; exports might also appear blurry in other scenarios.
- It does not matter if image layer is rasterized or not.
- Different export resample algorithms do not help.
- Image layer import reads dpi instead of resolution !? :blink:

[pixelrain]

This still happens in latest AP beta, after more testing, the combination of Move By Whole Pixels being turned off + Crop tool results in a blurred export.

[Medical Officer Bones]

Affinity Photo and Designer both work with decimal points internally as far as I am aware. That's probably the underlying cause.

[dmythro]

I have this issue with a CMYK 8 bit export to literally any format now. For vector logo and fonts no sharpness at all, get it blurry as result.

Please PM me, will provide the sources so you could investigate.

[puntorosso]

I have also the same problem.

With Photoshop it was a straight forward procedure: create an artwork, export it, great!

 

 

Now with Affinity we get a lot of technical stuff to read, like in a design school.

 

Raster, vector, decimal points..... damn, I just wanted a banner for a webpage.....

 

I really love Affinity software, but I will have to find an alternative if this doesn't change.

[puntorosso]

Did somebody found a solution or workaround for this problem?

It's so bad that sometime, when exporting graphics for small web banners (100x100), the fonts are almost unreadable.

We had to recreate the same design in Photoshop to export it.

 

I hope they will take care of this in the next future. To create graphics that just look great on AD doesn't help much.

Or maybe we should buy a AD license for every customer, and send them the .afdesign file.....

[MEB]

Hi puntarosso,

Welcome to Affinity Forums :)

The exported files should look exactly the same as they appear inside Affinity when viewed at 100% zoom.

Can you please upload one of the files that's giving you trouble so we can take a look? Don't forget to add your forum username (@puntarosso) to the file's name.

Thanks.

[puntorosso]

Sorry for the delay, I had missed your answer.

 

I have uploaded a "test_blurry" afp document, with a simple text, and the exported jpg file (100% quality, bicubic).

 

Please notice the blurry text compared to the original.

[puntorosso]

Hi, any news on this?

[puntorosso]

.... a simple "Please be patience, we are investigating this issue" wouldn't hurt ;)

 

Thanks

[mac_heibu]

… and where are your uploaded files? Think you can wait a long time for an answer without …

[Alfred]

… and where are your uploaded files? Think you can wait a long time for an answer without …

 

They're in MEB's Dropbox, presumably!

 

Can you please upload one of the files that's giving you trouble so we can take a look? Don't forget to add your forum username (@puntarosso) to the file's name.

Thanks.

[mac_heibu]

Think, it is not a good practise, to start a discussion here, but end it in privacy. The community members are locked out in this way.

In this case, I’d prefer to discuss something like that via private message from the beginning.

[MEB]

Hi puntorosso,

I'm sorry the delay getting back to you. Somehow i missed your files. Please accept my apologies.

 

Regarding the flyer file (Bolton_A5_flyer):

The reason why the text is not sharp is because you have an Outline FX applied to the text objects forcing the rasterisation of the text when exported to PDF (all layer effects are rasterised on export).

Since apparently you don't need the outline at all just remove the Outline FX from them removing the tick from the effect in the Layers Effect dialog.

 

Regarding the JPG,

If you place the exported image side by side with the file in Affinity Designer (see screenshot) at 100% zoom you will see that the export is similar to what you have inside the program.

The issue here is that the text is to small for the detail to be resolved properly for this size of image you want without it being manually pixel aligned - thus the blurriness you see around the letters.

You can either convert the text to curves and align it properly to the pixel grid or export the image at 4x the size you want, then downsample it to the original intended size to smooth out letters's edges. Change to Lanczos 3 (separable) or Lanczos 3 (non-separable) - although this last one may generate a way too sharp/harsh image - when downsampling the image to its original size.

 

 

 

[djburt]

I think there are two issues at stake here. There may be some confusion/crossover between what I see as two completely different topics.

 

Issue 1

 

Some people may be having issues with how Affinity Photo DISPLAYS images on a high res screen. After switching from an old 2014 Macbook Pro to an iMac (with 5K Retina display) it seems that older images I created with photoshop (viewed at 100% zoom) now appear half size when opened in AF (viewed at 100% zoom).

 

Initially I found this incredibly frustrating but now I simply increase the zoom to 200% view on AF and all is well. We’re back to where we were back in 2014 Photoshop land!

 

The only workflow problem here is that it is hard to see what things will look like on a normal (or lower res) screen. You’ve upgraded your gear, and now you can’t go back to the old ways! Your option here is to attach an external monitor with lower res, or - if you are checking images created and uploaded to websites - use a non-attached device to see how things render. The silver lining is that things WILL look ok like they always did - no problem. In fact, they will look BETTER than a hi-res display, as they will suffer from none of the pixelation that occurs when smaller images are projected on a retina-type display.

 

I feel that this issue is become less of a problem as now most web designers incorporate scripts that will prioritise larger images for retina displays and smaller images for normal displays as the web site loads. Possibly the same thing happens with web-browers? Only poor web designers (like myself!) will be shocked by how once-perfect looking images now look blurry on a Retina display. #mustredsignmywebsiteasap

 

I know that in recent times PS has incorporated a 200% zoom BUTTON on the main window in order to toggle on/off. This just shows how the recent onset of higher res displays have affected app design.

 

So, for those of you who have switched to a higher res display then - for now, in AF just zoom in 200% and things will be just as sharp as they were on your older display. By zooming in double, you simply mimic a normal res screen.

 

This very same issue has been chewed to death on the Adobe Forum. Check it out.

 

One last important detail for those on Mac OS: Don’t use Preview or Quick Look (space-bar) as a way to judge pixel-accurate size of images. Both Preview and Quick Look scale UP images in order to, again, mimic the look of a older res screen. So, for instance, a 100x100px image will be scaled up to mimic a 200x200px image. The is actually quite helpful as it will tell you EXACTLY how an image will look on a website for instance, if you upload that file. That is unless the website coding prioritises using the image at ‘true’ size. This is the bane of using a Retina display my friends. You have to deal with it. Just don’t use Preview or Quick Look to judge 'true' quality.

 

 

Issue 2

 

This is a bigger issue and one that I think needs addressing on the very next update. There does seem to be a bug when exporting images. AF appears to resample an image whether the image is resized OR NOT on output. I must stress the words: OR NOT. You would always expect some resampling algorithm to be used when resizing on exporting. However, if you choose to export WITHOUT resizing the image, then what resampling needs to occur? In my opinion, there should be a Resample checkbox on the Export dialog so that you can switch off the Resample option should you not change the image dimensions. Or, better still - the Resample algorithm dropdown menu should only be activated when the dimensions are altered. So, I guess that your wondering whether resampling affects image quality when the dimensions on the AF document remain untouched? I bet you’d love to know, right? Well, hell YES, it does affect the quality. And, to this end, I have attached 5 files for you to check out. This is a for a yoga website I am designing. Feel free to download these and load them into AF and flick between them. I have included the working .afphoto document also, so you can check the export quality of the other four .png files for pixel accuracy. You will see that there IS a difference. Files included:

 

YogaAffinityDoc.afphoto - Original working document (might need to be downloaded to view)

 

YogaPNGBilnear.png - Exported image using Bilinear Resampling

 

YogaPNGBicubic.png - Exported image using Bicubic Resampling

 

YogaPNGLancSep.png - Exported image using Laczos 3 Separable Resampling

 

YogaPNGLancNonSep.png - Exported image using Laczos 3 Non-Separable Resampling

YogaAffinityDoc.afphoto

Edited August 15, 2017 by djburt
New helpful information come to light

[John Rostron]

I have not looked at your .aphoto file, but on my tablet, your four .png files look identical.

 

 

[MEB]

Hi djburt,

Welcome to Affinity Forums

You are right. The images are being resampled.

 

[djburt]

Thanks guys. There is something definitely happening. Even the file sizes are not the same on output.

[MEB]

Hi djburt,

They are being resampled because the image on right (senior teacher badge) is at 477 dpi while the document is set to 72 dpi. If you right-click on this layer and select Rasterise it will be rasterised to document's dpi (72) and the document will not be resampled on export.

 

[djburt]

11 minutes ago, MEB said:

Hi djburt,

They are being resampled because the image on right (senior teacher badge) is at 477 dpi while the document is set to 72 dpi. If you right-click on this layer and select Rasterise it will be rasterised to document's dpi (72) the document will not be resampled on export.

 

 

Hi, and thank you so much! I have finally grasped this! You are absolutely correct. You would also get the same result if you flattened (merged down) the image. Then everything is on the same level playing field. After being used to PS for so long I got used to destructive editing, whereby any layer resizing gets automatically rasterised. But I see that AF uses a much more intelligent non-destructive way of working whereby resizing still retains the original dpi data, so that continuous resizing can be done without any risk of quality loss on each successive resize. This is much better than PS!

 

Thanks again for your time looking into this