[1.10.1127] Any image saved in .afphoto format becomes blurry

[LCamachoDesign]

I've noticed that any image I save as a native AFPHOTO file will render blurry when read back in.

EDIT: More info on the steps to reproduce

Steps to reproduce:

1. Open an image in Photo, any raster image (png, jpeg) seems to work, but images with sharp lines are easier to notice
2. Save as AFPHOTO as you normally would
3. Close the file, reopen it again
4. Notice the image is blurry when compared to the original, and then close the file
5. Use File -> New to create a new image file, any image file seems to work, but let's go with Web -> QFHD resolution
6. Drag the same file from step 1 into the document, rasterize the layer so it's a 1 on 1 comparison with above, so there's no doubts
7. Save the file as AFPHOTO and close it
8. Reopen the file just created, notice the image is sharp and working as expected
9. Seems like Photo is storing something, like the DPI scale, incorrectly when saving a raster image into APHOTO files?

Stranger still, I don't think the files are damaged at all. If you open the AFPHOTO file in Affinity Designer or Publisher, it looks normal and sharp.

So this is something limited to Affinity Photo's render.

Changing the Renderer to WARP or disabling OpenCL does not solve the issue.

I did notice something odd though. If you change the View Quality to Nearest Neighbour the AFPHOTO file will look pixelated, this shouldn't be happening.

Indeed if I swap back to the PNG version of the image, even with Nearest Neighbour the image looks sharp, as it should.

Feels like there's some sort of internal error on the app itself, as if it's rendering the file internally at... half the resolution I'd guess?

Let me know if you need further information.

Thanks!

Dielines AFPHOTO.afphoto

[walt.farrell]

I'm a bit confused about the two files you attached at the end of your post.

In all your screenshots everything is at 100% zoom, and the PNG and .afphoto file appear identical in size on the screen.

When I open the two files at the end of your post, and zoom both to 100%, the PNG file appears significantly smaller, so I wonder if it's the same file you used for for your screenshots. Or, if it is, why my zoom levels don't seem to match yours?

[LCamachoDesign]

You need to click on the image on the topic to open a full screen view, then you can try to save that image into your computer. Otherwise you're actually just saving a smaller thumbnail generated by the forum.

[walt.farrell]

8 minutes ago, LCamachoDesign said:

You need to click on the image on the topic to open a full screen view, then you can try to save that image into your computer. Otherwise you're actually just saving a smaller thumbnail generated by the forum.

Of course. Should have remembered that. Thanks.

[Komatös]

What confuses me completely is that if you copy the layer of the APHOTO file and paste it into the PNG file, the APHOTO layer is also displayed sharply again.

[walt.farrell]

Just now, Komatös said:

What confuses me completely is that if you copy the layer of the APHOTO file and paste it into the PNG file, the APHOTO layer is also displayed sharply again.

Yes. But also, if you copy the PNG layer and paste onto the .afphoto, and set the PNG layer to a Difference blend mode, it becomes all black, showing that the pixel content are identical (except possibly alpha).

Setting the PNG layer back to Normal blend mode after the paste, I can then turn the layer visibility on and off, and the effect is not merely that the .afphoto layer is blurry, but that:

• Only the white edges seem blurry; and
• In the .afphoto layer the white edges are possibly a dimmer white, or possibly their opacity is lower. In other words, there seems to be some kind of brightness difference, not just a sharpness difference. But (as I see it) only for the white edges of the letters.

[Komatös]

Yes, only the white edges seem blurry.

[NotMyFault]

@LCamachoDesign Unfortunately i cannot reproduce the issue you describe.

Could you please try the following text to find out if only the rendering on monitor is blurry, or the actual image data is blurry:

• Once you observe the blurry rendering:
  • put a fresh copy of the original layer on top (paste, or place)
  • and set blend mode to "difference",
  • then "merge visible".
