4 ms·

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

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.

tomtom1337 1y ago
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?
- behnamoh 1y ago
  no, GP meant they add the JSON text to the meta data of the image as comment.
- bitpush 1y ago
  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_PNG_files 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.
- chown 1y ago
  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.
- woodrowbarlow 1y ago
  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.
- LeifCarrotson 1y ago
  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?
- meindnoch 1y ago
  Check what draw.io does when you download a PNG.
dtech 1y ago
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.
- KetoManx64 1y ago
  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.
- account42 1y ago
  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.
geekifier 1y ago
This is also how Valetudo delivers robot map data to Home Assistant https://hass.valetudo.cloud https://hass.valetudo.cloud.
neuronexmachina 1y ago
This would be great for things like exported Mermaid diagrams.
paisawalla 1y ago
Are you the developer of draw.io?
shiryel 1y ago
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-Brushes/issues/4 https://github.com/Draneria/Metallics-by-Draneria_Krita-Brus... [2] - https://krita-artists.org/t/memileo-impasto-brushes/92952/116 https://krita-artists.org/t/memileo-impasto-brushes/92952/11...
- oakwhiz 1y ago
  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.
speps 1y ago
Macromedia Fireworks did it 20 years ago, the PNG was the default save format. Of course, it wasn’t JSON stored in there…
- usef- 1y ago
  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.
IvanK_net 1y ago
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).
- giancarlostoro 1y ago
  > 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.
  - IvanK_net 1y ago
    BTW. I am the author of https://www.photopea.com 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-fireworks-png-files-without-fireworks-and-convert-them-to-layered-psd/td-p/11716164 https://community.adobe.com/t5/fireworks-discussions/open-fi...
    - speps 1y ago
      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.
    - eigenvalue 1y ago
      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.
    - Andrex 1y ago
      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!!)
osetnik 1y ago
> 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.
dragonwriter 1y ago
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.
akx 1y ago
This is what stable-diffusion-webui does too (though the format is unfortunately plaintext); ComfyUI stores the node graph as JSON, etc.
japanuspus 1y ago
This is such a great use. Excalidraw does this too [0], and uses a two-level extension, `.excalidraw.png`. [0]: https://excalidraw.com/ https://excalidraw.com/

tomtom1337 1y ago

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?

behnamoh 1y ago
no, GP meant they add the JSON text to the meta data of the image as comment.
bitpush 1y ago
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_PNG_files 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.
chown 1y ago
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.
woodrowbarlow 1y ago
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.
LeifCarrotson 1y ago
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?
meindnoch 1y ago
Check what draw.io does when you download a PNG.

dtech 1y ago

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.

KetoManx64 1y ago
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.
account42 1y ago
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.

geekifier 1y ago

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

neuronexmachina 1y ago

This would be great for things like exported Mermaid diagrams.

paisawalla 1y ago

Are you the developer of draw.io?

shiryel 1y ago

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-Brushes/issues/4 https://github.com/Draneria/Metallics-by-Draneria_Krita-Brus... [2] - https://krita-artists.org/t/memileo-impasto-brushes/92952/116 https://krita-artists.org/t/memileo-impasto-brushes/92952/11...

oakwhiz 1y ago
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.

speps 1y ago

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

usef- 1y ago
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.

IvanK_net 1y ago

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).

giancarlostoro 1y ago
> 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.
- IvanK_net 1y ago
  BTW. I am the author of https://www.photopea.com 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-fireworks-png-files-without-fireworks-and-convert-them-to-layered-psd/td-p/11716164 https://community.adobe.com/t5/fireworks-discussions/open-fi...
  - speps 1y ago
    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.
  - eigenvalue 1y ago
    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.
  - Andrex 1y ago
    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!!)

osetnik 1y ago

> 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.

dragonwriter 1y ago

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.

akx 1y ago

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

japanuspus 1y ago

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