Compress an image

We can use the quality property on the createDefaultImageWriter function to compress images to lower the output image size in bytes.

As the quality property is only supported for JPEG and WEBP we need to also set the mimeType property to make sure input images are always converted to a compressible format.

import { openDefaultEditor, createDefaultImageWriter } from './pintura.js';

// Open the default image editor in a modal
const editor = openDefaultEditor({
    src: './my-image.jpeg',

    // This will set compression to 10% and convert all images to JPEGs
    imageWriter: createDefaultImageWriter({
        quality: 0.1,
        mimeType: 'image/jpeg',
    }),
});

// Show resulting image preview
editor.on('process', ({ dest }) => {
    const preview = new Image();
    preview.src = URL.createObjectURL(dest);
    document.body.appendChild(preview);
});