ページスピードインサイトで「 次世代フォーマットでの画像の配信」の問題を解決する方法

2019-07-08ページスピードインサイト

PageSpeed Insightsで「改善できる項目」として、次世代フォーマットでの画像の配信という項目が表示された時の対処方法です。

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

PageSpeed Insights

スポンサーリンク

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

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

現在使用している画像より、圧縮率の高い形式の画像を使用しましょう。

また、『現在使用している画像形式は、圧縮率が低くページの表示スピードに悪影響を及ぼしているのですぐに変更しましょう。』とも言い換える事が出来ると思います。

どの画像フォーマットを選べば良いの？

結論から言うと、WebP（ウェッピー）になります。

理由は、それぞれ対応しているブラウザが限られるため。

※対応していないブラウザでは画像が表示されません。

下記に対応状況がありますのでご覧ください。（画像は投稿時の物）

最新の状況は、画像下の Can I use のリンクからご覧頂けます。

JPEG 2000（ジェイペグにせん）のサポート状況

画像クリックで拡大します。

jpeg2000 サポート状況

Can I use で確認すると、サポートしているのは、緑で表示されているブラウザ（Safari系）のみという事が判ります。

JPEG XR（ジェイペグ エックスアール）のサポート状況

jpegエックスアール対応状況

同じく、Can I use で調べると、IE または、Edge のみ対応となっているのが判ります。

WebP（ウェッピー）のサポート状況

WebP対応状況

Can I use の結果はご覧の通り。

最も多くのブラウザでサポートされており、今後対応していくブラウザも増えていくそうです。

という事で、WebP（ウェッピー）に画像を置き換えていきます。

その前に・・

JPEG と WebP形式の画像を比較してみる。

★使用画像（PR:高解像度の写真素材なら【写真AC】）

JPEG（710×450px）386 KB

JPEG710×450px

画像URL:https://msstyle.jp/wp-content/uploads/2019/07/fireworks710-450.jpg

WebP（710×450px）80KB

お使いのブラウザでは表示されません。

画像URL：https://msstyle.jp/wp-content/uploads/2019/07/fireworks710-450.webp

↑ブラウザが対応していない場合は表示されません。（文字列のみ表示）

わずか、80 KB しかありませんがこの画質です。

拡張子は「.webp」となります。

表示されている方は、画像を見比べてみて下さい。

IE や iPhone（Safari）で表示されないんじゃ使えなくね？

とお思いの方もおられると思います。

大丈夫です！

これから、対応していないブラウザでも画像を表示させる方法をご紹介します。

厳密に言うと、

・対応していないブラウザには、画像A（JPEG or PNG）

・対応しているブラウザには、画像B（WebP）

を表示させる記述をします。

ブラウザに応じて WebP 画像と JPEG または PNG 画像を切り替えて表示

ここで使うのが『picture タグ』です。HTML5.1から追加された新要素

基本のコードはこんな感じです。

<picture>
  <source srcset="/images/sample.webp" type="image/webp" />
  <img src="/images/sample.png" alt="サンプル画像" />
</picture>

2行目でWebPに対応しているブラウザなら WebP画像を表示、対応していないブラウザでは、3行目の画像を表示させる事ができます。

しかも、両方の画像を読まず対応している画像のみを読み込むのでページが重くなりません。

こうすることで、全てのブラウザで最適な画像を表示できます。

デモ（対応・未対応で画像が切り替わります）

ロシアンブルー

★使用画像（PR:高解像度の写真素材なら【写真AC】）

レスポンシブ対応などの詳しい解説は後述します。

WebP画像の作成方法

「WebP　変換」で調べるとたくさん出てきますが、私がよく使用させて頂いているサイトをご紹介します。（オンライン上で変換できます）

WEBP変換ツール (jpg、pngとwebpを相互変換)

WebPコンバーター
https://lab.syncer.jp/Tool/Webp-Converter/

WebPコンバーター

使い方

変換したい画像を選択するだけです。

「ファイルを選択」の部分にドロップさせてもOK。

先程の画像の例

WebPコンバーター

412.1KB → 80KB まで削減できました。

画像のダウンロード方法

①変換後の画像をクリックで自動ダウンロード。

