WebP files in browser games
WebP is a modern web image format that makes smaller files than PNG or JPEG and still supports transparency, a good default for game art that has to load fast.
WebP was made for the web. It can compress lossy (like JPEG) or lossless (like PNG), it supports transparency in both modes, and it can hold animations. All current browsers show it.
What WebP is good for in games
- Sprites and characters with transparency, at a smaller size than PNG.
- Backgrounds and scenery, usually smaller than the same image as JPEG at similar quality.
- Games meant for phones, where every megabyte saved means faster loading.
WebP has a few weaker spots:
- Very old browsers and some image editors don't handle it. If your editor can't export WebP, use PNG or JPEG.
- In the create panel, "Turn into 3D" is only offered for JPEG and PNG.
- Animated WebP only plays where the browser shows the image itself, not when a game draws it (see the tips).
Uploading WebP to Go Bananas
You can add a WebP 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 WebP: its first bytes and its file type must match the .webp extension. Empty files are rejected.
When you add a WebP in the create panel, you see a preview, and nothing is uploaded until you choose Keep as Image. The site then saves the image in WebP, applies its rotation setting, and removes hidden metadata such as camera details and GPS location. Animated WebP files are stored exactly as uploaded.
From the Assets tab, a "Convert to 3D?" question appears after the upload. For a photo you want as a 3D scene, a JPEG or PNG is the safer choice, since that's what the create panel offers 3D for. See the 3D games guide. Until you choose, only you can see the image.
Using WebP in your game
Each image has a name in your games: its filename without the extension, so knight.webp becomes "knight". 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 "knight" for the player and "dungeon-floor" for the ground tiles.
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 knight = new Image();
knight.crossOrigin = 'anonymous';
knight.src = window.GAME_ASSETS.images['knight'].url;
knight.onload = () => ctx.drawImage(knight, player.x, player.y);In a three.js game, a transparent WebP works well as a sprite:
const texture = new THREE.TextureLoader().load(window.GAME_ASSETS.images['knight'].url);
const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: texture }));
scene.add(sprite);getAssetUrl('knight') 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
- Lossy or lossless? Export sprites and pixel art as lossless WebP so edges stay exact. Export photos and backgrounds as lossy WebP; a quality setting around 75 to 85 usually looks the same as the original.
- Transparency with small files: lossy WebP can keep a transparent background, which neither JPEG nor GIF can do well.
- Animations that don't move: when a game draws an animated image on a canvas or uses it as a 3D texture, browsers draw a single frame. For animation in a game, use a sprite sheet: one image holding all the frames side by side.
- Canvas errors after drawing (getImageData fails): set
crossOrigin = 'anonymous'before settingsrc. - 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 WebP 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/...).