Question 49952 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to reduce data:image/png;base64 file size Javascript, Next.js

I’m working with a lot of images on a project website and the performance has gone down a lot and I have received many warnings from Next.js.

I want to reduce the file size of the base64 string so that I can reduce the database storage and improve general performance.

currently the byte string looks sorta like. "iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAEAAElEQVR4nEz9Wa8sa5IdiK1lZp97xN5nuEMOlZWVJKs5VQNUNwUIakiQBOhRr3rTD9Cj.."

Tags:

2

Answers


  1. 0

    You can use sharp to compress images without losing too much quality by setting the appropriate compression options.

    import sharp from 'sharp';

const inputFile = 'path/to/input/image.jpg';
const outputFile = 'path/to/output/image.jpg';
const quality = 80; // a value between 0 and 100, where 0 is the lowest quality and 100 is the highest quality

sharp(inputFile)
  .jpeg({ quality })
  .toFile(outputFile, (err, info) => {
    if (err) {
      console.error(err);
    } else {
      console.log(info);
    }
  });
    Login or Signup to reply.
  2. 0

    Your images are already compressed. You can un-base64 the png image, try pngcrush on it, and then re-base64 it. That may or may not give you much mileage.

    If you need to keep them as png images and not change their content, e.g. not reduce the sizes of the images, then that will be about as good as you can do.

    If you are ok with losing some image quality and seeing some artifacts, and if jpeg images can be used in their place, then you can use sharp as suggested in another answer to read in the png images and write out jpeg images. Or if the destination can accept it, you can try the WebP format instead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search