WebP画像の自動ダウンロード

image.webp というファイルが保存されます。

②右クリックから名前をつけて保存（推奨）

WebP 名前をつけて保存

デスクトップ上で表示（アイコン）

WebP デスクトップ上の表示

画像のように、HTML ドキュメントとして保存されます。

なので、名前を付けて保存する事でファイルの判別がしやすくなります。

WordPressでWebP形式の画像を使用するには

①FTPソフトを使って手動でアップする。

上記の通り手動でアップします。

webp画像FTPソフトでアップ

画像URL：https://msstyle.jp/wp-content/uploads/2019/07/fireworks710-450.webp

↑これを先程のコードに置き換えると使えます。

②プラグインを使ってアップする。

デフォルトの状態では、WebP 形式の画像はアップできないので、プラグインを使用します。

当サイトでは「EWWW Image Optimizer」を使用しています。

使い方はこちらが参考になります。

③PHPを使ってアップする。

プラグインを使いたくない方向けです。

注意事項

functions-php の編集

バックアップを取ってから作業しましょう。

それほど難しい作業ではないですが、知識が無い方は触らないほうが無難です。

functions.php に下記を記入するだけで、アップロード出来るようになります。

function custom_mime_types( $mimes ) {
$mimes['webp'] = 'image/webp';
return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );

ここから「picture 要素」の詳しい解説です。

<picture> タグの対応状況

ピクチャータグの対応状況

Can I use の結果です。IEが未対応になってますが、下記のコードでも画像は表示されます。

記事内で使用する画像は、下記のような簡単なコードで使用できるのはお伝えしました。

<picture>
  <source srcset="/images/sample.webp" type="image/webp" />
  <img src="/images/sample.png" alt="サンプル画像" />
</picture>
この picture タグは、レスポンシブデザインと非常に相性が良いです。

これまで、CSSファイルにメディアクエリを書いてレスポンシブに対応していた作業が不要になります。

例えば、PC・タブレット・スマートフォン用に３種類の画像を用意し、端末ごとに切り替え（非表示など）て表示させる記述が不要になります。
（しかも、3種類画像を用意していた場合、全ての画像が読み込まれていた → 重くなる）

例）picture タグを使ったレスポンシブ対応の書き方

<picture>
<source media="(min-width: 1300px)" srcset="/images/pc.webp" type="image/webp">
<source media="(min-width: 768px)" srcset="/images/tab.webp" type="image/webp">
<source media="(min-width: 100px)" srcset="/images/sp.webp" type="image/webp" sizes="100vw">
<source media="(min-width: 1300px)" srcset="/images/pc.jpg">
<source media="(min-width: 768px)" srcset="/images/tab.jpg">
<source media="(min-width: 100px)" srcset="/images/sp.jpg" sizes="100vw">
<img alt="サンプル画像" class="responsive" src="/images/pc.jpg" />
</picture>

ご覧の様にメディアクエリを書くことで、画像の切り替えができます。（ブレイクポイントに合わせて書き換えOK）

しかも、これだけ多くの画像ファイルを設定しても、読み込まれる画像は１枚だけです。
(ブラウザが一瞬で判別し条件に合わない画像はスルーします。神対応ｗ)

各ブラウザ毎の表示

・picture タグ対応、WebP 対応、画面幅1300px 以上の場合 → pc.webp が表示されます。

・picture タグ対応、WebP 未対応、画面幅 768～1299pxの場合 → tab.jpg が表示。

・picture タグ対応、webP 未対応、画面幅 100～767px（スマホを想定）→ sp.jpg が 画面幅100％で表示。

・picture タグ未対応、webP 未対応（IEを想定）の場合、pc.jpg が表示される。

記事内で使えるのは勿論ですが、トップページなど、大きな画像を使用してる場合に特に使えます。

ページスピードインサイトで再チェック

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

合格した監査に表示されれば、この課題はクリアです。

<picture>要素のより詳しい使い方と解説は下記のサイトが参考になります。

おすすめの書籍

参考になれば幸いです。

スポンサーリンク

レスポンシブデザイン,便利ツール,PageSpeedInsights,高速化,SEO,SEO対策,ウェッピー,WebP

Posted by M'S STYLE