【たった10分】ビギナーにもできるアクセスUPの秘密

画像形式の最適化

これまで何度か紹介したように、スピードが遅いために成功が遠のいているウェブサイトは多くあります。

ウェブサイトを遅くする最大の原因は画像なので、サクサクと動くウェブサイトを目指すには画像の最適化が必須のプロセスです。

サイズと画質の調整による画像の最適化は「誰でもできるウェブサイトのスピードUP術」で触れたので、今回は画像のフォーマット変更で最適化する方法を紹介します。

「次世代の画像形式」とは？

下の記事で紹介したように、Page SpeedInsightを使うと、ウェブサイトのスピードを診断できます。

診断後に表示される「改善できる項目」で、「次世代フォーマットでの画像の配信」と書かれているのがよく見られます。

画像保存に使われるフォーマットには主にJPG、PNG、GIF、そしてSVGの4つがありますが、「次世代フォーマット」はこれら4つとは異なる新しいフォーマットのことです。

具体的には、JPG2000、JPEG XR、WebPなどで、これらはどれもJPGやPNGよりも圧縮率が高く、画質を維持したままサイズを小さくできる特徴があります。

今回は、その中でもGoogleが開発したWebPを紹介していきます。

WebPの特徴とメリット

2010年にリリースされたWebP（ウェッピー）の目的は、通信量の削減とウェブサイトの高速化で、その目的の通りウェブでの使用を前提としているため、ウェブサイト以外での使用は通常されません。

WebPは、JPGのような非可逆圧縮とPNGのような可逆圧縮（ロスレス圧縮）の2つの圧縮方式を選ぶことができ、Googleの調査によると、WebPはPNG比で26%、JPG比で25〜34%ほど画像サイズを縮小できます。

つまり画質を維持したままサイズを小さくできるので、ウェブサイトのパフォーマンス向上が見込めます。

WebPの作成方法

一番簡単なのは、Googleが開発している画像圧縮サービス、Squooshを使うことです。

• https://squoosh.app

PhotoshopでもWebp用のプラグイン導入で可能です。

WebPの注意点

メリットの多いWebPですが、ブラウザによっては表示ができないものがあることに注意しましょう。

Googleクロームが対応しているのは当然として、FirefoxとEdgeもWebPに対応していますが、Safariは対応していません。

（*対応していないブラウザでの表示には<picture>タグを使う必要があります。）

また、WebPがJPGやPNGの代替ではないことにも注意が必要です。

ウェブサイト以外の用途ではJPGやPNGが使われますし、また今説明したようにSafariは対応していないので、WebPに画像を変換しても元のJPGやPNGのイメージは別に保存しておくのがいいでしょう。

冒頭でも書いたように、画像はスピードを遅くする最大の原因ですが、驚くほど多くのサイトで最適化されていない画像が使われています。

今回紹介したWebp方式への変換や、「画像がギザギザして不鮮明な理由」で説明したSVG方式の採用などで、画像をウェブ表示に最適化してスピードUPしていきましょう。