今回はメインブログ「BonGreen」のこちらの記事に使用する画像を全てWebP形式にした裏話？のような記事です。
まずはその前にWebPについての説明です。
WebPとは
WebPとは、Googleが開発した画像フォーマット。JPGやPNGと比べて、高い圧縮率を持ち、画質の劣化も少ない。画像サイズが軽くなるので、ブログの表示速度が速くなるのでSEOにも影響を与える。透過やアニメーションにも対応。IEや一部safariでは対応していないが現在はほとんどのブラウザで対応。
- ファイルサイズが小さくなる
- 表示速度が速くなる
- SEOにも効果的
- 透過やアニメーションが可能
記事内にWebP本格導入
これらのメリットを活かすために、こちらの記事、ブログ内画像を全て完全WebPに変換しアップロードしました。実は今までもWebP対応はさせていましたが、Jpeg画像をサーバーにアップロードし、プラグインの「EWWW Image Optimizer」で対応ブラウザのみ、WebP形式で配信していました。この方法だと対応していないブラウザや旧機種でも画像閲覧できるメリットはありましたが、Jpeg形式とWebP形式両方の画像が存在することになるのでサーバー容量を圧迫してしまいます。
ブログで使用する写真は99％スマホで撮影しています。普通であればJpeg形式（iPhoneだとHEIFだったり）で保存している画像をアップロード前にWebP形式に変換の手間が増えます。しかし、容量削減できサイトが軽量化・高速化できるのなら惜しむわけにはいきません。
変換方法は、Squooshというオンラインの変換アプリケーションを使いました。非常に簡単で便利なツールです。ブラウザ上で画質を確認しながら圧縮率を調整できますし、様々なファイル形式に変換できます。
SEO対策
Googleは2021年6月から「Core Web Vitals」というウェブサイトの品質指標をランキング要因に導入することを発表しました。その中には表示速度も含まれています。
つまり、WebPを使うことでSEOにも有利になる可能性があります。
今後もWebP形式だけのブログ配信も増やしていこうと思います。時間があればすでに投稿済みの記事内画像も置き換えていこうと思っています。これからもサイトの品質向上と軽量化を目指していきます。皆さんもぜひWebPを試してみてくださいね！
コメント