How to change image quality

Question

Which parameter to set image quality/dpi

I have an image of certain pixel size. Before saving it I need to reduce its quality (without changing its pixel size).

I send the image to the following functions. If I want to reduce the quality to 87% - how exactly do I do it?

function defineNewImgFile(image) {

    let imgBlob = base64ImageToBlob(image);

    let newFile = new File([imgBlob], image, {
        type: typeOfImg
    });
    return newFile;
}

//changes base64 format
let typeOfImg;

function base64ImageToBlob(str) {
    let pos = str.indexOf(';base64,');
    let type = str.substring(5, pos);
    typeOfImg = type;
    let b64 = str.substr(pos + 8);

    let imageContent = atob(b64);

    let buffer = new ArrayBuffer(imageContent.length);
    let view = new Uint8Array(buffer);

    for (let n = 0; n < imageContent.length; n++) {
        view[n] = imageContent.charCodeAt(n);
    }

    let blob = new Blob([view], {
        type: type
    });

    return blob;
}

You need an image processor. Plenty of them on NPM https://www.npmjs.com/search?q=image%20processor — Constantin Chirila, May 01 '19 at 09:16

score 0 · Answer 1 · answered May 01 '19 at 10:54

0

For image compression, you can use sharp

answered May 01 '19 at 10:54

Rahul TP

536
5
9

score -2 · Answer 2 · edited May 01 '19 at 12:44

-2

Try this:

Javascript Function Code

var yourImg = document.getElementById('yourImgId');
if(yourImg && yourImg.style) {
    yourImg.style.height = '100px';
    yourImg.style.width = '200px';
}

Front End Code:

<img src="src/to/your/img.jpg" id="yourImgId" alt="alt tags are key!"/>

edited May 01 '19 at 12:44

answered May 01 '19 at 09:20

Ashish Dwivedi

45
6

This only adjusts with width & height of the image and does not affect its actual resolution. – May 01 '19 at 10:39
1

OP said he wanted to reduce the image quality (like the JPG compression) and **not** the size. This only reduces the size in the HTML display of the image. – Chris Barr May 01 '19 at 12:46

How to change image quality

2 Answers2