• It should be all black. To spot even minor non-black pixel, add a levels adjustment with white level set to 1% (default is 100%).
• Save the file and upload.

This test should show if this "only" a rendering issue, or a more severe bug.

Currently, i reported a few rendering issues, but all related with alpha channel handling, there might be more. It could also be only a Nvidia driver issue, plase try to install the latest "Studio" driver.

[walt.farrell]

23 minutes ago, NotMyFault said:

Unfortunately i cannot reproduce the issue you describe.

Does that mean that the .afphoto file opens for you and the white strokes around the letters are not blurry?

23 minutes ago, NotMyFault said:

• Once you observe the blurry rendering:
  • put a fresh copy of the original layer on top (paste, or place)
  • and set blend mode to "difference",
  • then "merge visible".
• It should be all black. To spot even minor non-black pixel, add a levels adjustment with white level set to 1% (default is 100%).

I have done that (as mentioned above), except for the "merge visible" step, and the levels adjustment. It looked pure black to me.

If I wanted to add the levels adjustment, is that done after the merge visible? I've never heard of using an adjustment that way, but it sounds interesting.

[NotMyFault]

22 minutes ago, walt.farrell said:

Does that mean that the .afphoto file opens for you and the white strokes around the letters are not blurry?

Yes, it is perfectly sharp, with the following constraint: it takes a split second until the rendering is fully stabilized. This process is too fast to provide a clear descriptions how the images looks in the meantime. I will try to export images from the video

2021-08-12 22-10-52.mkv

[NotMyFault]

drum rolls

 

I found that on my PC it takes 297-272 +1 = 26/60 seconds after file is opened where it is actually shown blurry, until it gets fully sharp.

The video has 60 fps. Please find extracted images from video, file number can be converted to time code:

17 seconds * 60 fps= 1020 frames

271: last before image gets rendered

272: first with image rendered, it is very blurry

274: images gets slightly sharper, still blurry

... more UI elements show up, IQ does not change

296: last with image rendered blurry

297: first with image rendered sharp

So i assume that the rendering never becomes sharp on your PC for to be found reasons (GPU driver, Photo bug, ...)

 

Command to extract images from video with ffmpeg:

ffmpeg.exe -i "2021-08-12 22-10-52.mkv"  out%06d.png

 

271

272

274

296

297

 

Edited December 20, 2022 by NotMyFault
corrected sequence of images

[Komatös]

I've wait 5 and a half minutes, but the rendering stay unsharp. So, I mean it't a fault in the rendering engine (oh a ryhme ... sorry )

[NotMyFault]

1 hour ago, walt.farrell said:

If I wanted to add the levels adjustment, is that done after the merge visible? I've never heard of using an adjustment that way, but it sounds interesting.

In this case, after merge visible. But it can be used without merge visible in other cases.

Differences between images could be very subtle ( 1/255 of RGB values), and easy to overlook visually. The levels adjustments boosts such subtle differences to 100% white, much easier to spot agains black background.

[LCamachoDesign]

Thanks for helping everyone, but I feel you're taking this in the wrong direction. This is a simpler problem than what you're making it to be, no need to fiddle blending modes or what not. I'm going to reiterate a few points, and add a couple more to help narrow down the issue.

• There's nothing wrong with the pixel contents of the AFPHOTO file, no need to test this. This is clear, opening the file in Affinity Designer or Publisher shows the contents in a sharp way, as expected.
• Also, as noted by @Komatös copy pasting the layer to a new file shows the contents sharply.
• It's not related to white colour at all. You can see the blue and purple lines on the image also look pixelated. And as I've mentioned, this issue happens with any image, not just this one. Try with something else without white and you get the same results.
• It's also unrelated to the renderer, at least in general. Otherwise all files would exhibit this, not just raster files resaved as AFPHOTO.

 

New information:

