• jan@cosmigo.com

Loading an Image Doesn't Correctly Place Pixels


#1

When I load an image into Pro Motion NG that I’ve downloaded, it is skewing the results. Not all of the pixels are where they are supposed to be. For reference, Aseprite loads the image with no problems and the expected results.

Pro Motion NG

Aseprite

Reference Image
lines_and_curves_practice

Have you seen this behavior before?

Thank you!


#2

Weird. Don’t know why that would happen.
Looks like PMNG is detecting a different pixel aspect ratio or changing the image’s resolution but keeping the dimensions the same for some reason.

For the sake of testing, I used Photoshop to make several images with different DPI settings and tried opening them in PMNG. No issues.

If I had the image giving you problems I might be able to figure out what about it is messing PMNG up. You may need to zip and upload it somewhere, if interested. Most image hosts will process and alter images you upload.


#3

Sure! thank you very much for looking into it :slight_smile:
Here’s a link to the zipped image.
https://drive.google.com/file/d/1iLzsxyH6HMv7Q9vVJ66ADiFiWbCIeZ_I/view?usp=sharing


#4

Actually, I just tried downloading the software on my other computer and loading the image, and it worked just fine…so for some reason it’s just happening on my home desktop computer :confused:

I’ll try uninstalling the program and reinstalling it tonight after work to see if that makes a difference, and I’ll let you know. Feel free to try it for yourself though to see if you get weird results.


#5

Ah so you’re getting mixed results.

Looked at your image and didn’t find anything out of the ordinary. I can open it in photoshop and Pro Motion NG 7.2.6 with no problems. Looks just like yours.


#6

I think there must be something wrong with the metadata in the original image, the one I was using was a copy that I sent to my other desktop. I just compared the number of bytes between the one I sent you (381 bytes) and the original that won’t open correctly, and it was 904 bytes. Let me try sending you the 904 byte image and see if you have any issues. Again, thank you for the help @mathias !

https://drive.google.com/file/d/14J9r9Pd_xI5RCHXIPRyjKV35Kc68rTb1/view?usp=sharing


#7

I just tested on my work computer, and I can reproduce the issue with the image contained in the second zip file that I linked to.


#8

Ah yep, I’m getting the same results as you when I open your latest image named “lines_and_curves.png”. Same distorted weirdness.

No idea why. I can’t discern anything strange about the image file. Hmmmmmmm.


#9

Because you were able to reproduce the issue as well, I’ve moved this discussion to the I think it’s a bug… category. Let me know if you need any more information from me :blush:


#10

The first difference I noticed between the two images is that when I drag the “bad” one (904 bytes) into PM the “Quantize Colors” window show up, asking how to adapt the image, whereas the “good” image (318 bytes) simply opens without adaptation windows nor problems. The bad image is in True Color 24-bit (16 M colors), whereas the good one has a 16 colors palette.

Also, other difference that I noticed by examining the two images’ properties:

  • bad image is set to 72 DPI, the good one has no DPI settings.
  • bad image contains the comment “Adam7 interleaving” (referring to interlacing algorithm used).

Potentially any of the above extra info might be the culprit interfering with PM importing the image (i.e. an unexpected metadata field not being parsed correctly).

But I suspect that there‘s something wrong in the original image because when I compare the two images with BeyondCompare the diff panel (bottom) shows extra edges, even though the lines and text overlap 100% in the originals (upper left and right panels):

I suspect that the diff edges might be pixelation smudges due to the image have been converted to some lossy formats in the meantime (eg. JPG), so we don’t see the differences with the naked eye, but they’re there and the various algorithms catch it (i.e. when adapting the palette, or when diffing).

Either that or the image is corrupt at the metadata level, somehow leading to bad result.

Since BeyondCompare is also seeing those extra pixel-edges (which become double line when reducing the palette to 16 colors in PM), it’s definitely not a bug in PMNG, but a problem with the original image.


#11

Actually, I’m not quite sure whether the diff panel is showing off-set edges or color differences. The image doesn’t seem to behave as expected (like in PM, also BC is showing an altered result). For some reason, these lines and text seem to get off-set in the final result (both in PM color adaptation, as well as in BC diff panel). Since the colors seem identical, I can only speculate that the “bad” image end ups distorted after being processed, i.e. horizontally offset by one pixel, which is consistent with the end-results in both PM and BC diff panel.


#12

Further checks with Hex Editor Neo confirm that the PNG data is corrupt in the original image (CE013: Assertion failed):

This whole ordeal really got my attention, it’s unsual to find a corrupt image that manages to pass the checks and produce a distorted result. Apparently, some applications seem to handle this image correctly (I’ve opened it in Aseprite without problems) while others fails (BeyondCompare too, at some level, apparently).

Maybe PMNG could benefit from this image by using it as an edge case to test the validation and conversion algorithms. @GeneralAce55, could please leave both images on GDrive, for future tests and reference? (I’m keeping on my local machine a copy of both the downloaded images, but it would be best if your Zip archives links won’t expire in the near future).

EDIT@GeneralAce55, could you supply more info about this image history? Which app was used to create the original, any other apps it was handled through, and any formats conversions it underwent — just to try and trace where the corrupt data crept in, and whether it might be considered as valid data by other apps.


#13

WOW! OKAY. Looks like you got tajmone’s attention haha.
Awesome analysis, man! I love technical graphics forensics stuff like this.
Wish I would’ve thought to use a diff tool. Beyond Compare is very good.

So the root of the issue lies with the image file eh?
Over the years I’ve dealt with image file issues similar to this. I have a set of images that got partially corrupted at one time which I can’t open in Photoshop due to errors like this:

