Как правильно оптимизировать изображения?

Question

[cvbcvb cvbcvbcvbcvb]

Доброго времени суток. Я вот разобрался с Галп. Ну и соответственно начал через него минимизировать изображения. Все хорошо работает, изображения минимизируются. Но PageSpeed Insights не хочет их принимать как оптимизированные. Что мне сделать, чтоб гугл хоть как то ценил мой сайт?(( Почему ему не нравится картинки, которые были минимизированны Галпом. Заранее спасибо!

Comments

[Maksim Zverev]

Вы бы написали, чем вы оптимизируете, вроде там не один плагин. Покажите часть конфига отвечающую за оптимизацию изображений и будет проще ответить :)

[cvbcvb cvbcvbcvbcvb]

Maksim Zverev: да стандартный, как я понял, набор. Вот по минимизации изображений плагины.

imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant');


gulp.task('img', function () {
return gulp.src('app/img/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('dist/img'));
});

Ну и когда все складывается в финальную папку проекта, выполняется таск 'img':

//BUILD
gulp.task('build', ['clean', 'img'],function () {
var assets = useref.assets();

return gulp.src('app/*.html')
.pipe(assets)
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
});

[cvbcvb cvbcvbcvbcvb]

Maksim Zverev: так что? не знаете, почему гугл так реагирует?

[Maksim Zverev]

sudden_man: я только посмотрел ваш пример, чуть позже могу протестировать и посмотреть результат. А пока попробуйте вот этот плагин https://www.npmjs.com/package/gulp-tinypng API ключ берется на сайте https://tinypng.com/

Answer 1

[Анна Бакурова]

1) если нужно сжать все картинки без потери качества - то юзаем FileOptimizer. Всё что нужно это скачать программу, перетащить в её окошко картинки и нажать а кнопку сжать. К сожалению программа под винду
2) сжать ещё сильнее, но с малой потерей помогает веб-сервис TinyPNG

Почитайте статейку на хабре там есть эти программы

Comments

[Анна Бакурова]

сжатие гилпом или грантом мало эффективно и долго для такого результата

[cvbcvb cvbcvbcvbcvb]

та мне бы с галпом. чтоб все сразу складывалось. через сервисы все ясно. мне не ясно, почему гугл ругается на галповские плагины минимизации

[Анна Бакурова]

sudden_man: потому что галповский и грантовкий сжимает крайне фигово, а гугл вроде как анализирует изображение и ругается мол сжато не до конца. С этими прогами, что Я скинула, он либо ругается очень редко и не значительно либо вообще не ругается

[Александр Таратин]

Анна Бакурова: Гугл ругается даже если изображение сжато по максимум, если оно большего размера чем нужно. Например фоновая картинка 1000*1000 впихнута в блок 100*100. Причем если скачать изображения пережатые гуглом, то они далеко от идельного прожаты.

Для себя использую простенькие батники
PNG

@if not exist %CD%\raw mkdir %CD%\raw
@COPY %CD%\%1 /B %CD%\raw\%1 /B >> nul
@del %1
@pngquant --force --skip-if-large --speed 1 256 --output %1 %CD%\raw\%1
@PNGZopfli %1 10 %1

JPEG

@if not exist %CD%\raw mkdir %CD%\raw
@COPY %CD%\%1 /B %CD%\raw\%1 /B >> nul
@jpegtran -copy none -optimize -progressive %CD%\raw\%1 %1

[Анна Бакурова]

Александр Таратин: по мне так об этом речи и не шло, но спс) выходит на ретину ругаться и так и так будет

Answer 2

[Сергей ZSA]

Пробовал тоже галпом, но мне на постоянный поток небольших проектов не очень удобно им пользоваться, поэтому оптимизирую вот так habrahabr.ru/post/215213

Comments

[Maksim Zverev]

А почему не удобно пользоваться ? Мне честно, просто интересно. Я только между проектами таскаю конфиг, так как они все унифицированы по структуре.

[Сергей ZSA]

Maksim Zverev: потому что они порой бывают очень разными между собой и есть буквально 2 файла, которые их объединяют

Answer 3

[Юлия Старченко]

Я оптимизирую с помощью imageoptim
Удобно и PageSpeed не ругается