Google Pagespeed：新しい画像圧縮ルールを満たす方法

14

Pageseed-valuesの良いページがいくつかあります-100/100のページでも。しかし、数日以来、Pagespeedはすべてのサイト（技術的に異なる、異なるサーバー）で、画像をより最適化できると主張しています。

誰がアルゴリズムによって何が変更されたかを正確に知っていますか？PS 100/100（以前）を使用するものでは、jpegoptimを使用するため、さらに最適化する方法はわかりません。画像はアプリケーションによってアップロードされ、最適化されます。

どんな洞察もいただければ幸いです。PSの変更ログはどこかにありますか？

google google-pagespeed

— ラファエル・ジェガー
ソース

デスクトップテストまたはモバイルテストでそのメッセージが表示されますか？

— ゴイロ

両方が...ドロップ

— ラファエルJeger

1

より良い仕事ができるかどうかはわかりませんが、JPEG画像の最適化にはjpegtranの使用をお勧めします。また、GoogleはWebPと呼ばれる、サイズは小さいがブラウザーのサポートが不十分な新しい画像形式を推進しているようです。

— スティーブンオステルミラー

私もこれに気づきました。WebPageTestはベースラインとしてJPGの85％品質を使用することを知っています。しかし、品質が80％を下回らない限り、Googleの推奨サイズに近づけることはできません。

— DisgruntledGoat

7

もちろん、レスポンシブ画像を使用したZURB Foundationのようなレスポンシブフレームワークを使用すると、問題のないページでも同じ見苦しい結果が得られます。

過去に私が使用したもの：

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

そして素晴らしい結果を得ました。

2017年1月の解決策：85％の品質でうまくいくはずです：

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

Googleページの速度を100/100に戻します。

これは、ZURB Foundation 6のgulp / npmデプロイ方法の一部です

// 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');

— S.リーガー
ソース

サイトへようこそ。明確にするために、画像の最適化に関する以前の通知と同じ通知を経験したと述べていますか？その場合、追加したjpegoptimオプションはそれを解決するのに役立ちましたか？

— ダン

jpegtranとjpegoptimで異なる設定を試してみましたが、Googleのような小さな画像を実現する方法はありません...また、ページ速度が明らかに多様化するため、画像サイズ（ピクセル単位）とは関係ないと思います圧縮とピクセルサイズの問題。

— ラファエルジェガー16

ありがとう-これは本当に便利です。そしてまた、あなたはPNGのために似た何かを行うことができますfind . -iname "*.png" -exec optipng -clobber -preserve -strip all -o2 {} \;

— billynoah

2

また、「このページの最適化された画像、JavaScript、およびCSSリソースをダウンロードしてください。」というメッセージに気付くかもしれません。さまざまなツールが、Googleが望むほど小さくならないことがあります。

— ダブルジョシュ
ソース

2

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

特定の例puzzle.jpg

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

自分の画像で同じ引数を使用すると、ダウンロードした最適化されたJPGファイルと同じ結果が得られました。

— ケリー
ソース

1

Windowsを使用しているmagick場合convertは、if が機能しないことに注意してください。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