#15 サイトで使用する画像の拡張子（JPEG・PNG・WebP）について

挿入する画像の形式（拡張子）についてなのですが、近年はGoogleが開発した「WebP」という画像ファイルが推奨されています。

最も一般的に使用されているのはJPEG（.jpg）という形式で、比較的高画質でデータ容量も軽いというのが特徴です。欠点としては、編集を繰り返す度に画像が劣化する、背景透過ができないといった点がありました。

続いて有名なPNG（.png）は、背景透過もでき、画像もより高画質だけれども、データ容量が重いという欠点がありました。環境によってはJPEGよりも画質が劣化してしまう場合もあります。例えば、インスタグラムだと、画像を自動で最適化するので、その際にJPEGよりもPNGの方が画質が悪くなるとも言われています。

そこで登場したのが、高画質かつ劣化も少なく、JPEGやPNGよりもデータ容量が軽く、背景透過も可能という「WebP」です。

Googleが開発して、かなり猛プッシュしている画像ファイル形式ですね。

サイトの表示スピード（特にスマートフォンでの）を改善する上で、画像の軽量化というのは一番と言って良いほど重要になってくるので、「WebP」は間違いなく優秀なのですが、今まではAppleのブラウザであるSafariに対応していないこともあって、当ブログでも、JPEG画像をメインに使用していました。

しかし、2020年秋から、やっとSafariでもWebP画像を読み込めるようになったので、これからどんどん普及していくはずです。

日本ではiPhone利用者がかなり多いので、Safari、Google Chrome、その他のブラウザも合わせて、IE以外の約95%がWebP画像を観覧できるということになりました。

WordPressの画像圧縮・最適化プラグインの、「Imagify」（世界で人気&当ブログでも使用）、「EWWW Image Optimizer」（日本で人気）、「WebP Converter for Media」（WebP対応・非対応に合わせて最適化可能）、などを使用することで、JPEGやPNGからWebP形式に画像を変換できます。

WebPに変更する際は、不具合も十分に考えられるので、必ず事前にバックアップを取っておきましょう。

僕はまだ不具合報告が多いので、JPEGのままで様子を見ようと思います。

サイト表示スピード（読み込む速度）が、ユーザーの離脱率に大きく関わってくるという報告もあるのですが、サロンホームページの運営においては、あまり表示速度を追い求めて画像を圧縮するのは宜しくないですね。

おしゃれで綺麗なHPでお客様を惹きつけたいのに、画質が悪すぎては本末転倒です。

サイト表示速度については、「SEO対策」の記事で詳しく解説していきます。