Compressing Images with Doka | JavaScript Image Editor | Doka by PQINA Doka Product Page

Compressing Images with Doka

Images can be compressed using the standard HTML Canvas API, Doka offers a couple other solutions to further compress images.

JPEG and WEBP Compression in the Browser

Doka handles all image modifications on the client, this means that we rely on the browser or <canvas> element to generate the final output image.

Doka will automatically apply the default browser compression to the output image. You can override the required image compression using the outputQuality property. It takes a value between 0 and 100.

For a good balance between file size and image quality it's best a value around 80 will yield great results, the default browser compression value averages around 94.

Value Compression Visual quality File size
0 High Low Tiny
100 None or very little High Big

Custom Compression of Images

If you want to compress images manually (for example with a third party client script) you can do so in the afterCreateBlob hook. This hook will receive the Blob object created by Doka right before it's returned in any of the "confirm" callbacks or events.

Doka.create({
    afterCreateBlob: blob => new Promise((resolve, reject) => {

        // Do your custom compression here

        // Return the Blob object to Doka
        resolve(blob);
    });
})

Removing the JPEG Image Head

By default Doka will strip the image head from JPEG images. This will remove the image EXIF information. You can set outputStripImageHead to false to retain all EXIF information.

Optimize Image Size

To further lower the file size we can use the outputWidth and outputHeight properties to set an output size. We can set both properties or only one. The outputFit property will determine how Doka fits the image to the defined output size.