# How are projects saved into PNG files? **URL:** \ **Category:** Help\ **Created:** [November 21, 2025, 7:15pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591 "2025-11-21T19:15:53Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![babol](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/babol/32/27355_2.png) [@babol](https://forum.makecode.com/u/babol)\ **Post date:** [November 21, 2025, 7:15pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/1 "2025-11-21T19:15:53Z")
For a little project i want to get into. ---
**Author:** ![Rune](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rune/32/18951_2.png) [@Rune](https://forum.makecode.com/u/Rune)\ **Post date:** [November 21, 2025, 11:37pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/2 "2025-11-21T23:37:39Z")
@richard This is actually a good question please enlighten us ---
**Author:** ![redSprite](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/redsprite/32/34262_2.png) [@redSprite](https://forum.makecode.com/u/redSprite)\ **Post date:** [November 22, 2025, 1:54am UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/3 "2025-11-22T01:54:19Z")
You mean projects like these? ![arcade-Cool-Projec](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/0/3/03400894ad0f0ff7bc42ca981bb90fd348c38a4d.png) One of two ways: - Press that camera button to create a PNG of what’s currently onscreen. - Save it as an image, which is also a PNG. You can import files to import the PNG/your game. ---
**Author:** ![Reflectfr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/reflectfr/32/32515_2.png) [@Reflectfr](https://forum.makecode.com/u/Reflectfr)\ **Post date:** [November 23, 2025, 12:11am UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/4 "2025-11-23T00:11:36Z")
no i think he ment HOW are they, like questioning how they are made into png files ---
**Author:** ![babol](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/babol/32/27355_2.png) [@babol](https://forum.makecode.com/u/babol)\ **Post date:** [November 23, 2025, 12:13am UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/5 "2025-11-23T00:13:03Z")
no, no, no, not like that. i’m talking about HOW they’re put into those PNG files. where is all this data stored? definitely not in the image. i checked. ---
**Author:** ![Iro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/iro/32/34749_2.png) [@Iro](https://forum.makecode.com/u/Iro)\ **Post date:** [November 23, 2025, 12:23am UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/6 "2025-11-23T00:23:08Z")
No, we want to know HOW it WORKS. (Or aat least I do.) ---
**Author:** ![WoofWoof](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/woofwoof/32/32523_2.png) [@WoofWoof](https://forum.makecode.com/u/WoofWoof)\ **Post date:** [November 23, 2025, 4:51am UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/7 "2025-11-23T04:51:48Z")
You can attach files to images: ![IMG_0805](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/a/c/ac36963458b7fb301b17524f81ee7c56cb3a375e.jpeg) This is usually for metadata like when the picture was taken, what camera or device it was on, location, etc, but you can put whatever you want in there. ---
**Author:** ![babol](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/babol/32/27355_2.png) [@babol](https://forum.makecode.com/u/babol)\ **Post date:** [November 23, 2025, 10:24pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/8 "2025-11-23T22:24:52Z")
and how could i export those files? ---
**Author:** ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)\ **Post date:** [November 23, 2025, 10:28pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/9 "2025-11-23T22:28:58Z")
The png files do contain more information as the project size increases (with a noisy rectangle at the bottom increasing in height). I always thought it was just a low opacity overlay of noise that is somehow decoded back into makecode. When it runs out of space it just continues downwards creating that noisy rectangle and increases image height ---
**Author:** ![redSprite](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/redsprite/32/34262_2.png) [@redSprite](https://forum.makecode.com/u/redSprite)\ **Post date:** [November 23, 2025, 10:47pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/10 "2025-11-23T22:47:26Z")
Huh, didn’t know you could do that. ---
**Author:** ![WoofWoof](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/woofwoof/32/32523_2.png) [@WoofWoof](https://forum.makecode.com/u/WoofWoof)\ **Post date:** [November 24, 2025, 12:04am UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/11 "2025-11-24T00:04:23Z")
Oh yeah I forgot about the noise. You could probably find it in some editing software, the filter you’re talking about. I wonder if it would look like those images of zoomed in physical media, like the images of CDs. Probably less interesting though. Less colorful :( ---
**Author:** ![Bilangus](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/bilangus/32/33219_2.png) [@Bilangus](https://forum.makecode.com/u/Bilangus)\ **Post date:** [November 24, 2025, 1:38am UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/12 "2025-11-24T01:38:15Z")
Also, BIG projects have some… weird stuff in the image. > [@Hyper the dragon devlog](https://forum.makecode.com/t/hyper-the-dragon-devlog/28227/62): > > ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/7/a/7a6180cf0f68485d5b04941abd8b20cb239c631d.png) This is an example from goldtopaz’s Hyper the Dragon, and i think there actually IS stuff stored in the image itself due to this. Just an educated guess tho. ---
**Author:** ![Reflectfr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/reflectfr/32/32515_2.png) [@Reflectfr](https://forum.makecode.com/u/Reflectfr)\ **Post date:** [November 24, 2025, 5:18pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/13 "2025-11-24T17:18:19Z")
My guess is that there’s metadata inside the PNG images (which is why there’s random fuzz that increases in size as the project increases. that’s the metadata. All the data saves into the PNG, and MakeCode is the only software that explicitly reads the data and puts it into blocks and JavaScript. Which allows this cool spectacle! Just my guess, though.) ---
**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\ **Post date:** [December 1, 2025, 3:09pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/14 "2025-12-01T15:09:40Z")
good question! we don’t save the project in the PNG metadata, instead it is saved in the pixels themselves. the PNGs we save are stored in RGBA format; that means that every pixel contains 4 bytes of data: the red channel, the green channel, the blue channel, and the alpha (opacity) channel. each byte is made up of 8 bits (1s or 0s) and we essentially overwrite the bottom halves of each of these bytes (the lowest 4 bits) with bytes from the project. so, let’s take a pixel with color #34EBE8 as an example. for reference, that color looks like this: ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/8/7/874fe5ed9d950fcee25e7ce11be9f78cec162c3d.png) the channel values for this pixel would be: ```plaintext RED: 52 GREEN: 235 BLUE: 232 ALPHA: 255 (opaque) ``` and if we convert that to binary: ```plaintext RED: 01010010 GREEN: 11101011 BLUE: 11101000 ALPHA: 00000000 ``` now let’s say we want to encode a byte from the project inside this pixel. let’s say the byte has value 240, which in binary is `11110000`. to do this, first we’re going to split the byte into two 4 bit chunks (`1111` and `0000`) and we’re going to insert these chunks into the lower 4 bits of the RED and GREEN channels. now our bytes look like this: ```plaintext RED: 0101 [1111] GREEN: 1110 [0000] BLUE: 11101000 ALPHA: 00000000 ``` if we convert those new values back into a hex value, we get #5FE0E8 which looks like this: ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/1/d/1dfbf90b26943efce732c4d778556818a2247c7c.png) almost the same color! just slightly shifted. the average person is unlikely to notice the change, but if you stare really closely at one of the PNGs, you can see that all of the pixels are slightly different colors. now we can repeat this process for every byte in the project we are storing. in this example, we only mess with the RED and GREEN channels, but in actuality we also change the BLUE channel as well. we skip over the ALPHA channel because we don’t want the PNG to be made transparent. so, that means every PNG pixel can contain 1.5 bytes of data from the project. but what about those PNGs that have a bunch of random pixels at the bottom? well, that happens when we don’t have enough pixels in the PNG to store every byte of the project (i.e. the project is really, really big). because we don’t want to lose data from the project, we just add extra pixels to the bottom of the PNG that contain all of the extra data. ---
**Author:** ![AtlasTG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/atlastg/32/25690_2.png) [@AtlasTG](https://forum.makecode.com/u/AtlasTG)\ **Post date:** [December 1, 2025, 5:59pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/15 "2025-12-01T17:59:42Z")
Does this mean that we could theoretically make a project in a image editor and then import it to makecode? ---
**Author:** ![babol](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/babol/32/27355_2.png) [@babol](https://forum.makecode.com/u/babol)\ **Post date:** [December 1, 2025, 5:59pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/16 "2025-12-01T17:59:43Z")
wow, that’s interesting! ---
**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\ **Post date:** [December 1, 2025, 6:10pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/17 "2025-12-01T18:10:32Z")
yup! pretty tough to do that by hand though 😁 ---
**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\ **Post date:** [December 1, 2025, 6:33pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/18 "2025-12-01T18:33:45Z")
i was curious what the full range of potential colors would look like for that sample color i gave so i wrote a quick script to generate it: ![out](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/1/f/1fa4f232fee9aa320e9293ee208e337b256daa4d.png) that image contains every possible color that could be generated by messing the with the lower 4 bits of RGB channels of #34EBE8. even the maximally different options (upper left and lower right) aren’t that far away from each other! ---
**Author:** ![Iro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/iro/32/34749_2.png) [@Iro](https://forum.makecode.com/u/Iro)\ **Post date:** [December 1, 2025, 7:09pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/19 "2025-12-01T19:09:47Z")
Honestly, when I first looked at it, I only saw 4 colors, then you said upper left, so I looked again and saw the sections lol. ---
**Author:** ![babol](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/babol/32/27355_2.png) [@babol](https://forum.makecode.com/u/babol)\ **Post date:** [December 1, 2025, 7:09pm UTC](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591/20 "2025-12-01T19:09:52Z")
well, how is it turned into a project? im sure you have to convert that binary code to something. [Next page](https://forum.makecode.com/t/how-are-projects-saved-into-png-files/40591.md?page=2)