←back to thread

A new PNG spec

(www.programmax.net)
616 points bluedel | 7 comments | 24 Jun 25 13:01 UTC | HN request time: 0.917s | source | bottom
Show context
joshmarinacci ◴[25 Jun 25 15:55 UTC] No.44378719[source]▶
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.
replies(12): >>44379250 #>>44379645 #>>44379652 #>>44379867 #>>44379992 #>>44380435 #>>44380543 #>>44380616 #>>44380678 #>>44380701 #>>44380930 #>>44384671 #
1. tomtom1337 ◴[25 Jun 25 16:40 UTC] No.44379250[source]▶
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?
replies(6): >>44379341 #>>44379343 #>>44379377 #>>44379491 #>>44379812 #>>44380371 #
2. behnamoh ◴[25 Jun 25 16:47 UTC] No.44379341[source]▶
no, GP meant they add the JSON text to the meta data of the image as comment.
3. bitpush ◴[25 Jun 25 16:47 UTC] No.44379343[source]▶
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.

4. chown ◴[25 Jun 25 16:49 UTC] No.44379377[source]▶
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.
5. woodrowbarlow ◴[25 Jun 25 16:59 UTC] No.44379491[source]▶
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.
6. LeifCarrotson ◴[25 Jun 25 17:29 UTC] No.44379812[source]▶
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?

7. meindnoch ◴[25 Jun 25 18:23 UTC] No.44380371[source]▶
Check what draw.io does when you download a PNG.