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.
- The
'force'
value will force the image to the output size, no matter if its aspect ratio matches the crop aspect ratio, this might result in skewed images. - The
'cover'
value will scale up the image so it covers the output size. This will result in either the width or the height overflowing but the aspect ratio will be maintained. - The
'contain'
value will scale down the image so it fits inside the output size. Resulting in an image that is smaller than one of the defined axis but aspect ratio is maintained.