Google Pagespeed: как удовлетворить новые правила сжатия изображений?

14

У нас есть несколько страниц с хорошими значениями Pageseed - даже те, которые имеют 100/100. Однако через несколько дней компания Pagespeed утверждает, что на всех сайтах (технически разных, разных серверах) наши изображения могут быть более оптимизированы.

Кто-нибудь знает, что именно было изменено алгоритмом? На том, что с PS 100/100 (до), мы используем jpegoptim, поэтому мы действительно не знаем, как оптимизировать дальше. Изображения загружаются нашим приложением, а затем оптимизируются.

Любое понимание будет оценено. Есть ли где-нибудь журнал изменений для PS?

google google-pagespeed

— Рафаэль Джегер
источник

Вы видите это сообщение на настольном или мобильном тесте?

— Гойло

оба упали ...

— Рафаэль Джегер

1

Не уверен, сможет ли это сделать лучше, но Google рекомендует использовать jpegtran для оптимизации изображений JPEG. Похоже, что Google продвигает новый формат изображений под названием WebP, который имеет меньшие размеры, но плохую поддержку браузера.

— Стивен Остермиллер

Я тоже это заметил. Я знаю, что WebPageTest использует 85% качества для JPG в качестве базовой линии. Но я не могу приблизиться к рекомендованному Google размеру, если не пойду ниже 80% качества.

— Рассерженная шлюха

7

Я вижу такие же неприглядные результаты для страниц без каких-либо проблем прежде, конечно, используя адаптивные фреймворки, такие как ZURB Foundation, с адаптивными изображениями.

В прошлом я использовал:

find . -iname "*.jpg" -exec jpegoptim --strip-all -o -p {} \;

и получил отличные результаты.

Решение на январь 2017: качество 85% должно сработать:

find . -iname "*.jpg" -exec jpegoptim --strip-all -m85 -o -p {} \;

Вернуться к 100/100 на скорости страницы Google.

Вот часть моего метода развертывания gulp / npm для ZURB Foundation 6

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src('src/assets/img/**/*')
    .pipe($.if(PRODUCTION, imagemin(
      [
        imagemin.gifsicle({interlaced: true}),
        imageminJpegoptim({
          max: 85,
          progressive: true
        }),
        imagemin.optipng({optimizationLevel: 5}),
        imagemin.svgo({plugins: [{cleanupIDs: false, removeEmptyAttrs: false, removeViewBox: false}]})
      ],
      {
      },
      {
        verbose: true
      }
    )))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

Вам нужно добавить модули npm gulp-imagemin imagemin-jpegoptim

var imagemin = require('gulp-imagemin');
const imageminJpegoptim = require('imagemin-jpegoptim');

— С. Ригер
источник

Добро пожаловать на сайт. Просто чтобы уточнить, вы заявляете, что у вас также было такое же уведомление об оптимизации изображений, в то время как раньше вы этого не делали? Если да, то помогли ли варианты jpegoptim решить эту проблему?

— Дан

мы также пробовали использовать разные настройки в jpegtran и jpegoptim, но невозможно добиться таких маленьких изображений, как состояния Google ... Кроме того, я не думаю, что это имеет какое-либо отношение к размерам изображений (в пикселях), поскольку скорость страниц явно различается проблемы со сжатием и размером в пикселях.

— Рафаэль Джегер

Спасибо - это действительно полезно. А также вы можете сделать что-то подобное для pngfind . -iname "*.png" -exec optipng -clobber -preserve -strip all -o2 {} \;

— billynoah

2

Вы также можете заметить сообщение: « Загрузите оптимизированные ресурсы изображений, JavaScript и CSS для этой страницы». Они сделали всю работу за вас, если у вас возникли проблемы с оптимизацией, которую ожидает Google. Иногда различные инструменты не могут быть такими маленькими, как хочет Google.

— doublejosh
источник

2

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

с конкретным примером головоломки.jpg

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

используя те же аргументы для моих собственных изображений, я получил те же результаты, что и загруженный оптимизированный файл JPG.

— Келли
источник

1

Обратите внимание, что если вы используете Windows, попробуйте, magickесли у convertвас не работает. magick puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg, imagemagick.org/discourse-server/viewtopic.php?t=19679

— user2875289