BUT if I upload them to imgur then download them, they’re “fixed” and I can then use them in Photoshop. Bad file headers and whatnot.

Interestingly, while Photoshop would not open them, my default windows image viewer program COULD open them. Windows can also parse all the said corrupted images and generate thumbnails for them which I can view with Windows Explorer. Windows 10 for some reason doesn’t care about the slightly garbled image data while Photoshop doesn’t even try.


So when it comes to corrupted image files, what determines whether an application fails to open the image or not? Why is Photoshop so picky?
In the case of this thread, seems like it would be better for PMNG to decline opening the image than to open it in a damaged and misleading state. Not sure . . .


#14

Sorry for the late reply, been fighting a migraine all day.

Thank you for the detailed investigation @tajmone! I can absolutely leave both drive links available. I won’t delete them until this issue is resolved one way or another.

As for the image history, it’s a bit hard to say, it was an exercise file from an instructor on Skillshare. However, he does primarily use Krita and it’s what he uses to teach the course, so I think it’s reasonably safe to say that that’s the origin software. As for other information about post processing, I could not tell you. If you’d like I can try reaching out to him if knowing it’s from Krita doesn’t turn out to be enough?

Also, in case it’s important, they way you download the image is by right clicking on it online and using the Save as command. I don’t know if you’ll be able to see it or not, but here’s a link to the resources page that I downloaded it from https://www.skillshare.com/classes/Introduction-to-Pixel-Art/1899666962/projects


#15

Also, @mathias , I’m also on Windows and things seem to work the exact same for me! Also, the image I sent you that does work, is one that I originally sent through Discord, and then downloaded the original file on my work computer, so apparently Discord sanitized it like imgur did for you.


#16

It depends on the image library they use, i.e. whether it’s fault tolerant or not. Also, many image formats have extensions to their standards which are not supported by some libraries, as well as to some unofficial extensions introduced by third party apps which might end up popular even though not officially endorsed (just think of how many non-standard PDF features have gained fame via Acrobat Reader).

Photoshop: SuperPNG plugin

Also, Photoshop 7/CS3 support for PNG is quite limited, and I always use a free third party plugin called SuperPNG, by fnord:

http://www.fnordware.com/superpng/

I’ve always used it for PS7, but now it’s available only for PS CS3, apparently. The source code of the plugin is also available, in case someone is curious about the implementation.

ezGIF online tools

You can also test with ezGIF, an online images converted and optimizer that covers a lot of compression methods as well as animated PNGS:

Before publishing GIF and PNG images, I always test different optimizations with those online tools, but often discover that some optimized images won’t show correctly in some browser or images previewers, and might not open in some applications. You can also download the image optimization and conversion command line tools from the same website.

ImageMagick command line tools

Another tool worth mentioning is ImageMagick, a collection of command line tools (and libraries) which support many image format conversions and manipulations:

From what I remember (long time without using it), these tools should be quite fault-tolerant and could be used to recover corrupted images (if possible). Easiest way to install ImageMagick is via Chocolatey, so you don’t have to remember to manually update it every time.

Altap Salamander image previewer

For previewing images, I use the built-in previewer of Altap Salamander, an alternative to File Explorer (similar to Total Commander) which has recently become free:

https://www.altap.cz/

The image viewer is really good, especially for pixel artists, since it supports many legacy image formats from the home computers and first game consoles era, also providing useful info about the images. This is a fault-tolerant image previewer, so it will show also images that are slightly corrupted.

PMNG vs Malformed Images

That’s a good question. Personally, I’d like PMNG to attempt to load corrupted images, but to always warn me about the problem and let me decide whether to carry on or not, so at least I’ll be aware of the potential problems.

Fault tolerance is, in principle, desirable, and the image library should be able to discern between unrecoverable errors and images which can be still used (although something might get lost or corrupted along the way). Surely, loosing part of an image is better than loosing it all, when it’s an image we created and for which there are no backups anywhere.

Alternate Data Stream

As @GeneralAce55 mentioned, downloading by right clicking over a link could be a reason why images get corrupted in the download process (instead of clicking the download button). Some browsers might also interfere with downloaded images in some cases, and under Windows we need to remember that to all files downloaded from the Internet the system attaches an Alternate Data Stream (ADS):

In some cases ADSs can interfere with file operations — e.g. contents of CHM Help files downloaded from the Internet will be blocked due to the ADS, for safety reasons, and when you manually unlock the CHM document from the file properties dialog, you’re just removing its ADS.

You can always check for the presence of Alternate Data Streams using AlternateStreamView, a free and standalone tool by NirSoft:

https://www.nirsoft.net/utils/alternate_data_streams.html

In various occasions I’ve stumbled on ADSs interfering with file operations, and usually one doesn’t think of ADS as the potential source of the problems (also, without a dedicated tool it can be a bit tricky to view these data stream). So, when images are not working as expected, it’s always worth checking if there might be an ADS interfering — in theory, Windows will prevent previews and displaying of any non-executable file downloaded from the Internet, if its file format is known to potentially contain vulnerabilities (e.g. CHM files), and like video formats, some image formats could potentially carry malicious payloads, in which case Windows would block them if they come from the Internet.


Thanks @GeneralAce55!

Indeed, many tools and web services do this type of sanitation — usually, to remove unneeded metadata and save space, sometimes to add their own and track usage. This is where image libraries play their part, for to do this they need to “parse” the image and rebuild it, and in case of fault-tolerant image libraries they’ll fix the original problem by leaving out the corrupt data or fixing it somehow.


Of course, this is a broad subject, because each image format has its own standards, extensions and various implementations. Usually applications don’t write their own image processing libraries but rely on some dedicated library (either a single library covering all formats, or independent libraries target one format each).