Large Photos
Edit Large Photos, HEIC and AVIF in the Browser
Embed Editor works on at most 16.7 MP of any photo, so a 48 MP phone photo opens without running out of memory. HEIC, AVIF and the other common formats open directly, and maxWidth, maxHeight and outputType keep what people upload small. It is the same in every edition and browser.
The editor, running in your browser, opened on an ordinary photo, not a 48 MP one. The numbers on this page are from the docs' measurements. Photo by Hugh Whyte on Unsplash.
What It Does
What Large Photos Gives Your Users
A 16.7 MP Working Copy
A photo above 2^24 px is scaled down once when it opens, keeping its ratio. The screen, Auto, smart crop, the thumbnails and the export all use that copy, so it behaves the same in every browser.
Measured on a Phone-Class Browser
On WebKit standing in for an iPhone 15, a 48 MP photo peaked at 1.17 GB through one Save at 16.7 MP against 2.78 GB at full size, and saved in 0.23 to 0.31 s against 0.75 to 0.89 s.
HEIC and AVIF Open Directly
JPEG, PNG, GIF, WebP, BMP, AVIF, HEIC, HEIF and SVG open directly. Safari decodes HEIC itself; Chromium and Firefox load a bundled decoder only for a HEIC, in a background worker.
Units Your Code Gets Back
onLoad gives the working size and the original file. Saved states use the working size px, so they reopen on the same photo everywhere.
Small Files from Phones
Set maxWidth and maxHeight lower and the export renders straight at that size. Every gesture works with a finger, and controls reach at least 44 × 44 px.
In Code
The Props That Control It
Editor.tsx
<EmbedEditor
onLoad={({ file, size }) => {
// a 48 MP photo: size is 4729 × 3547, file is the original
console.info(size.width, size.height, file);
}}
src={src}
/>The photo: a URL, a File or Blob, its bytes, an img, a canvas or an ImageBitmap.
Called when the photo is on screen, with the original file and the size the editor works at.
The output's largest width, in px.
The output's largest height, in px.
Which type Save writes. A HEIC saves as PNG unless this says otherwise.
Use Cases
Where It Fits
Phone Uploads
Accept 12 to 48 MP photos from a phone and cap them at 2048 px before they reach your server.
HEIC from iPhones
Open iPhone photos in Chrome and Firefox with no code of your own to decode HEIC.
One Output Format
Convert whatever the user picks to JPEG with outputType, so every file you store is one type.
Low-Memory Devices
A full 48 MP photo takes more memory than a phone tab may get, so it opens at a size the phone can hold.
FAQ
Questions
Which image formats does the editor open?
JPEG (EXIF orientation applied, CMYK included), PNG, GIF (its first frame), WebP, BMP, AVIF, HEIC and HEIF, and SVG. TIFF, text and truncated files are refused with a clear error.
Does it open HEIC from an iPhone in Chrome?
Yes. Safari decodes HEIC itself. Chromium and Firefox, Android browsers included, use a bundled decoder that loads only for a HEIC, in a background worker. A 48 MP HEIC takes about 8 s on a fast laptop, longer on a phone.
What happens to a 48 MP photo?
A photo over 16.7 MP is scaled down once when it opens, keeping its ratio: 48 MP becomes 4729 × 3547. Everything, the export included, works on that copy, in every browser.
Does a HEIC photo save as HEIC?
Not by default: a source that is not JPEG, PNG or WebP saves as PNG, so a phone HEIC becomes a large PNG. Set outputType to image/jpeg, and maxWidth and maxHeight lower, for smaller files.
Which pixels does a saved state use for a large photo?
In the working size px, which is the size onLoad reports. A state reopens exactly on the same photo in every browser. Do not pass its crop to processImage as its crop option: those px are not the file ones.
Try large photos in the playground.
It opens with this feature on. Change the edition, the colors and the tools, and copy the code for your app.
More features: Crop, Filters, Annotations, Obfuscate, Watermark, White Label.