【検索エンジン対策】WebP(ウェッピー) 画像の表示速度を速くする!!

Googleの検索エンジンは、どんどん新しい技術を活用していってます。その中で、2021年は、画像コンテンツの評価もあがってきています。

検索エンジンでの上位表示を狙うなら、画像や動画を活用したリッチなコンテンツが重要になってくるということです。

しかし、だからといって、なかなか表示されないホームページは、だめです。googleからの評価が下がります。

そこで、今回ご紹介するのが、WebP(ウェッピー)というGoogleが開発した画像の新しいフォーマット。

このWebP(ウェッピー)を導入すると、従来の画像の70%程度の重さになります。これは、ユーザーのweb体験を、より良くしてくれる可能性が高いので、検索エンジンでのランキングにつながる要因となるCore Web Vitalsに好影響になるはず!

表示速度が速くなる画像フォーマット WebP(ウェッピー)について、この記事ではご紹介していきます!

WebP(ウェッピー)とは?

WebP(ウェッピー) Google解説ページ(英語版)
A new image format for the Web
https://developers.google.com/speed/webp

WebP(ウェッピー)とは、Google社が開発した画像フォーマットです。

WebP(ウェッピー)は、圧縮率の高いフォーマットで、しかも、背景を透過画像としても書き出すことができます。

つまり、PNGなどの代替として活用ができます。

アニメーションも作成可能です。アニメーションgifが、動画の代わりに活用されているホームページもありますが、WebP(ウェッピー)なら、その代わりもできます!

それゆえ、結果的に、JPEG、GIF、PNGを網羅できるんですよね!

しかも、WebP(ウェッピー)は、軽い。

WebP(ウェッピー)の開発元、Googleは、

  • PNGよりも約26%
  • JPGより約25~34%軽くできる

と発表

A new image format for the Web のサイト内で公表
https://developers.google.com/speed/webp

WebP(ウェッピー)は、しかも、画質が劣化しにくいという特性もあります。

画質が劣化しないメリットは、コピーしやすいという点です。web業界だと、コピー、編集が多いので、こういう画像フォーマットは待っていました!というかんじですね。

WebP(ウェッピー) 最大サイズ

WebP(ウェッピー)で作れる画像の最大サイズは、

16,383ピクセル × 16,383ピクセル

結構大きなサイズに対応しているので、今のホームページの規格で考えれば十分です。

そもそも、こんなピクセル数の画像作りませんけどね。

WebP(ウェッピー) 拡張子

WebP(ウェッピー)の拡張子は

.webp

になります!

WebP(ウェッピー) サポートブラウザ

実は、WebP(ウェッピー)は、2010年ごろからある、画像フォーマットなのですが、なかなか普及してきませんでした。

その理由は、サポートブラウザの影響です。

実は、safariが、だめ 適用外だったのです。

この影響が大きかったですね。

Safariでwebpが表示されないということは、iPhone、iPad、Macの標準ブラウザで、表示されないので、日本では、結構致命的でした。

しかし、2021年1月現在では、WebP(ウェッピー)は、サポートブラウザを大きく増やしました。

グローバル基準では80%以上の対応率になります!

具体的には、

WebPの対応ブラウザ(2020年12月現在)

  • PC 版&Android版 Chrome
  • PC 版&Android版 Firefox
  • PC 版&Android版 Edge
  • iOS 14 / macOS 11以降 Safari 14

具体的な対応ブラウザの一覧はこちら
https://developers.google.com/speed/webp/faq?hl=ja#which_web_browsers_natively_support_webp

このようになってきたので、そろそろWebP(ウェッピー)を活用してもいい時期になってきていますね。

WebP(ウェッピー) 画像 作り方

WebP(ウェッピー)の画像は、どうやってつくるのがいいのでしょうか?

答えは、簡単

Photoshop

でできます!

Photoshopにプラグインをインストールすれば、だれでも、WebP(ウェッピー) 画像 を作れるようになります。

Photoshopプラグイン WebPShop 公式ホームページ
https://developers.google.com/speed/webp/docs/webpshop

また、SquooshというGoogleの画像変換のwebツールでもOKです。

ドラッグアンドドロップで画像を置いて、変換するだけ!

ソフト不要で、圧縮簡単!!

無料で使えます。

Squoosh
https://squoosh.app/

お得ですよ。

このホームページでも、squooshを画像の圧縮に使っています。圧縮率が高いので、画像計量化にはおすすめです!

WebP(ウェッピー) ワードプレス 簡単導入 方法

ワードプレスで作ったホームページなら、WebP(ウェッピー) を導入するのは、とっても簡単です。

プラグインベースでできます!

プラグインは、たとえば

EWWW Image Optimizer という プラグイン

このプラグインなら、自動で、WebP(ウェッピー)に変換してくれます。

しかも、対応していないブラウザに対しては従来のjpg画像を表示してくれます。

WebP Express プラグイン でもOKです。

このプラグインなら、簡単な設定でWebP(ウェッピー) に対応可能です。

導入が、めちゃくちゃ簡単なので、ぜひ!

まとめ WebP(ウェッピー) なら画像品質をそのまま!軽い 次世代フォーマット

いかがでしょうか?WebP(ウェッピー)

WebP(ウェッピー) は、画像のクオリティを維持して、軽くできる画像フォーマットなので、ぜひとも、活用してほしいです。

いかに圧縮をして、そして、画像のクオリティを下げないようにしていくかは、web技術としては、とても重要です。

そこまで意識して、webを作ってくれる技術者が、web制作会社が、増えてくるといいですよね!ユーザーにとっても、表示速度が上がるので、メリットになります。

検索エンジンの検索結果のランキングにも影響を与える、ホームページの表示速度。それに大きく影響を与えかねないのが、このWebP(ウェッピー) です。

SEO対策を意識して、取り組むようになれば、Googleからの評価もあがるはず。

また、2021年6月から発生するGoogleのコアバイタルのアルゴリズム変動にも、好影響を与えてくれそうです。

ワードプレスで、ホームページを作っているなら、導入しない手はないですね!

【効果の出るwebノウハウ】集客 認知度UPへ 商品サイト 制作 の すすめ