PNG files in browser games

PNG is a lossless image format with transparency, the usual choice for sprites, icons and interface art in Go Bananas games.

PNG (Portable Network Graphics) stores an image without losing any detail, and it supports full transparency through an alpha channel. Every browser can show it. That makes it the safest choice for game art with clean edges, flat colors or see-through parts.

What PNG is good for in games

Sprites and characters with a transparent background, so they sit on top of any scene.
Pixel art: lossless compression keeps every pixel exactly as you drew it.
Interface pieces: buttons, icons, health bars, logos and text drawn into an image.
Sprite sheets: many animation frames packed into one image, with crisp edges between frames.

PNG is weaker for photographs and large painted backgrounds. A photo saved as PNG is often several times bigger than the same photo as JPEG or WebP, and big files make a game slower to load, especially on phones.

For photos and backgrounds, use JPEG.
For the smallest files that still have transparency, use WebP.
For a short looping animation, GIF works, with limits.

Uploading PNG to Go Bananas

You can add a PNG in several places:

the create panel: press 📎, or drag the file onto the chat;
the Assets tab: Upload Asset;
the game editor: its Assets tab (Upload New), its 📎 button, or by dragging the file onto the editor chat.

Uploading needs a signed-in account with a verified email.

Limit	Value
File size	Up to 200 MB per file
Image size	Up to 65,536 pixels on a side, and 100 megapixels in total
Uploads	20 per hour per account, 40 per hour per network
Total storage	100 MB on a free account; 1 GB with Pro (and for accounts created before May 2026)

The site checks that the file really is a PNG: its first bytes and its file type must match the .png extension. Empty files are rejected.

When you add an image in the create panel, you see a preview with two choices, and nothing is uploaded until you pick one:

Keep as Image: the site saves the PNG, applies the image's rotation setting, and removes hidden metadata such as camera details and GPS location.
Turn into 3D: the site turns the picture into a 3D scene you can move around in. See the 3D games guide.

From the Assets tab, the same choice appears after the upload, as "Convert to 3D?". Until you choose, only you can see the image.

Using PNG in your game

Each image has a name in your games: its filename without the extension, so dragon.png becomes "dragon". Renaming the asset changes that name, and code that used the old name will no longer find it. If two of your images share a name, the newest one is used.

The easiest way is to ask the AI. In the create or edit box, type @ to pick one of your files; its name goes in as quoted text:

Use "dragon" as the player sprite and "castle-wall" as the background.

The AI receives the list of your files and matches the quoted name.

In code, every game gets window.GAME_ASSETS, where each image has a full web address. On a 2D canvas:

const img = new Image();
img.crossOrigin = 'anonymous';
img.src = window.GAME_ASSETS.images['dragon'].url;
img.onload = () => ctx.drawImage(img, x, y);

In a three.js game:

const texture = new THREE.TextureLoader().load(window.GAME_ASSETS.images['castle-wall'].url);
const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });

getAssetUrl('dragon') returns the same address; it looks through models, then images, then audio.

Games run in a sandbox where relative addresses don't work, so use the address from GAME_ASSETS (it's absolute) or another full https:// address. Any HTTPS image can load.

A game can see its creator's finished files (up to 100) and those of the games it was remixed from. In games you own, it also sees your own files.

Tips and common problems

A slow-loading background: if a background PNG weighs several megabytes, save it as JPEG or WebP instead. It loads faster and uses less of your storage.
Halos around sprites: semi-transparent edge pixels are kept exactly, so a halo in the source file shows in the game too. Clean it up in your image editor.
Blurry pixel art: browsers smooth images when they scale them up. On a canvas, set ctx.imageSmoothingEnabled = false; in three.js, set the texture's magFilter to THREE.NearestFilter.
Canvas errors after drawing (getImageData fails): set img.crossOrigin = 'anonymous' before setting src.
Deleting an image removes it right away, and games that use it lose it.

From ChatGPT or Claude

The Go Bananas app in ChatGPT and the connector in Claude can upload a PNG to one of your games with the upload_asset tool. It takes PNG, JPG, GIF and WebP, up to 5 MB, sent as base64 data. Images uploaded this way skip the Keep or 3D choice and the metadata cleanup. They are attached to the game straight away and come back with their full address (https://gobananas.co/assets/...).