Introduction

Portable Network Graphics (PNG) is a popular raster graphics file format known for its lossless compression and wide support across various platforms and applications. In this blog post, we’ll delve into how PNG works, its format structure with a focus on headers and chunks, and how Draw.io leverages these features to embed drawing code within PNG files.

Related video from my Youtube channel:

The PNG Format

PNG was developed to replace the older Graphics Interchange Format (GIF). It offers several advantages, including better compression and support for a wider range of colors and transparency levels. Unlike JPEG, which is a lossy format, PNG preserves the original image quality, making it ideal for images that require precise details, such as text, graphics, and illustrations.

Structure of a PNG File

A PNG file is composed of a series of chunks. Each chunk has a specific function and structure, allowing for flexible and efficient image data storage. Here’s a breakdown of the core components of a PNG file:

1. PNG Signature: The file starts with an 8-byte signature that identifies the file as a PNG image. This signature is essential for programs to recognize and process the file correctly.
2. Chunks: Following the signature, the file consists of multiple chunks. Each chunk has four main parts:
   • Length (4 bytes): The length of the data field.
   • Chunk Type (4 bytes): A four-letter ASCII code specifies the chunk type.
   • Chunk Data (variable length): The data contained in the chunk.
   • CRC (4 bytes): A cyclic redundancy check value for error-checking.

There are several critical chunks, including:

• IHDR (Image Header): Contains basic information about the image, such as width, height, bit depth, color type, compression method, filter method, and interlace method.
• PLTE (Palette): Defines the color palette used if the image is paletted.
• IDAT (Image Data): Contains the actual image data, compressed using the zlib algorithm.
• IEND (Image End): Marks the end of the PNG file.

Additional chunks can store metadata, text information, and other data, enabling extended functionalities.

How Draw.io Embeds Code in PNG Files

Draw.io is an online diagramming tool that allows users to create a wide range of diagrams, from flowcharts to network diagrams. One of its unique features is the ability to embed the diagram’s XML code directly within a PNG file. This makes it easy to share and store diagrams without needing separate files for the image and the underlying code.

Here’s how Draw.io achieves this:

1. Embedding XML in a PNG: Draw.io takes advantage of PNG’s chunk-based structure by adding a custom chunk that contains the diagram’s XML data. This chunk is typically labeled zTXt or tEXt to indicate compressed or uncompressed textual data, respectively.
2. Custom Chunk Integration: When a user saves a diagram as a PNG in Draw.io, the application generates the diagram’s XML representation and compresses it if necessary. This XML data is then inserted into a custom chunk within the PNG file.
3. Reading Embedded Data: When the PNG file is opened in Draw.io, the application scans the chunks, identifies the custom chunk containing the XML data, extracts it, and reconstructs the diagram based on the embedded code.

This seamless integration allows users to benefit from the portability and compatibility of the PNG format while maintaining the ability to edit and update the diagrams within Draw.io.

Conclusion

PNG is a versatile and powerful image format, and its chunk-based structure offers extensive flexibility for embedding additional data. Draw.io leverages this feature to embed the diagram’s XML code directly within PNG files, making it convenient for users to share and edit diagrams without losing any information. Understanding the inner workings of PNG and its structure not only enhances our appreciation for this format but also opens up possibilities for creative and innovative uses in various applications.

Interesting links

https://es.wikipedia.org/wiki/Portable_Network_Graphics

https://github.com/pedrooaugusto/steganography-png

Note: This post has been partly generated with Chat-GPT