v8.38.0

Compress an image for faster upload

We can use the quality property on the createDefaultImageWriter function or imageWriter property 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.

When using one of the default factories or components we only have to set the imageWriter property.

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        imageWriter: {
            quality: 0.1,
            mimeType: 'image/jpeg',
        },
    });
</script>

When not using a default factory we need to manually import the createDefaultImageWriter.

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import {
        appendEditor,
        createDefaultImageReader,
        createDefaultImageWriter,
        createDefaultImageOrienter,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from './pintura.js';

    setPlugins(plugin_crop);

    const editor = appendEditor('#editor', {
        imageReader: createDefaultImageReader(),
        imageWriter: createDefaultImageWriter({
            quality: 0.1,
            mimeType: 'image/jpeg',
        }),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
        src: 'image.jpeg',
    });
</script>