WebPを活用してファイル容量を大幅に圧縮しよう

  • このエントリーをはてなブックマークに追加

画像フォーマットWebPとは

WebP(ウェッピー)は画像フォーマットの一種です。
背景の透過や、GIFのようにアニメーションにも対応しています。
JPGのように1,670万色以上の色を表現できるので、繊細な色表現にも対応している画像フォーマットです。
一番の特徴は、JPGやPNGよりもファイル容量を大幅に圧縮できる点にあります。
これによって、SEOで重視されるページ表示速度の改善が期待できます。


圧縮しても画像が粗くなりにくい

通常の画像フォーマットでは、圧縮率を高めると画質が粗くなります。
ところがWebPは正しく変換できれば、高圧縮しても画質の劣化がそれほど粗くはなりません。
WebPはある程度の画質を保ちながら、ファイル容量を下げられるのが特徴です。

どうして圧縮が必要なのか

Webサイトに配置する画像のファイルサイズが小さくなれば、表示に必要となるデータの読み込みが少なくて済みます。そうなればWebサイトの表示速度向上につながります。
表示速度が速い事はGoogle検索のアルゴリズムで評価されるので、SEOに影響があると思うとファイルの圧縮は必要です。

表示までに3秒以上かかると多くの方が離脱してしまう

検索をして、一覧からリンクを押してから表示までに“3秒以上”時間がかかると、一覧に戻って次に行ってしまう確率が非常に高くなります。
リンクを押した方の半分以上の方が離脱してしまうといわれているので、Webサイトの表示速度を向上させる事は重要です。

WebPのメリットとデメリット

メリット

WebP対応のメリットは、
・画像を圧縮しても綺麗
・ファイル容量を大きく圧縮できる

という点にあります。

ファイル容量を大きく圧縮することで、Webサイト全体の表示速度向上が見込めるのでSEOができます。
また閲覧までの待ち時間が短くなるので、離脱率も減少するかもしれません。

ただしWebP対応にしただけで閲覧数が増えたり、問い合わせ数が増加するわけではありません。
有益なコンテンツという土台の上にWebP対応があってこそ、本当の効果が出てきます。

デメリット

多くのインターネットブラウザに対応していますが、一部の古いブラウザでは表示できません。
ただし、一般的な方が利用するブラウザでは対応が完了しているので、配置した画像が出てこないという事は非常に稀な現象です。
インターネットエクスプローラー11(IE11)は未対応ですが、2022年6月16日にサポートが終了しているので大きな影響は出てこないといってもよさそうです。
どうしても古いブラウザで表示させなければいけない!という場合には、表示しない事もあり得ると覚えておきましょう。
HTMLの記述で、WebPに対応している場合と、未対応の場合で読み込ませる画像を変える事もできるので、対応できますが、同じ画像でもファイル形式が2種類になってしまうので、メンテナンス性が下がってしまう事に注意です。

もう一つのデメリットとして、変換に手間がかかる事が挙げられます。
変換を行うサービスがWeb上にあるのでそこで変換したり、ソフトを利用して変換する必要があります。

WebPへ変換するには

変換ソフトを利用したり、コマンドラインツールから変換する事ができます。
ただし別途ソフトのインストールが必要になったり、コマンドに慣れていないと大変です。
その他簡単な方法があるので、そちらを紹介します。

WEBサイトを利用する

手軽にできるのがこの方法です。
「WebP 変換」などで検索すると、様々なサービスが出てきます。
変換したいファイルを選んでアップロードすると、WebPのファイルをダウンロードできます。
無料で変換してくれるサービスもあるので、非常にお手軽です。

Photoshopを利用する

“ファイル/コピーを保存”から“WebP”を選択すると、変換ができます。

WebPへ対応しよう

ファイル容量が軽くなって、圧縮前と比較してもそれほど違いが見つけられないWebP。
正直対応しない手はないと思います。
変換にひと手間必要になるかもしれませんが、その手間をかけるだけの価値があります。

ユーザビリティ向上や、SEOの観点からもメリットの多いWebP。
特別な理由がなければ、積極的に対応してみてはいかがでしょうか。
  • このエントリーをはてなブックマークに追加

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください