Googleも推奨する「サイトの読み込みスピードの速さ」が、サイトのスコア判定でも大きな位置を占めています。
その際、よく見かける「サイト内の画像をWebPなどに差し替える」というアドバイス。
「どういうこと？」と思う方は、参考に見てください。
WebPファイルへの変換方法も紹介します。
WebPは画像ファイル形式の1つ
WebP（ウェッピー）はGoogleが開発したウェブ用の画像ファイル形式です。
元のファイル、圧縮の設定にもよりますが、従来の画像ファイルより圧縮率が高くなっています。
他形式と比較して、画像の劣化が少なく、データサイズを減らすことも可能です。
画像ファイルのデータサイズが大きいと、読み込みに時間がかかり、訪問者が閲覧を中止して他のサイトへ行ってしまいます。
それを防ぐ為、遅延読み込みと合わせて、データサイズの縮小が推奨されています。
WebP のロスレス画像については、PNG と比較して 26% 縮小されています。WebP のロッシー画像は、同等の SSIM 品質インデックスで、同等の JPEG 画像より 25 ～ 34% 小さくなります。
https://developers.google.com/speed/webp?hl=ja
WebP と他形式の比較
実際に、「WebP」と「PNG、JPG」のファイルサイズを比較してみました。
アイキャッチ画像
ファイル：PNG
サイズ：186KB
ファイル：WebP
サイズ：17.6KB
鮮やかさが無くなりましたが、アイキャッチとしての利用なので問題ないレベルだと思います。
風景写真
ファイル：JPG
サイズ：84.4KB
ファイル：WebP
サイズ：53.2KB
強い日差しが弱くなりました。ギャラリーとかであれば画質優先で「JPG」となりそうです。
WebPに対応するには？
WordPressを使っている方は、プラグインを利用すれば簡単にWebPに対応出来ます。
既存の画像ファイルも新しい画像ファイルも、自動で「WebP」に変換することが出来ます。
インストールして設定するだけでいいので、初心者の方や画像ファイルの多いサイトを運営中の方におすすめです。
WordPressを使ってない方やプラグインを使いたくない方は、変換アプリなどを使って「WebP」を用意する方法になります。
「EWWW Image Optimizer」プラグイン
「EWWW Image Optimizer」は、既存の画像を最適化し、新しい画像もアップロードした時に自動で最適化してくれるプラグインです。
基本機能は無料で使えるので、これ一つで画像ファイルを「WebP」に変換できます。
今までと同じように画像ファイルを用意するだけなので、特に何も用意しなくてもいいのがメリットです。
画像編集アプリや変換アプリを使う
illustrator（イラストレーター）やPhotoshop（フォトショップ）などをお使いの方は保存時に「WebP」を選択するだけで完了しますが、お持ちでない方は以下の方法がおすすめです。
Web（ブラウザ）で変換できるサービスの利用
「WebP 変換」などで検索すると、無料で「WebP」に変換できるサイトが見つかります。
こちらの「サルワカ道具箱」さんも、複数ファイルの一括変換に対応するなど、「WebP」に変換してくれます。
利用中のブラウザに変換用プラグインを追加する方法
Googleの「Chrome」を例にすると、chrome ウェブストアで「WebP」と検索すると色々なプラグインが見つかります。
閲覧中サイトの「スクリーンショットをトリミングしてWebPで保存」、「画像を右クリックして、WebPで保存」などのプラグインが見つかると思います。
まとめ
現在は各ブラウザも「WebP」への対応が進んだこともあり、イメージ画像であれば「WebP」一択でも問題ないと思います。
「JPG」は、一覧ページでは「WebP」、単独ページでは「JPG」など、掲載状況に応じて選択が必要になりそうです。
今回の比較では、圧縮の設定などは同一の設定で試しているので、「画質を優先する」などを試してみるのもいいと思います。