Как преобразовать jpeg в прогрессивное изображение в JavaScript?

Вы можете использовать модуль sharp, он имеет много функций и действительно хороший. Если вы просто хотите преобразовать в прогрессивный JPEG, тогда

const sharp = require("sharp")

const main = async () => {
  try {
    const data = await sharp('10.jpg')
      .jpeg({
        quality: 100, // adjust the quality
        progressive: true
      })
      .toBuffer();
    await sharp(data).toFile('output.jpg')
  } catch(error) {
    console.log(error)
  }
}

main()

Ссылка на повтор для кода.

У меня есть еще один функциональный пример: когда изображение попадает в корзину S3, оно запускается лямбдой (Node JS), которая также использует lib sharp для оптимизации размера изображения, а затем публикует новое изображение в другой папке в s3. Вот пример:

"use strict";

const AWS = require("aws-sdk");
const sharp = require("sharp");
const { basename, extname } = require("path");

const S3 = new AWS.S3();

module.exports.handle = async ({ Records: records }) => {
  try {
    await Promise.all(
      records.map(async (record) => {
        const { key } = record.s3.object;

        const image = await S3.getObject({ Bucket: process.env.bucket, Key: key }).promise();

        // blob
        const optimized = await sharp(image.Body)
          .resize(1280, 720, {
            fit: "inside",
            withoutEnlargement: true,
          })
          .toFormat("jpeg", {
            progressive: true,
            quality: 50,
          })
          .toBuffer();

        await S3.putObject({
          Body: optimized,
          Bucket: process.env.bucket,
          ContentType: "image/jpeg",
          Key: `compressed/${basename(key, extname(key))}.jpg`,
        }).promise();
      })
    );

    return {
      statusCode: 301,
      body: { ok: true },
    };
  } catch (error) {
    return error;
  }
};

Вместо этого попробуйте WebP, хотя он и не разработан как прогрессивный, но его можно использовать в сочетании с отложенными загрузчиками. Это гораздо лучший формат для сжатия (файл 1mb jpeg может в итоге получиться просто 300kb).

Учти это:

• 24 КБ заполнитель

• Ленивая загрузка с эффектом затухания -

• 300 КБ веб-сайт

Попробуйте пакет webp-loader, который можно использовать в сборках webpack.