ブログのETC

次世代フォーマットでの画像”WEP”で”Pagespeedinsights”スコアが10上昇

次世代フォーマットでの画像の配信

次世代フォーマットでの画像の配信

Pagespeedinsightでの高速化で、”0.9 s”効果が見込めるとレポート結果が出てきたのが、上記課題。

”JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。”

JPEG 2000、JPEG XR、WebPなどの画像フォーマットを次世代フォーマットと呼ぶらしいのですよ。

sponsored link

次世代フォーマットとは

JPEG 2000、JPEG XR、およびWebPは、以前のJPEGおよびPNGに比べて優れた圧縮および品質特性を持つ画像フォーマットです。 JPEGやPNGではなく、これらの形式で画像をエンコードすると、読み込みが速くなり、携帯データの消費量が少なくなります。

ブログビギナーだと、プログラミング的要素が入り過ぎると難しいので、プラグインで一括で変えられないかと考えていたところ。

JPEG 2000

従来のJPEGより、画像を圧縮しても画像が綺麗、ノイズの発生がないなどのメリットがあるが、
デメリットは、対応ブラウザがSafariのみ、画像表示時の処理が重い(画像が綺麗な分、従来のJPEGよりたくさんの処理が必要なようだ)圧縮して、綺麗になっても重いのでは仕方ないので、却下。

JPEGより後発の規格はどれもJPEGに比べて高圧縮を実現出来るが、その中で最も早く規格化されたJPEG 2000が広く使われなかったのは、Windowsやウェブブラウザがサポートしなかったことだけが理由ではない。JPEG 2000が必要とするハードウェア回路規模はJPEG XRの2倍以上、メモリ容量は8倍程度とされ、JPEGと比べればそれぞれ15倍弱と94倍となり、これがJPEG 2000がデジタルカメラに採用されなかった主な理由であった。またJPEG 2000では画像によって処理時間に長短が生じるため、カメラ・メーカーは連写速度を誇れないことも採用の障害となった
From ウィキペディア

JPEG XR

マイクロソフトが開発したJPEG 2000より処理が速いが、デメリットは対応ブラウザがIEとEdgeのみ(2019年初めにマイクロソフトがIEの使用を非推奨としたので実質Edgeのみ)これも意味ないなあ。

後から登場したJPEG XRは以前から標準規格として存在するJPEG 2000に比べて技術的な新規性が薄い
From ウィキペディア

WebP

従来のJPEGやPNGより高圧縮でき、アルファチャンネルを扱えるGoogle が開発した!これしかない!
対応ブラウザ
Chrome
Firefox
Opera
Edge

評価
Googleの示した事例では、ファイルサイズは非可逆圧縮モードで(同一画像、同等画質の)JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。可逆圧縮は、エンコードはPNGよりも時間がかかるが、デコードはPNGよりも高速であると主張している。一方、2013年10月に行われたMozillaの比較調査では、旧来のJPEGと大して変わらないという結果となった。
From ウィキペディア

「EWWW Image Optimizer」で”Web”P導入手ができた

WordPressテーマは[JIN」を使っていて、公式サイトで「EWWW Image Optimizer」がおすすめプラグインとあったのでインストール済み。「EWWW Image Optimizer」を入れてない場合はインストールする。

メディアアップロード時に自動でWebPに変換してくれることが判明。今まで、インストールしていたのに何で気付かなかったんだどう。

  1. 「EWWW Image Optimizer」画面 → 「WebP」タブ → 「JPG, PNG から WebP」にチェックを入れる → 「変更を保存」
    EWWW Image Optimizer JPG/PNG to WebP
    EWWW Image Optimizer JPG/PNG to WebP
  2. WordPress 管理画面の「メディア」→「一括最適化」→「最適化されていない画像をスキャン」→「最適化を開始」最適化が終わると「完了」と表示される
  3. WebP 変換するには、すでに最適化された画像も再度最適化が必要だった。全部で6358個のファイルがスキャンされていました。
    2 回目以降の一括最適化を行うには、「再最適化を強制」にチェックを入れる

    Media Force Re-optimization on WP
    Media Force Re-optimization on WP

     

    * 同じ画像を何度も最適化すると劣化します。

PageSpeedInsights での効果

WebPにしたら、ファイルサイズはだいたい20%前後低減、多いもので半分以下(89B → 44B)のサイズになったので効果はある。PageSpeedInsightsでは、スコアが10上昇しましたもちろん、PageSpeed Insightsの指摘から「次世代フォーマットでの画像の配信」はなくなった

JIN 重い
JINが遅い?必要プラグインは?&ロリポップのハイスピードプランの効果は?テーマをJINに変えてアドセンス受かったが、JINが重いことが判明 キャッシュの問題かなと思い、不要なプラグインの整理やサーバー変更を...