Web Performance

Image Optimization

Use webp format

Use webp format for images. It's a modern format that is supported by all modern browsers and much smaller than jpg or png formats.

Reduce image dimensions

The image dimensions should be reduced to the maximum size that is used on the website. For example, if the image is used in a 500px wide container, then the image should be resized to 500px wide. This will reduce the image size and improve the performance.

A typical computer screen is about 1920px wide. So the maximum image size needed for a full screen image is 1920px wide.

Use a conversion tool

Popular webp conversion libraries allow you to convert images to webp format and resize it. For example, sharp (opens in a new tab) is a popular image processing library in Node.js.

Sample code to convert an image to webp format and resize it to various widths:

const widths = [200, 500, 1000, 1920];
const quality = 80;
 
const inputBuffer = fs.readFileSync(inputPath);
 
const image = sharp(inputBuffer);
 
const buffers = await Promise.all(
  widths.map((width) =>
    image.clone().resize(width).webp({ quality }).toBuffer()
  )
);
 
widths.forEach((width, index) => {
  const outputBuffer = buffers[index];
  const finalOutputPath = path.join(
    path.dirname(inputPath),
    `${path.basename(inputPath, path.extname(inputPath))}-${width}.webp`
  );
 
  fs.writeFileSync(finalOutputPath, outputBuffer);
});

Sample results

On average a good webp conversion gives about 30% to 50% size reduction compared to jpg format, depending on the output dimensions and the image content.

Sample images by converting an image from Unsplash (opens in a new tab) into webp format: