# JPEG files in browser games

## JPEG (.jpg or .jpeg) is a compact photo format without transparency, best for backgrounds, scenery and photos in Go Bananas games.

JPEG compresses an image by throwing away detail your eye barely notices, so photos come out small. The .jpg and .jpeg extensions are the same format. JPEG has no transparency: every pixel is a solid color.

## What JPEG is good for in games

- Backgrounds and scenery: skies, landscapes, rooms, painted levels.
- Photos: a picture of your street, your pet or your classroom as a level or a card.
- Textures on 3D objects where nothing needs to be see-through, such as walls, floors and terrain.
- Turning a photo into a 3D scene (see below).

JPEG is weaker for anything with sharp edges or flat colors. Text, outlines and pixel art pick up blurry "artifacts" around the edges, and each re-save loses a little more detail.

- For sprites and anything with a transparent background, use [PNG](/formats/png) or [WebP](/formats/webp).
- For pixel art and interface pieces, use [PNG](/formats/png).
- Photos from an iPhone are often [HEIC](/formats/heic); Go Bananas turns those into JPEG for you.

## Uploading JPEG to Go Bananas

You can add a JPEG 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 JPEG: its first bytes and its file type must match the extension. Empty files are rejected.

When you add a JPEG 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 JPEG, applies the photo's rotation setting (so a phone photo isn't sideways), and removes hidden metadata such as camera details and GPS location. That matters for phone photos, which often record where they were taken.
- **Turn into 3D:** the site turns the photo into a 3D scene you can move around in. It runs in the background after the upload. See the [3D games guide](/guides/3d-games).

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 JPEG in your game

Each image has a name in your games: its filename without the extension, so beach.jpg becomes "beach". 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:

> Make a beach volleyball game with "beach" 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:

```js
const bg = new Image();
bg.crossOrigin = 'anonymous';
bg.src = window.GAME_ASSETS.images['beach'].url;
bg.onload = () => ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);
```

As a texture in a three.js game:

```js
const texture = new THREE.TextureLoader().load(window.GAME_ASSETS.images['brick-wall'].url);
const wall = new THREE.Mesh(new THREE.BoxGeometry(4, 2, 0.2), new THREE.MeshStandardMaterial({ map: texture }));
```

`getAssetUrl('beach')` 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

- **Huge phone photos:** a recent phone photo can be 12 megapixels or more. A background rarely needs more than about 2,000 pixels across, so shrinking it first makes the game load faster and saves storage.
- **A white box around a character:** JPEG can't be transparent. Save the character as PNG or WebP with a transparent background.
- **Blurry text in images:** JPEG blurs sharp edges. Draw text in the game itself, or use PNG for images with lettering.
- **Repeated re-saving:** each JPEG save loses a little quality. Keep your original and export a fresh copy when you change it.
- **Canvas errors after drawing (getImageData fails):** set `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 JPEG 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, so remove location data from a photo before sending it. They are attached to the game straight away and come back with their full address (https://gobananas.co/assets/...).

## Related

- [PNG files](/formats/png)
- [WebP files](/formats/webp)
- [GIF files](/formats/gif)
- [HEIC files](/formats/heic)
- [All file formats](/formats)
- [How to make a video game](/guides/how-to-make-a-video-game)
- [How to describe a game so the AI builds it](/guides/how-to-describe-a-game)
- [3D games](/guides/3d-games)
- [Games that work on phones](/guides/games-on-phones)