remotion-dev/remotion · error · Error

Remote asset is not a supported image

Error message

Remote asset is not a supported image

What it means

After a successful download, Browser Studio sniffs the file's magic bytes with detectFileType() and requires isImageFileType() to pass. Remote import supports only raster images - PNG, APNG, JPEG, WebP, BMP, and GIF (the same set as the accept header sent with the request). Videos, audio, PDFs, HTML pages, SVGs, AVIF, and unrecognized binaries are rejected even when the HTTP request returned 200.

Source

Thrown at packages/browser-studio/src/download-remote-asset.ts:131

			let offset = 0;
			for (const chunk of chunks) {
				contents.set(chunk, offset);
				offset += chunk.byteLength;
			}
		}
	} catch (error) {
		if (error instanceof Error && error.name === 'AbortError') {
			throw new Error('Timed out downloading remote asset');
		}

		throw error;
	} finally {
		clearTimeout(timeout);
	}

	const fileType = detectFileType(contents);
	if (!isImageFileType(fileType)) {
		throw new Error('Remote asset is not a supported image');
	}

	const assetPath = getRemoteAssetFilename({fileType, url});
	const existing = Object.entries(getProject().publicFiles ?? {}).find(
		([path]) => path.replace(/^\/+/, '') === assetPath,
	)?.[1];
	if (
		existing !== undefined &&
		getPublicFileSize(existing) !== contents.byteLength
	) {
		throw new Error(
			`File with name ${assetPath} already exists and is different`,
		);
	}

	if (existing === undefined) {
		await writeStaticFile({
			contents: contents.slice().buffer,

View on GitHub (pinned to 10db9de073)

Solutions

1. Verify the URL actually returns a PNG, JPEG, WebP, BMP, or GIF image (open it in a browser tab and check)
2. If a proxy or CORS relay wraps errors in HTML/JSON with status 200, use the direct asset URL instead
3. Convert SVG or AVIF assets to PNG/WebP before importing
4. Import video and audio through a different mechanism - remote import is image-only

Example fix

// before: importing an SVG (not in the supported set)
await downloadRemoteAssetInBrowserStudio({getProject, request: {url: 'https://example.com/logo.svg'}, writeStaticFile});

// after: preflight the content type and convert to a supported raster format
const head = await fetch('https://example.com/logo.svg', {method: 'HEAD'});
const type = head.headers.get('content-type') ?? '';
if (!['image/png', 'image/jpeg', 'image/webp', 'image/bmp', 'image/gif'].some((t) => type.startsWith(t))) {
  throw new Error('Convert the asset to PNG/JPEG/WebP/BMP/GIF before remote import');
}

const supported = ['image/png', 'image/jpeg', 'image/webp', 'image/bmp', 'image/gif'];
const head = await fetch(url, {method: 'HEAD'});
const contentType = (head.headers.get('content-type') ?? '').split(';')[0];
if (!supported.some((t) => t === contentType)) {
  throw new Error(`Remote import supports PNG/JPEG/WebP/BMP/GIF only, got ${contentType || 'unknown'}`);
}

const isSupportedImageContentType = (value: string | null): boolean =>
  ['image/png', 'image/jpeg', 'image/webp', 'image/bmp', 'image/gif']
    .some((t) => (value ?? '').startsWith(t));

try {
  await downloadRemoteAssetInBrowserStudio({getProject, request, writeStaticFile});
} catch (e) {
  if (/not a supported image/.test(String((e as Error).message))) {
    // tell the user the URL did not return PNG/APNG/JPEG/WebP/BMP/GIF bytes
  } else throw e;
}

When it happens

Trigger: Calling downloadRemoteAssetInBrowserStudio with a URL that returns anything other than a sniffer-recognized PNG/APNG/JPEG/WebP/BMP/GIF payload: an MP4 or MOV, an HTML soft-error page served with status 200, an SVG or AVIF image, a JSON error body from a CORS relay, or a truncated/corrupt file.

Common situations: Pasting a link to a video instead of a still; CDN edge pages that return HTML with 200; dynamic URLs that 200 with an error document; SVG or AVIF assets that are valid images but outside the supported set.

Related errors

• Unknown fit: ${fit}
• Only HTTP(S) URLs can be imported
• Remote asset exceeds the 50MB size limit
• File with name ${assetPath} already exists and is different
• No "src" prop was passed to <CanvasImage>.

AI-assisted analysis of remotion-dev/remotion@10db9de073 (2026-08-22). Data as JSON: /api/errors/2560dd3ffc874263. Report an issue: GitHub.