• This is unrelated to hardware or drivers, I've opened the files in my Surface Pro and the same issue happens. My desktop is AMD/Nvidia, the Surface is Intel/Intel.
• If I open the file saved with Windows Affinity Photo on my iPad Affinity Photo, the file also looks blurry. Further cementing this is unrelated to hardware.
• If I create the AFPHOTO file on the iPad by following the steps 1 to 4 of my first post, the file will render correctly on the iPad, and it will also render correctly on Windows.

With the above new information I think it's becoming clear there's some sort of issue with the Windows build when saving raster images as AFPHOTO files. There's no damage to the pixel contents, but it seems like there's some error when saving so sort of metadata. I feel like a "divide by two" typo slipped in somewhere on the code. At least there's no damage to the pixel contents, and it's limited to Windows (can't say anything about macOS, but if iPadOS is any indication, it should be fine).

 

Thanks!

[carl123]

3 minutes ago, LCamachoDesign said:

This is clear, opening the file in Affinity Designer or Publisher shows the contents in a sharp way, as expected.

I have sometimes seen the blurry text in Designer as well

Rasterising the layer or simply moving it slightly, immediately produces the sharp version

Very odd...

[LCamachoDesign]

1 hour ago, carl123 said:

I have sometimes seen the blurry text in Designer as well

Rasterising the layer or simply moving it slightly, immediately produces the sharp version

Very odd...

Oh wow... this is crazy! Check this out! I'm reattaching my dielines image as a zip file, so the forum doesn't mess with it and you can also try these steps with me.

 

For Affinity Photo:

1. Download my zip file, extract the image and use it for the next step. Not because it's a special image, but it's easier to see the artefacts, and we can compare a few things below.
2. Do the steps 1 to 4 of my initial post. The image gets blurry as know, do no not close the file just yet. But look at the AFPHOTO file size. It's 9,18 MB (9 634 488 bytes) for me.
3. Now unlock the layer, and move it a bit with the Move tool. The image is suddenly sharp again! Amazing!
4. Gets better, now save the file again. Just Ctrl + S. You can close the file now.
5. Check the AFPHOTO file size, it's now 17,4 MB (18 330 913 bytes) for me. It nearly doubled!
6. Reopen the file again... yes, you guessed it. The file looks sharp from the start now! And I can't get it to look blurry anymore.

 

Now for Affinity Designer:

1. Download my zip file, extract the image and use it for the next step.
2. Do just the steps 1 and 2 of my initial post on Affinity Photo.
3. Repeatedly open and close this file on Affinity Designer
4. Most of the times you get a sharp file, but sometimes it does get blurry!
5. But in Affinity Designer, zooming to 200% and then back to 100% seems to always solve it, while on Photo the only solution is to nudge the layer.
6. If you do get the blurry image, do to the unlock and nudge layer, and save it (Ctrl + S), the file size is bumped to 24,7 MB (25 993 976 bytes)!
7. Now, no matter how many times you open the file, I can't get it to be blurry again on both apps.

 

Bonus round for those of you that have an iPad:

1. Download my zip on the iPad, extract image.
2. Do the steps 1 to 4 of my initial post. Check the size of the AFPHOTO file created by the iPad, for me it's 8,95 MB (9 394 671 bytes), a bit smaller than the first "revision" created by Windows.
3. Open the file on Affinity Photo on Windows. File looks sharp even though is still the small size.
4. Still on Affinity Photo Windows, move the layer around a bit, save the file and close it.
5. File size bumped to 11,7 MB (12 331 292 bytes) for me.
6. Reopen the file. Still looks sharp.
7. Extra extra bonus: if you take the 17Mb of step 5 of my "For Affinity Photo" section above, and save a copy on the iPad, the file size will remain. It will not shrink back to 8Mb.

 

Well, I don't know what to say anymore. The more we poke, the obvious it becomes there's something wrong with how saving files is working.

 

EDIT: This keeps getting stranger and stranger. The steps below are for Affinity Photo Windows:

1. Download the zip file and extract it
2. Notice my image dimensions, it's 4961 x 3508 px
3. Create a new Affinity Photo file with those dimensions
4. Drag and drop my image onto the new file, center it so it fits the canvas, and rasterize the layer
5. Save this file as AFPHOTO, close it
6. Notice the file size, it's 8,96 MB (9 400 848 bytes) for me. Nearly the same as the iPad files.
7. This file is also sharp every single time.

Dieline Guides.zip

[NotMyFault]

I don't think that the issue has anything to do with the document content. I assume it is simply a bug with rendering of potentially any content. For yet unknown reasons, Affinity sometimes does not reach the final rendering state, based on MIP Maps.

 

More about MIP Maps usage:

And see my earlier reply in this thread confirming that with screenshots clearly showing Photo starts with low-res rendering and then iterates to final quality. This can be seen for any document content - normally too fast to notice.

[LCamachoDesign]

I'd say the content of the file, not so much the pixel content, but rather some form of metadata, is interfering with that process. Otherwise it's hard to explain why the same image, saved in the same format, but in different ways, causes different render results. In any case, I think Serif was enough information in this thread to replicate the issue on their end and see what actually going on.

One last step by step bug hunt:

1. Download my image, do the steps 1 to 4 of my first post.
2. Create a new image that's larger than my image, for example, 5000 x 4000
3. Drag and drop the blurry AFPHOTO file into this new document
4. Center it, and set the size to 100% using the context toolbar
5. Notice it still looks blurry anyway
6. Doing the layer nudge trick to the embedded document layer changes nothing
7. Double clicking the embedded document, and doing the nudge to the source layer does fix both that and the embedded blurriness

Not sure if this adds much, but it's another thing to look at.

Thanks!

[LCamachoDesign]

I've bumped into another situation related to this.

Opened a PNG image, added some vector elements, saved as AFPHOTO. Upon reload the pixel image is blurred, but the vectors are sharp. I've done the layer nudging thing, the pixel layer looks fine, save and reload again... the pixel layer is blurry again. It seems like the layer nudging trick doesn't always work? I don't know if it's related to having vector content. Perhaps related to this, unlike the tests I've demonstrated above, nudging and saving does not increase this particular file size, it's always about 7Mb.

I can't post the file since it's client work, but it's another bit of information to try and look into what's causing this.

EDIT:

Ok, this is getting pretty absurd. Check this out:

1. Do steps 1 to 4 of my first post. Blurry as expected, file size about 9.8Mb
2. Unlock the layer, nudge once to the left, and once to the right, so the image is back in the place, save and close
3. Check the file size, it's still around 9.8 Mb, and still blurry if you open
4. Nudge just once to the left, so the image is one pixel to the left, save and close
5. Image size is now 17.4 Mb ??? (and no, I'm not saving the history)
6. Image no longer blurry on open

What is going on??

[Yuna]

Hello,

I just started testing Affinity Photo and Designer, am googling a lot and reading this forums, still have a lot of questions ... and now had the same issue I guess.

I have saved a *.afphoto, once I was satisfied, opened it again later and the picture was blurry. I was not happy, since I thought, I cannot trust these files.

Finally I found this thread, but moving alone did not help. 

I remember I also locked the background, unlocked it, moved it slightly and - bam - it's sharp again.

Afterwards CTRL + Z, so it goes back to the original position.

As a new User this was a bit weird, but I am happy, I can work with the picture again.

(I'm from Germany, sorry, if my English is not always correct )

EDIT: Oh, I am sorry, maybe I am wrong here, that I posted in this section, I am using: 1.10.1.1142

Edited September 19, 2021 by Yuna

[LCamachoDesign]

Bumping this to let you know a variation of this bug still exists.

1. Download the attached Dieline Guides.zip and extract the png image inside
2. Open the png image in photo and Save As an Affinity Photo file, I've saved as Dieline Guides 1.afphoto attached
3. Notice the file size is 9.2 Mb and the image will look blurry when viewed at 100% zoom inside Photo
4. Unlock the Background layer and with your mouse move it around a bit to restore crispiness (nudging with the keyboard seems to no longer work?)
5. Recenter the layer, just to be sure it's not the position. Notice it's still crisp.
6. Save the image as a new Affinity Photo file, here I've saved as Dieline Guides 2.afphoto and notice the file size has increased to 17.5 Mb
7. This new and larger file will never display as blurry, no matter how many times I try.

Thanks!

[NotMyFault]

1 hour ago, LCamachoDesign said:

Bumping this to let you know a variation of this bug still exists.

1. Download the attached Dieline Guides.zip and extract the png image inside
2. Open the png image in photo and Save As an Affinity Photo file, I've saved as Dieline Guides 1.afphoto attached
3. Notice the file size is 9.2 Mb and the image will look blurry when viewed at 100% zoom inside Photo
4. Unlock the Background layer and with your mouse move it around a bit to restore crispiness (nudging with the keyboard seems to no longer work?)
5. Recenter the layer, just to be sure it's not the position. Notice it's still crisp.
6. Save the image as a new Affinity Photo file, here I've saved as Dieline Guides 2.afphoto and notice the file size has increased to 17.5 Mb
7. This new and larger file will never display as blurry, no matter how many times I try.

Thanks!

Don’t know what you want to prove. All of images from you post are blurry. It has nothing to do with Affinity Apps. It might get visually sharper depending on View Quality settings. 
 

If you want to check sharpness, you could simply use the procedural texture filter, preset “checkered”, and set number of fiels to x-size.

Once you “merged visible” you will immediately see any slight misalignment by reduced contrast.

• But only with View Quality “bilinear”.
• View Quality “Nearest Neighbor” will render sharp - even when misaligned.

 

checkered 256x256.afphoto

[NotMyFault]

To be more clear (may sound harsh, is not meant to be offensive. Sorry I'm German)

• You can create perfect sharp images on pixel-level with Affinity Photo.
• If you have a perfect sharp image, use "Nearest Neighbor" View Quality, and look at 400%, you get accurate rendering.
• If you have a perfect sharp image, and export it, the result export file is sharp, despite several rendering issues (see below) when viewed in Photo
• Every single test file you uploaded is unsharp. It does not make any sense to discuss sharpness starting with an already blurry image.
   
• Affinity has a long list of known issues and a longer list of known mistakes by users which can lead to blurriness.
   
• User misconceptions and mistakes:

1. Expecting a sharp image when starting with a blurry image
2. Misaligned pixel layers (fractional positions)
3. rotated pixel layers
4. DPI mismatch of layers to document DPI
5. pixel layers scaled inside document (uses bilinear)
6. documents scaled up or down with non-suitable resample method (there are many)
7. Merge down into misaligned / rotated / non-matching DPI lower layer
8. Complaining about blurriness at edges when using Anti-Aliasing  active
9. Complaining about blurriness of small fonts, e.g. 10-20px (Anti-Aliasing  active)
10. Comparing Develop Persona with results from other apps who apply sharpening by default
11. Using odd zoom levels <> 100%*n, especially evaluating result of with "unsharp mask", "clarity", "high-pass filter" etc
     

• Bugs / issues (non of these are a factor in your test images. They are already blurry before Affinity touches it)

1. Issue: Affinity does not render accurately except when using View Quality "nearest neighbor" and using certain zoom levels, mainly 100% or integer multiples of 100%
2. Bug: On Windows, Affinity does not render correct for 100% and 200%. You may need to use 400%
   https://forum.affinity.serif.com/index.php?/topic/151177-rendering-bug-depending-on-zoom-changes/&tab=comments#comment-846750
3. Bug: Affinity creates wrong colors with "Bilinear" when zoomed to 100% or 200%
   https://forum.affinity.serif.com/index.php?/topic/151065-rendering-wrong-when-stacking-pt-filters/&tab=comments#comment-846728
4. Bug : Affinity creates strong wrong colors when using off zoom levels caused by Bilinar resample
   https://forum.affinity.serif.com/index.php?/topic/151065-rendering-wrong-when-stacking-pt-filters/&tab=comments#comment-846728
5. Bug: Export Preview on iPad produces wrong preview
   https://forum.affinity.serif.com/index.php?/topic/150126-ipad-export-preview-issue/&tab=comments#comment-839920
6. Bug: Coverage Map issues (blend mode / anti-aliasing settings)
   https://forum.affinity.serif.com/index.php?/topic/148370-coverage-map-profile-ui-inconsistency/&tab=comments#comment-827815
7. Photo creates unwanted fractional positions in many cases, e.g. crop, place, paste, New From Clipboard
   https://forum.affinity.serif.com/index.php?/topic/151364-copy-new-from-clipboard-leads-to-wrong-size-and-fractional-layer-positions/&do=findComment&comment=848040
8. Photo creates unwanted fractional positions as side-impact / consequence from unwanted extension of pixel layers
9. Affinity is prone to rounding issues potentially leading to fractional settings
10. Photo hides fractional positions in default UI settings making it hard to spot

Another misconception is resulting from current LED/LCD display technologies. They all use a certain pattern for RGB pixels. If you look with sharp eyes, you can spot that hard edges between different primary colors will be misplaced by a fraction of the  RGB-pixel size. See green and blue pixel on the right. This leads to the impression that Affinity renders wrong - but it is the physical limit of today's display technology.

 

 

[NotMyFault]

Here is a test file, showing a checkered rectangle of 256x16px, copied 9 times and shifted by 0,1px in x-axis.

 

View at 800% (ctrl-4 / cmd-4)

With VQ Bilinear:

 

The same file with VQ "Nearest Neighbor":

This looks sharp, despite the image is actually blurry by resampling. Starting with 0,6px misalignment, you see that the squares are shifted by 1px to the right, so you swap blurriness by a different rendering issue. It is physically impossible to get a sharp image if it's misaligned (using pixel based display technology with fixed DPI).

Exporting these images with matching resample-settings will create the exact same image visible in Photo.

checkered 256x256 misaligned.afphoto

[NotMyFault]

Coming back to your file:

It consists of several layers with totally independent blurriness issues.

1. The grid of 32x32px is misaligned on x-axis by about 1/4px. This leads to the lighter halo on the right of every vertical line.
2. The background colors seems to be created by taking a screenshot at 800% zoom from a color gradient of 45° steps (H of HSL), then pasted into another document, reduced in opacity to ~75%, and placed above the grid (as the grid changes colors, too).
3. The text fields show blurriness by anti-aliasing. Text is correctly aligned regarding position
4. The dotted line (HSL 200/100/45) show blurriness at the edges caused by anti-aliasing . The dots are partially correctly / incorrectly aligned regarding position. The dots are actually no (round) dots at all, but more likely rectangles of 6x4px with rounded corners and anti-aliased edge pixels. Some dotted lines seem misaligned and/or skewed in height.
   
5. Where grid lines and dotted lines overlap, you can see that only the grid is misaligned, not the dots.

So all the blurriness you are expecting is simply caused by the content of the file.

 

Regarding Designer:

Designer renders images different to Photo by default.

Default view:

Pixel preview:

The default view "hides" the blurriness.

All the blurriness is inside your document. It is not "created" by Affinity. Depending on which App used and the View Quality settings, the blurriness could be visible or hidden.

The attached file is a draft to re-create your image from scratch. I intentionally misaligned one grid row for the example screenshots presented here. It fully replicates the issues you raised.

Dielines restored.afphoto

Edited October 26, 2021 by NotMyFault