How to change quality for an image using the base64 encode (or sharp) ?

[rapgodnpm]

What is your question?

How to change quality for an image using the base64 encode ?

Hello,

Could you please help me with a JSON example on how to add the quality parameter for an image using the new base 64 encoding?

I've tried

{ edits: { quality: 50, } bucket: 'test', key: 'test.jpg', }

and

{ edits: { resize: { quality: 50, } } bucket: 'test', key: 'test.jpg', }

[dougtoppin]

@rapgodnpm You did not include an error message that you might be getting in the backend Lambda CloudWatch logs but you may have a json syntax error in what you provided.

The following is an example that might work for you.

const imgReq = JSON.stringify({
    bucket: 'test',
    key: 'test.jpg',
    edits: {
      quality: 50
    }
  });

  const encStr = Buffer.from(imgReq).toString('base64');
  const imageUrl = `https://api.cloudfront.net/${encStr}`;
  console.log(imageUrl);

Including the resize would look like the following

const imgReq = JSON.stringify({
    bucket: 'bucket',
    key: 'test.jpg',
    edits: {
      quality: 50,
      resize: {
        width: 200,
        hight: 100
      }
    }
  });

  const encStr = Buffer.from(imgReq).toString('base64');
  const imageUrl = `https://api.cloudfront.net/${encStr}`;
  console.log(imageUrl);

If you have any other questions or need more detail, this issue can be re-opened or post a question in the Discussions area.

[rapgodnpm]

Hello @dougtoppin ,

Thank you for your quick reply. I tried the above but it doesn't seem to work. Here is an example of what I am sending:

{
    "edits": {
        "quality": 50,
        "resize": {
            "width": 600,
            "height": 460
        }
    },
    "bucket": "bucket",
    "key": "image.jpg"
}

I compare it with the image with 100 quality or no quality set at all and they have the same size and look the same. I need to mention that I have autowebp enabled.

Thank you in advance for your kind help and support.

[dougtoppin]

@rapgodnpm I am moving this to the Discussions/Q&A as it is more appropriate in that section

Quality changes are associated with the image format and the following is the correct way to specify it in a request.

This was tested using quality values of 100 and 50. The results can be compared using Preview on Mac with Tools->Adjust Color.

The color palette that appears shows a difference between the two along with the returned image file size being smaller for lesser quality values.

const imgReq = JSON.stringify({
    bucket: 'test',
    key: 'test.jpg',
    edits: {
        resize: {
            width: 1000,
            height: 500
        },
        jpeg: {
            quality: 100
        }
    }
});

const encStr = Buffer.from(imgReq).toString('base64');
const imageUrl = `https://api.cloudfront.net/${encStr}`;
console.log(imageUrl);