A new PNG spec

A fun trick I do with my web based drawing tools is to save a JSON representation of your document as a comment field inside of a PNG. This way the doc you save is immediately usable as an image but can also be loaded back into the editor. Also means your downloads folder isn’t littered with unintelligible JSON files.

Could you expand on this? It sounds a bit preposterous to save a text, as json, inside an image - and then expect it to be immediately usable… as an image?

no, GP meant they add the JSON text to the meta data of the image as comment.

Not OP, but PNG (and most image/video formats) allows metadata and most allows arbitrary fields. Good parsers know to ignore/safely skip over fields that they are not familiar with.

https://dev.exiv2.org/projects/exiv2/wiki/The_Metadata_in_PN...

This is similar to HTTP request headers, if you're familiar with that. There are a set of standard headers (User-Agent, ETag etc) but nobody is stopping you from inventing x-tomtom and sending that along with HTTP request. And on the receiving end, you can parse and make use of it. Same thing with PNG here.

Save text as JSON as comments but the file itself is a PNG so that you can use it as an image (like previewing it) as they would ignore the comments. However, the OP’s editor can load the file back, parse the comments, and get the original data and continue to edit. Just one file to maintain. Quite clever actually.

this is useful for code that renders images (e.g. data-visualization tools). the image is the primary artifact of interest, but maybe it was generated from data represented in JSON format. by embedding the source data (invisibly) in the image, you can extract it later to modify and re-generate.

A fun trick, but I wouldn't want to explain to users why their things are saved as a .png, not why their things is lost after they opened and saved the PNG in Paint.

This is also how Valetudo delivers robot map data to Home Assistant https://hass.valetudo.cloud.

They're not saving text, they're saving an idea - a "map" or a "CAD model" or a "video game skin" or whatever.

Yes, a hypothetical user's sprinker layout "map" or whatever they're working on is actually composed of a few rectangles that represent their house, and a spline representing the garden border, and a circle representing the tree in the front yard, and a bunch of line segments that draw the pipes between the sprinkler heads. Yes, each of those geometric elements can be concisely defined by JSON text that defines the X and Y location, the length/width/diameter/spline coordinates or whatever, the color, etc. of the objects on the map. And yes, OP has a rendering engine that can turn that JSON back into an image.

But when the user thinks about the map, they want to think about the image. If a landscaping customer is viewing a dashboard of all their open projects, OP doesn't want to have to run the rendering engine a dozen times to re-draw the projects each time the page loads just to show a bunch of icons on the screen. They just want to load a bunch of PNGs. You could store two objects on disk/in the database, one being the icon and another being the JSON, but why store two things when you could store one?

This would be great for things like exported Mermaid diagrams.

Are you the developer of draw.io?

Check what draw.io does when you download a PNG.

That is also how Krita stores brushes. Unfortunately, that can cause some unexpected issues when there's too much data [1][2].

[1] - https://github.com/Draneria/Metallics-by-Draneria_Krita-Brus...

[2] - https://krita-artists.org/t/memileo-impasto-brushes/92952/11...

If a user is using paint to edit their photos, they're 100% not going to be interested in having the source document to play around with.

Macromedia Fireworks did it 20 years ago, the PNG was the default save format. Of course, it wasn’t JSON stored in there…

Macromedia did this when saving Fireworks files into PNG.

Also, Adobe saves AI files into a PDF (every AI file is a PDF file), and Photoshop can save PSD files into TIFF files (people wonder why these TIFFs have several layers in Photoshop, but just one layer in all other software).

> Macromedia did this when saving Fireworks files into PNG. I forgot about this..

Fireworks was my favorite image editor, I don't know that I've ever found one I love as much as I loved Fireworks. I'm not a graphics guy, but Fireworks was just fantastic.

If a patch is needed for libpng to get around the issue, maybe Krita should vendor libpng for usability. It's not unreasonable for people to want to create gigantic files like this.

> save a JSON representation of your document as a comment field inside of a PNG

Can you compress it? I mean, theoretically there is this 'zTXt' chunk, but it never worked for me, therefore I'm asking.

This is also what many AI image gen frontends do, saving the generation specs as comments so you can open the image and get prompt and settings (or, for, e.g., ComfyUI, full workflows) loaded to tweak.

Really, I think its pretty common for tools that work with images generally.

This is what stable-diffusion-webui does too (though the format is unfortunately plaintext); ComfyUI stores the node graph as JSON, etc.

BTW. I am the author of https://www.photopea.com , which is the only software that can open Fireworks files today :D If you have any files, try to open theim (it runs instantly in your browser).

https://community.adobe.com/t5/fireworks-discussions/open-fi...

I was going to say the same thing. It was nice as their native save format could still be opened anywhere.

But you did need to remember to export if you didn't want the extra fields increasing the file size. I remember finding fireworks pngs on web pages many times back then.

Do you have any info on the format used in the PNG chunks? I’d love for someone to recreate Fireworks, it was perfectly adapted to a lot of workflows.

This is such a great use. Excalidraw does this too [0], and uses a two-level extension, `.excalidraw.png`.

[0]: https://excalidraw.com/

It can also become a security issue when users inadvertendly share layers/history/whatever that isn't visible anymore in the final image but still in the editable part.

You’re doing god’s work here, thanks for your service! I use photopea all the time. Probably the most impressive web app I’ve seen in terms of performance.

Proud paid Photopea user here. I can't understand how you guys overcame my mountain of incredulity but you have saved my ass so much. I was literally looking into dual booting before I found your product.

(Not many things handle .ai so well either!!)