editor

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

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

  • imageMaxSize is 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 …)".
  • imageAccept is 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

NameTypeDefaultDescription
imageResizefalse | objectonfalse uploads originals.
imageResize.maxWidthnumber1600Photos wider than this are shrunk (px).
imageResize.qualitynumber0.85Encoding quality (0–1).
imageResize.format'webp'Save JPEG, PNG and WebP as WebP.
imageMaxSizenumber (bytes)noneLargest file after shrinking.
imageAcceptstring'image/*,.heic,.heif'Picker filter and insert check.