Pintura Image Editor v8.78.1

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.

index.html

<!DOCTYPE html>

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

<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>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults({
    imageWriter: {
        quality: 0.1,
        mimeType: 'image/jpeg',
    },
});

function App() {
    return (
        <div className="App">
            <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor v-bind="editorDefaults" src="image.jpeg" />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults({
                imageWriter: {
                    quality: 0.1,
                    mimeType: 'image/jpeg',
                },
            }),
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults({
        imageWriter: {
            quality: 0.1,
            mimeType: 'image/jpeg',
        },
    });
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults({
        imageWriter: {
            quality: 0.1,
            mimeType: 'image/jpeg',
        },
    });
}

<pintura-editor [options]="editorDefaults" src="image.jpeg"></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageWriter: {
                quality: 0.1,
                mimeType: 'image/jpeg',
            },
        });
    });
</script>

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

index.html

<!DOCTYPE html>

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

<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>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

const editorDefaults = {
    imageReader: createDefaultImageReader(),
    imageWriter: createDefaultImageWriter({
        quality: 0.1,
        mimeType: 'image/jpeg',
    }),
    imageOrienter: createDefaultImageOrienter(),
    locale: {
        ...locale_en_gb,
        ...plugin_crop_locale_en_gb,
    },
};

function App() {
    return (
        <div className="App">
            <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor v-bind="editorDefaults" src="image.jpeg" />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: {
                imageReader: createDefaultImageReader(),
                imageWriter: createDefaultImageWriter({
                    quality: 0.1,
                    mimeType: 'image/jpeg',
                }),
                imageOrienter: createDefaultImageOrienter(),
                locale: {
                    ...locale_en_gb,
                    ...plugin_crop_locale_en_gb,
                },
            },
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        createDefaultImageReader,
        createDefaultImageWriter,
        createDefaultImageOrienter,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    setPlugins(plugin_crop);

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

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = {
        imageReader: createDefaultImageReader(),
        imageWriter: createDefaultImageWriter({
            quality: 0.1,
            mimeType: 'image/jpeg',
        }),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
    };
}

<pintura-editor [options]="editorDefaults" src="image.jpeg"></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var {
            createDefaultImageReader,
            createDefaultImageWriter,
            createDefaultImageOrienter,
            setPlugins,
            plugin_crop,
            locale_en_gb,
            plugin_crop_locale_en_gb,
        } = $.fn.pintura;

        setPlugins(plugin_crop);

        var editor = $('#editor').pintura({
            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>