A checkerboard pattern appears over the image.

[sato0313]

I am attempting to edit JPEG images in Affinity Photo.

 

When I open a particular JPEG image and enlarge it

For some reason, I am having trouble seeing a checkerboard pattern overlaid on the image at certain zoom levels.

 

Is this normal behavior due to a setting I am not aware of?

Or is the behavior due to other factors?

 

 

Here is what I know about this checkerboard pattern

a. It is particularly enhanced when the display quality is set to Nearest Neighbor in the preferences.

b.The size of the checkered pattern changes depending on the zoom factor.

c. The position of the vertices is not aligned with the transparent checkerboard.

d. It appears even if the image is exported as JPEG or PNG and reopened.

e.It is conspicuously displayed at around 27% magnification, but it appears to be present at other magnifications as well.

f. It does not appear when a monochromatic image is opened in AffinityPhoto.

g. It does not appear when the same image is opened in other applications.

 

Other things we know are as follows

a. The layer is single and the opacity is 100%.

b.The version of Affinity Photo is 1.10.5.1342.

 

 

If you can think of any cause/solution, I would appreciate it if you could let me know.

 

I attach the following

a.The JPEG image file that is open

b.The afphoto file when it is actually open

c.Screenshot image file taken at the time of opening

 

The images are cropped due to circumstances, but we have confirmed that the checkerboard pattern is displayed.

 

Submissions are made using the DeepL translation.

Checkered Pattern.afphoto

[walt.farrell]

Welcome to the Serif Affinity forums.

What zoom level do you have to be at to see the checkerboard pattern?

Can you give us a screenshot that shows it?

I can see pixelization in your image if I zoom in, but no checkerboard.

[sato0313]

Thanks for the reply.

I can recognize the checkerboard pattern at around 26%~30%.
It is highlighted at 26%~27%.

The second attached image is a screenshot taken at 27%.

[carl123]

46 minutes ago, walt.farrell said:

I can see pixelization in your image if I zoom in, but no checkerboard

That's weird. I see a checkerboard on the right-hand side of the image at all zoom levels

 

[sato0313]

The checkerboard pattern I am talking about appears in the non-transparent areas of the image.
If the checkerboard pattern does not appear in the non-white/non-transparent areas even after adjusting the magnification, it has not been reproduced.

[carl123]

@sato0313

In Edit > Preferences > Performance

Switch off Hardware Acceleration (if on) and see if that cures it
 

If not, we may need a video showing what you see at certain zoom levels to understand what you are seeing

 

 

[sato0313]

The video was the best way to accurately convey the information, thank you.
I have prepared a video and have attached it.
Thank you in advance for your cooperation.

[carl123]

Thanks for the video

I can now see the checkerboard issue you are talking about, especially at 27% magnification

I do not know what is causing it but hopefully once the official Serif support staff see this post, they will be able to provide you with an explanation.

[firstdefence]

• Maybe high compression?
• Maybe type of compression?
• Have you compressed it?
• A kind of moire effect?
• What is the history of the jpg, how did it become a jpg?
• Do you have the original image?
• Is this a scanned image, the reason I ask is because using the FFT Denoise filter shows a definite pattern.
  

[firstdefence]

I downloaded the top image, and placed it in the afphoto document, the images are different with the placed image being the expected look of a jpg.

[NotMyFault]

what you see are simply moire artefacts. 

Especially if you are using nearest neighbour resample method, and starting with a scaled file.

You will see this most prominent with specially crafted files containing hard edges and 1 px wide lines, and zooming.

Use zoom around 100% (but not 100%) and see lots on interesting patterns. 

Never the less, the files of the OP contains enough moire from start to give you these artefacts.

resample bilinear will reduce the sharpness / micro-contrast, so the effect is weaker. resample nearest neighbour will amp the effect because it create harder edges.

In Photo, using MIP MAPS could temporary amplify the effect, as it starts to render the image with reduces resolution. So if you drag the image, or play with adjustments, you will get more temporary artefacts.

Nothing to worry about, it is physics.

 

You need to view fine details (smaller than about 4px size) at exactly 100%, 200% or 400%. Otherwise the preview is misleading.

checkered 256x256 misaligned.afphoto

[walt.farrell]

9 hours ago, sato0313 said:

I have prepared a video and have attached it.

Firefox on windows tells me your video is corrupted, and can't play.

On the other hand, I am able to see the checkboard pattern in your file. For me it is at all zoom levels, and seems to indicate that your file has transparency on that part of the canvas. That can be confirmed by disabling/enabling Document > Transparent Canvas in Affinity Photo. It would be interesting to see the original file that you started with to get that .afphoto file, and to know the exact steps you took.

[R C-R]

4 hours ago, walt.farrell said:

Firefox on windows tells me your video is corrupted, and can't play.

In Safari on my Mac, it just shows the broken play triangle on a black background, which I guess is the Safari equivalent of saying it is corrupted.

But I also can see the checkerboard in the Checkered Pattern.afphoto file & it is obvious that it is because some parts of the canvas are transparent. An easy way to verify that is by adding a colored Fill layer & moving it below the pixel one, like I did in this Checkered Pattern with Fill layer.afphoto version.

[sato0313]

Many thanks for all the replies.

I am editing an image for the purpose of capturing and displaying a certain paper illustration on my tablet.
That is, the original image is a scanned image.

I'm not familiar with printed matter, scanners, etc.
I don't know exactly how it is affected.
However, I can imagine that the scanner has many sensors lined up in a regular pattern.
I will assume that the "moiré" phenomenon you have pointed out is highly likely.

Henceforth, I will assume that the checkerboard pattern is "moiré" in my remarks.
Thank you very much.

From now on, I will consider it reasonable to allow moiré as long as there is a problem with the image.
However, I would appreciate an answer to my question about how to preview the image without being affected by moire as much as possible.

When previewing small details (contours and details that consist of less than 4px), use the
As you mentioned, preview at 100% or 200% magnification, and

When previewing a large image, such as the whole
Am I correct in my understanding that previewing at a magnification of 50% or 25% is a good idea?

[sato0313]

As for the video playback.

The video I attached is a generic AVC/H.264 mp4 file, so I'm not sure why it won't play.

 

However, I myself was able to play it when I checked it from Edge on Window, but

When I checked from Safari or Google Chrome on iOS, it could not play.

 

I'm not sure what codecs I need to encode it with to get it to play.

For the time being, I am attaching a new file that I re-encoded with another software.

 

There's a watermark in the center of the screen that's hard to see.

Look at the group of colored pixels not pointed to by the cursor in the video.

Edited April 20, 2022 by sato0313

[sato0313]

I would like to apologize for two things.

The first is
I stated that it doesn't happen in other applications.
My apologies for my lack of checking. I would like to retract my statement.

I could see moiré in most cases, to varying degrees, depending on the application.
For example, I could not recognize moiré in the Windows Photo app, but in the GIMP, it was visible above the same level of Affinity, and in the GIMP, it was visible above the same level of Affinity.
In some applications on iOS, moiré was visible without the need to zoom in.

Second.
This is about the file I attached.

afphoto is a file with the following already done, so there is no need to load anything new.
1. open the original image → 2. fill in white → 3. hollow out the right side to make a transparent area.

Also.
The first JPEG is the image exported in step 2 above.
The second JPEG is a screenshot from step 2 above.
Therefore, each of them is different from what afphoto shows.

I have caused a misunderstanding by hollowing out the image just before posting to distinguish between transparent areas and moiré.
My apologies.