Go Bananas

HEIC files in browser games

HEIC (and HEIF) is the photo format iPhones save by default; most browsers can't show it, so Go Bananas converts it to JPEG in your browser before uploading.

HEIC is a version of HEIF, the High Efficiency Image File Format. iPhones and iPads have saved camera photos as HEIC since iOS 11. It keeps photos at roughly half the size of a JPEG of similar quality, but most web browsers can't display it, so it can't go into a web game as it is.

What HEIC is good for in games

HEIC is mostly a source format: your phone photos arrive as HEIC, and you want them in a game as backgrounds, levels, characters, cards or 3D scenes. Go Bananas handles the conversion so you don't have to.

  • After conversion it behaves exactly like a JPEG: good for photos and backgrounds, with no transparency.
  • For a cut-out character with a transparent background, remove the background in a photo editor and save it as PNG or WebP.

Uploading HEIC to Go Bananas

You can add a HEIC or HEIF photo 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.

Before anything is uploaded, your browser converts the photo:

  • It becomes a JPEG at high quality (97%).
  • Its extension changes from .heic or .heif to .jpg, so IMG_2041.heic becomes IMG_2041.jpg.
  • A HEIC holding several frames, such as a Live Photo or a burst, keeps only its first frame.

The conversion happens on your device, so a large photo can take a moment on an older phone. The site itself only accepts the converted JPEG.

From there, it's a JPEG upload:

LimitValue
File sizeUp to 200 MB per file (after conversion)
Image sizeUp to 65,536 pixels on a side, and 100 megapixels in total
Uploads20 per hour per account, 40 per hour per network
Total storage100 MB on a free account; 1 GB with Pro (and for accounts created before May 2026)

In the create panel you then 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, and removes hidden metadata such as camera details and GPS location. Phone photos often record where they were taken, so this matters.
  • Turn into 3D: the site turns the photo 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 HEIC in your game

Once converted, the photo is a JPEG image asset. Its name in your games is the filename without the extension, so IMG_2041.heic becomes "IMG_2041". A clearer name helps: rename the file (for example to "my-street") before uploading, or rename the asset afterwards. Renaming the asset changes the 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 racing game that takes place on "my-street".

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 street = new Image();
street.crossOrigin = 'anonymous';
street.src = window.GAME_ASSETS.images['my-street'].url;
street.onload = () => ctx.drawImage(street, 0, 0, canvas.width, canvas.height);

In a three.js game:

const texture = new THREE.TextureLoader().load(window.GAME_ASSETS.images['my-street'].url);
const backdrop = new THREE.Mesh(new THREE.PlaneGeometry(16, 9), new THREE.MeshBasicMaterial({ map: texture }));

getAssetUrl('my-street') 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.

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 Live Photo became a still: only the first frame is kept. For movement, record a short clip and turn the frames into a sprite sheet.
  • Avoid HEIC altogether: on an iPhone, Settings, then Camera, then Formats, then Most Compatible makes the camera save JPEG instead.
  • Huge photos: a 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.
  • No transparency: the converted file is a JPEG. Cut-outs need PNG or WebP.
  • Deleting an image removes it right away, and games that use it lose it.

From ChatGPT or Claude

The upload_asset tool in the Go Bananas app for ChatGPT and the connector for Claude takes PNG, JPG, GIF and WebP only, up to 5 MB. It doesn't accept HEIC. Convert the photo to JPEG first, or upload it on the Go Bananas website, where the conversion is automatic.

Related

Your turn.

Describe a game in plain language and play it in your browser a few minutes later. Your first game is free, no account needed.

▶ Make a game