＜要約＞
WebP画像を使うことで、PNG画像のファイルサイズを約80％削減できました。Photoshopなしでも使える無料Webツール「squoosh」を使った変換方法と、HP表示速度改善のメリットを紹介します。
今回は、Webサイト制作において重要な要素のひとつである 「WebP画像」について書いてみようと思います。
＜WebPを知ったきっかけ＞
WebPファイルについては、これまで 「名前を聞いたことがある」程度で、正直あまり活用できていませんでした。 しかし最近、Web制作やサイト高速化について学び直す中で、 PNG画像をWebPに変換するだけで、画像のファイルサイズを大幅に削減できるということを知りました。 画像の容量が軽くなると、 ・ Webサイトの表示速度が向上する ・ ユーザーの待ち時間が減る ・ 離脱防止や滞在時間アップにつながる など、HP全体のパフォーマンス改善が期待できます。
＜WebPとは？＞
WebPはGoogleが開発した画像形式で、 画質をできるだけ保ちながら、PNGやJPEGよりも軽量化できるのが特徴です。特に、 ・ 写真 ・ バナー画像 ・ Webサイト用の装飾画像 との相性がよく、現在では多くのブラウザで標準対応しています。
＜私のWebP変換方法（Photoshopなし）＞
最新版のPhotoshopではWebP保存が可能なようですが、 私のPCではスペックの都合上、Photoshopを最新版にアップデートできません。 そこで現在は、 「squoosh（スクーシュ）」というWebアプリを使用しています。 squooshは ・ダウンロード・インストール不要 ・ブラウザ上で完結 ・JPEG・PNG → WebP変換が簡単 という、とても使いやすいツールです。
＜実際どれくらい軽くなる？＞
実例として、こちらの行政書士事務所のバナー画像を変換したところ、
PNG：340KB
↓
↓
↓
WebP：61.4KB
と、約80％もファイルサイズを削減することができました。見た目の画質はほとんど変わらず、 Webサイトにとっては大きなメリットだと感じています。
＜これからのWeb制作に向けて＞
これまでは、特に意識せずPNG形式で画像を保存してきましたが、 今後はWebP形式も積極的に活用し、より軽く・見やすいHP制作を心がけていきたいと思います。 Webサイトの表示速度や使いやすさは、 ユーザー体験だけでなくSEOにも関わる重要なポイントです。 これからも、学んだことや実践したことを ブログで発信していきたいと思います。
＜ホームページ制作、承っております。＞
