Png to code -- By gouz

Image to code converter

Author :  gouz

Just drag & drop your images! Accepts PNG, BMP and more.

Go to PNG to Code
Author :  jicehel

Cool, quick and usefull  ;)

Author :  Aurélien Rodot

Pretty handy indeed! I like it so much I just embedded so you can use it directly from here :)

Author :  STUDIOCRAFTapps

Dosen't work for me. It's probably because I use the default browser. Edit: I included more info in the reply.

Author :  Aurélien Rodot

As usual, STUDIOCRAFTapps:

  • What did you try to do?
  • With what OS?
  • With what browser?
  • What went wrong?
  • How to reproduce the bug?

Don't say too much. Not too little. If you want to help, give what's needed to reproduce the bug. And then we might be able to fix it if there is actually a bug.


Author :  MicroGames


I really like programs that help you with development. :)

Author :  STUDIOCRAFTapps

1. Drop my file in the Safari browser, It didn't work. I tried in chrome and it worked.

2. What OS? MacOS 10.12.2

3. Safari 10.0.2

4. The image didn't appear where it should, the code wasn't there. The problem probably comes when I import a file. The import box did become darker but it didn't accept the file.

5. I don't know.

6. I've leaned my lesson. If I find a bug, I'll report it

7. Uhm... I only did it once a long time ago! I won't do it and why would I do that? You already told other people to not do that.

8. It's a great tool! I've tested it on chrome.

Author :  Aurélien Rodot

Bug report: I just found that when you convert to index it should use the uint8_t type instead of the uint16_t type for the array. This way don't don't have to specify the ColorMode when you declare your Image.

Also, could you update it with the new color palette ? DARKGRAY is now 0x5268 and PURPLE 0x9008

Other nice additions would be that it uses the file name for the variable name, and that it support setting the number of frames for animated Images :)

Thanks :D

Author :  STUDIOCRAFTapps

It can transform Gifs into flash animated Images? I'll add that function to my tool if I can.

Author :  Sorunome

I get on drag&dropping the following in the error console: "TypeError: setting getter-only property "files"" and it doesn't convert :/

I'm using waterfox (so basically firefox) on linux

Author :  jicehel

You maybe could had a button to copy code into the clipboard to be able to paste it quickly in code. This tool is very usefull. (I know you can CTRL+A and CTRL + C, but a button could maybe be more easy. Just an idea)

Author :  Vincent

Hello everyone :-)

When I'm converting a png-image to indexed, I get a seemingly working code. However, if I use it in Arduino IDE and compile the sketch, some colors are interpreted in a weird way (peach-tones are interpreted as red for example, so basically I get a whole different coloured Image) :-O

Some colors work however (for example red is red). 

I am using a different palette than the standard one (I use edg16), do I have to do something else to get the right colors out of the converter? 

I am thankful for every kind of help :-) Thanks in advance,


Author :  Sorunome

I am using a different palette than the standard one (I use edg16), do I have to do something else to get the right colors out of the converter?

Currently the only way to use a custom palette is by changing it in the JS debug console. Just set the variable `colorIndex` to the array of the RGB565 values of your index

Author :  Vincent

Thanks for the quick answer!

So what I am doing now is creating the images in the standart palette, converting these to code and change the colors by altering the colorIndex variable. It is a little bit of extra time spend but it works! Thank you very much :-) 

Author :  jicehel

Do you think that a code to bmp converter could be cool too ? For example copying code of a sprite of the standard Gamebuino into this converter could make a bmp easy to colorized before being imported into the META version of the program. It' maybe not a good idea, just an idea...

Author :  strangenikolai

Hi all. I wanted to use this without having to stack all my tiles vertically so I played around in jsfiddle to add a framewidth input (0 works as currently). Here's the link

Author :  strangenikolai

Hi again, I've started to add some Palette options to this also ( but I've found I have an issue with transparency.

I think for each image you need to sacrifice one of the 16 colours to be the transparent colour and use that as a fill in transparent areas. Either that or the index matching code needs some mods... 

Author :  Sorunome

that is correct, in indexed mode you sacrifice one of the 16 colors for transparency

Author :  gantois_fabrice


je ne comprends pas l'usage de cette page lorsque je glisse une image .png rien ne se produit pas de code généré à recopier dans mon source ?
help me please !


Author :  jicehel

Tu dois la glisser dans la zone "Drop your image into this zone" et tu récupères le code juste en dessous.

Si tu as un problème en faisant comme ça, essayes de sauvegarder ton image en BMP 24bits et réessayes pour voir si c'est un problème de format de tes images en PNG.