Docs › Images and media
Resize and convert
Shrink big photos before upload, WebP, iPhone HEIC, size and type limits.
Phone photos are often 4000px wide and several MB. Before uploading, 82editor shrinks them in the browser, can turn them into WebP, and converts iPhone HEIC photos to JPEG. That saves server space and your readers' data.
Try it
Insert a large JPEG or PNG. Anything wider than 800px is shrunk and turned into WebP. The browser console logs the name, type and size of the uploaded file, and the width in "Show saved HTML" shows the new size.
Code for this demo
createEditor('#editor', {
toolbar: 'image | undo redo',
imageResize: { maxWidth: 800, quality: 0.8, format: 'webp' },
imageMaxSize: 3 * 1024 * 1024,
imageAccept: 'image/jpeg,image/png,image/webp,.heic,.heif',
uploadImage: async (file) => {
console.log(file.name, file.type, Math.round(file.size / 1024) + 'KB');
return URL.createObjectURL(file);
},
});Shrinking (imageResize)
On by default. JPEG, PNG and WebP photos wider than maxWidth (1600px) are scaled down and saved again at quality (0.85). The original is uploaded unchanged when:
- it is already no wider than
maxWidth - it is not JPEG, PNG or WebP, e.g. a GIF (so animations keep moving)
- the result would be larger, or the browser can't decode it
Turn it off with imageResize: false.
createEditor('#editor', {
imageResize: { maxWidth: 1200, quality: 0.8 },
});Converting to WebP
With format: 'webp', every JPEG and PNG is saved as WebP, even narrow ones, and the file name ends in .webp. If the browser can't write WebP or the result is larger, the original goes up.
iPhone HEIC photos
Most browsers can't show HEIC/HEIF, the iPhone default. Where the browser can read them (Safari), they become JPEG at quality 0.9 before upload. Elsewhere the photo is skipped with a message asking for a JPG. HEIC files that arrive without a type are recognised by their extension.
Size and type limits
imageMaxSizeis checked on the file that is actually uploaded, after shrinking, so a 10MB original that shrinks below the limit still goes in. Too large shows "The file is too large (max …)".imageAcceptis both the file picker filter and the check on insert: MIME types,image/*or extensions like.webp, comma separated. Others show "Only image files can be inserted".
Pasted base64 photos
When pasted content carries data: images, they are uploaded and replaced by addresses if an upload handler is set. Without one they are at least shrunk by the rules above.
Options
| Name | Type | Default | Description |
|---|---|---|---|
imageResize | false | object | on | false uploads originals. |
imageResize.maxWidth | number | 1600 | Photos wider than this are shrunk (px). |
imageResize.quality | number | 0.85 | Encoding quality (0–1). |
imageResize.format | 'webp' | Save JPEG, PNG and WebP as WebP. | |
imageMaxSize | number (bytes) | none | Largest file after shrinking. |
imageAccept | string | 'image/*,.heic,.heif' | Picker filter and insert check. |