А как вы делаете свои jpeg'и прогрессивными?

Question

[ivan1kazantsev]

В общем, не нашел я плагина для галпа, который бы не оптимизировал изображение, а только делал его прогрессивным. Но да ладно, а каким образом это делаете вы? Может быть, это тоже мне подойдет ;)

Answer 1

[Сергей delphinpro]

Для автоматизации используйте плагин https://github.com/imagemin/imagemin-jpegtran с опцией progressive:true

UPD
Я как-то не особо заморачивался в данном аспекте оптимизации, но ваш вопрос сподвиг-таки меня на доработку своего таска. В итоге прогрессивный режим работает и таск выглядит вот так сейчас

var imagesTask = function () {
    return gulp.src([paths.src])
        .pipe(changed(paths.build))
        .pipe(imagemin([
            imagemin.gifsicle(),// default
            imagemin.jpegtran({
                progressive: true
            }),
            imagemin.optipng(),// default
            imagemin.svgo()// default
        ]))
        .pipe(gulp.dest(paths.build))
        .pipe(browserSync.stream())
};

https://github.com/delphinpro/gulp-starter/blob/ma...

Comments

[zooks]

У меня этот зверь не заработал. Кладет в конечную папку такие же по размеру файлы.

[ivan1kazantsev]

Это расширение для imagemin? Просто что-то я не особо понял, в imagemin же есть и так progressive.

[Сергей delphinpro]

ivan1kazantsev: Да, расширение. Насколько я понимаю, imagemin - это просто обертка для запуска разных плагинов работы с картинками.

[Сергей delphinpro]

zooks: У меня заработал. Проверить можно, посмотрев в IrfanView информацию по картинке

[ivan1kazantsev]

Сергей: jpegtran будет работать и без установки этого "расширения" ;)

[Сергей delphinpro]

ivan1kazantsev: разумеется будет =)

[ivan1kazantsev]

Сергей: ааа, допёр, просто не внимательно прочитал про обертку, ну да, видимо, оно так и есть.

[ivan1kazantsev]

Сергей: то есть, если не передать инструкций сжатия других форматов, то он и не будет их оптимизировать? Ладно, пойду-ка я пробовать лучше.

[Сергей delphinpro]

ivan1kazantsev: Будет по дефолтным настройкам. Прогрессив по дефолту выключен.

[ivan1kazantsev]

Сергей: но задание для imagemin только jpegtran с прогрессивом все равно оптимизировало jpeg.

[Сергей delphinpro]

ivan1kazantsev: не понял. В каком смысле?

[ivan1kazantsev]

Сергей:

gulp.task('minimg', function() {
	return gulp.src('prod/img/**/*.{jpg,png}')
		.pipe(imagemin([imagemin.jpegtran({progressive: true})]))
		.pipe(gulp.dest('prod/img'));
});

[ivan1kazantsev]

Это приводило к уменьшению размера изображения.

[Сергей delphinpro]

ivan1kazantsev: имеете ввиду, что оптимизировались png хотя вы их выкинули из конфига по дефолту?
Тут надо исходник посмотреть, как оно там внутри работает.

[ivan1kazantsev]

Сергей: оптимизировались jpeg, это я просто таск скопировал, не убрал оттуда png ;) То есть, я-то чего хочу, я хочу просто прогрессивный jpeg получать на выходе без его минимизаций.

[ivan1kazantsev]

Я поэтому и начал поиск плагина, который не выполнял бы ненужных мне действий.

[Сергей delphinpro]

ivan1kazantsev: Теперь ясно. Попробуйте другой плагин https://www.npmjs.com/package/imagemin-mozjpeg или https://www.npmjs.com/package/imagemin-jpegoptim. Там есть настройка quality, которую можно выкрутить на 100.

[ivan1kazantsev]

Сергей: вот это уже похоже на правду ;)

[ivan1kazantsev]

Сергей: перед тем, как попробовать, они входят в imagemin, как и jpegtran? То есть можно использовать таким же образом?

[Сергей delphinpro]

ivan1kazantsev: не знаю. вы попробуйте ) в крайнем случае npm install сделать недолго.

[zooks]

Сергей: у меня не заработала другая библиотека: https://www.npmjs.com/package/imagemin-pngquant когда терминальный pngquant работает просто отлично.

Answer 2

[Саша]

ivan1kazantsev для начала сохраняешь в ФШ с нужными настройками, а потом уже можно через плагины Гранта/Гулпа, онлайн сервисы прогнать.

Comments

[ivan1kazantsev]

Да...в фш можно сохранить прогрессивно. Но совсем не автоматизация. А типа маленького ребенка, автоматизацию хочу, хачу и сё ;)

[ivan1kazantsev]

Но да, это один из способов, не спорю. А еще в СС экспорт для веба убрали во вкладку, типа устаревший способ экспорта, вообще не лахури.

[Саша]

ivan1kazantsev: убрали?
я всегда жмакаю горячие клавиши и не парюсь, что там откуда убрали))

[IIIu6ko]

Саша: Угу, убрали, но только из меню. Я тоже по горячим клавишам юзаю)

Answer 3

[denevseev2]

Этот сервис делает jpeg прогрессивным - https://optipic.io/ru/
Функцию оптимизации изображений можно отлючить в настройках (указав в настройках сжатия - не сжимать).
А также указать в настройках, что работать нужно только с jpg/jpeg.