Как без потерь оптимизировать изображения с помощью плагинов для grunt-contrib-imagemin?

Question

Я пытаюсь без потерь оптимизировать изображения JPEG / PNG с imagemin, но у меня возникла проблема при использовании расширений, они «деоптимизируют», что означает, что результирующее изображение больше исходного.Как я могу предотвратить это?

Это мой Gruntfile.js

...
grunt.initConfig({
    imagemin: {
        jpeg: {
            options: {
                //by default it uses imageminJpegtran
                progressive: true,//default false, progressive JPEG is better compression https://superuser.com/questions/463477/progressive-jpeg-quality-compare-to-normal-jpeg
                arithmetic: false,//true breaks image

                //don't know how to use it loseless without making the images even bigger
                // use: [
                //  imageminMozjpeg({
                //      quality: 95, //Compression quality, in range 0 (worst) to 100 (perfect).
                //      dcScanOpt: 2,//2 Optimize between one scan for all components and one scan for 1st component plus one scan for remaining components
                //      arithmetic: false// false, or it breaks the image
                //  }),
                // ],
            },
            files: [{
                expand: true,
                cwd: '/www',
                src: ['**/*.{jpg,jpeg,JPG,JPEG}'],
                dest: '/www',
                filter: 'isFile'
            }]
        }
    }
});
...

Answer 1

У вас есть ответ в заголовке вашего вопроса - "grunt-contrib-imagemin". Если вы зашли на Google, вы найдете эту страницу на GitHub для Grunt.js в качестве официального сайта Grunt GitHub. На этой странице все описано очень подробно.

Например:

Для плагина imagemin OptiPNG:

optimizationLevel (Это для PNG (для плагина OptiPNG) и НЕ ДЛЯ JPG!)
Тип: number
По умолчанию: 3
Выберите уровень оптимизации между 0 и 7.

Уровень оптимизации 0 обеспечивает набор операций оптимизации, которые требуют минимальных усилий. Не будет никаких изменений атрибутов изображения, таких как битовая глубина или тип цвета, и не будет повторного сжатия существующих потоков данных IDAT. Уровень оптимизации 1 позволяет провести однократную пробную компрессию IDAT. Выбранное испытание - это то, что OptiPNG считает наиболее эффективным. Уровни оптимизации 2 и выше позволяют использовать несколько испытаний сжатия IDAT; чем выше уровень, тем больше испытаний.

Уровень и испытания:

1. 1 пробная версия
2. 8 испытания
3. 16 испытания
4. 24 испытания
5. 48 испытания
6. 120 испытания
7. 240 испытания

Не пытайтесь использовать optimizationLevel для JPG! Для JPG и PNG вы найдете различные варианты оптимизации. Все типы этой оптимизации уровни опции полностью описаны на сайтах плагинов (см. Список плагинов ниже).

На этом сайте у вас есть много плагинов для оптимизации различных типов изображений. В вашем случае это JPG и PNG (у вас есть также для WebP, Gif и SVG):

Плагины для оптимизации JPG:

• Плагин jpegtran для imagemin
• Плагин mozjpeg для imagemin
• Плагин jpegoptim для Imagemin

Плагины для оптимизации PNG:

• pngquant плагин для imagemin
• Плагин pngout для imagemin
• Плагин optipng для imagemin
• Плагин pngcrush для imagemin
• Плагин AdvPNG для imagemin

Все плагины PNG имеют различные варианты оптимизации уровней . Например, для плагина AdvPNG у вас есть опция optimizationLevel, и вы можете выбрать уровень оптимизации от 0 до 4:

0 Не сжимать
1 Сжатие быстро (zlib)
2 Сжатие нормальное (7z)
3 Сжатие экстра (7z)
4 Компресс экстрим (зопфли)

JPG оптимизация

А для оптимизации в формате JPG я хотел бы порекомендовать плагины mozjpeg и jpegoptim, поскольку у них много вариантов конфигурации - см. Ссылки для этих плагинов выше.

Пример использования из плагинов

const imagemin = require('imagemin');
const jpegoptim = require('imagemin-jpegoptim');
//const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');

(async () => {
    const files = await imagemin(['images/*.{jpg,png}'], 'build/images', {
        plugins: [
            //jpegoptim plugin for JPG
            jpegoptim({
                progressive: true, //Lossless conversion to progressive.
                max: 80 //try to set with and without this option
                //see other options on plugin site (link above) and take / add which you need
            }),
            /* As comment because on plugin page is nothing about lossless conversion
            // mozjpeg plugin for JPG
            mozjpeg({
                quality: 80
                //see other options on plugin site (link above) and take / add which you need
            }),*/
            //pngquant plugin for PNG
            pngquant({
                quality: [0.7, 0.8]
                //see other options on plugin site (link above) and take / add which you need
            })
        ]
    });

    console.log(files);
    //=> [{data: <Buffer 89 50 4e …>, path: 'build/images/foo.jpg'}, …]
})();

Источник

Для преобразования PNG без потерь попробуйте также использовать плагин AdvPNG без каких-либо опций. Опция optimizationLevel для плагина AdvPNG по умолчанию установлена ​​на 3 (от 0 до 4).

Расширенное чтение

Очень важно прочитать статью:

• Руководство по оптимизации PNG

Answer 2

Вы можете использовать опцию optimizationLevel. Это значение варьируется от 0 до 7, с 3 по умолчанию.

Например:

imagemin: {
   dist: {
      options: {
        optimizationLevel: 5
      },
      files: [{
         expand: true,
         cwd: 'src/images',
         src: ['**/*.{png,jpg,gif}'],
         dest: 'dist/'
      }]
   }
}

В этом примере оптимизированы изображения с расширением png, jpg или gif, расположенные в папке «src / images» и во всех ее подпапках. Результат оптимизации будет сохранен в папке «dist».

Адаптировано отсюда.