Googleの検索エンジンは、どんどん新しい技術を活用していってます。その中で、2021年は、画像コンテンツの評価もあがってきています。
検索エンジンでの上位表示を狙うなら、画像や動画を活用したリッチなコンテンツが重要になってくるということです。
しかし、だからといって、なかなか表示されないホームページは、だめです。googleからの評価が下がります。
そこで、今回ご紹介するのが、WebP(ウェッピー)というGoogleが開発した画像の新しいフォーマット。
このWebP(ウェッピー)を導入すると、従来の画像の７０％程度の重さになります。これは、ユーザーの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を画像の圧縮に使っています。圧縮率が高いので、画像計量化にはおすすめです！
WebP(ウェッピー) ワードプレス 簡単導入 方法
ワードプレスで作ったホームページなら、WebP(ウェッピー) を導入するのは、とっても簡単です。
プラグインベースでできます！
プラグインは、たとえば
EWWW Image Optimizer という プラグイン
このプラグインなら、自動で、WebP(ウェッピー)に変換してくれます。
しかも、対応していないブラウザに対しては従来のjpg画像を表示してくれます。
WebP Express プラグイン でもOKです。
このプラグインなら、簡単な設定でWebP(ウェッピー) に対応可能です。
導入が、めちゃくちゃ簡単なので、ぜひ！
webp 変換 フリーソフト
webp 変換 フリーソフト を ご紹介します！
WebP Converter という海外のツールです。
WebP Converter 紹介ページ
https://freesoft-100.com/review/anywebp-webp-converter.html
PNGやjpgの画像を、WebP 形式に変換できるフリーソフトです。
ドラッグ＆ドロップで操作できるからかんたんです！！
しかも、複数ファイルの変換に対応。一気に変換できるので、スピーディーに、webp 変換が可能です。
ちなみに、 WebP から、PNGやJPGファイルにする変換もできます！
保存先フォルダの指定も可能です。
webp 画像ビューア
windowsで、簡単に、webp 画像を見れるようにするには、ビューアを入れる必要があります！
通常、Windowsでは、WebP画像を開く場合、ブラウザで開く必要があります。
- 一覧で見ることができない
- スライド表示されない
- サムネイルがでない
と不便の多いwebp
ということで、webpの画像ビューアを入れましょう！
WebP Codecというソフトをインストールします。
WebP Codecは、無料です
Index of downloads.webmproject.org/releases/webp
https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html
上記サイトの「WebpCodecSetup.exe」をクリックしてダウンロードしてください。
ダウンロード後、インストールを！
インストールしたら、windowsのエクスプローラなどで、WebPファイル、webP画像の関連付けを行います。
- WebP画像を右クリック
- プロパティをクリック
- 変更をクリック
- ファイルを開く方法で「Windowsフォトビューワー」を選択
たったこれだけで、EdgeやChrome、firefoxに頼らず、windowsで、WebPファイルを閲覧できるようになります。
まとめ WebP(ウェッピー) なら画像品質をそのまま！軽い 次世代フォーマット
いかがでしょうか？WebP(ウェッピー)
WebP(ウェッピー) は、画像のクオリティを維持して、軽くできる画像フォーマットなので、ぜひとも、活用してほしいです。
いかに圧縮をして、そして、画像のクオリティを下げないようにしていくかは、web技術としては、とても重要です。
そこまで意識して、webを作ってくれる技術者が、web制作会社が、増えてくるといいですよね！ユーザーにとっても、表示速度が上がるので、メリットになります。
検索エンジンの検索結果のランキングにも影響を与える、ホームページの表示速度。それに大きく影響を与えかねないのが、このWebP(ウェッピー) です。
SEO対策を意識して、取り組むようになれば、Googleからの評価もあがるはず。
また、2021年6月から発生するGoogleのコアバイタルのアルゴリズム変動にも、好影響を与えてくれそうです。
ワードプレスで、ホームページを作っているなら、導入しない手はないですね！
【効果の出るwebノウハウ】集客 認知度UPへ 商品サイト 制作 の すすめ
おすすめ SEO対策 関連記事
検索インテントとは 検索意図 を 考慮し SEO コンテンツ 制作 調査方法は？
https://saras-wati.net/seo/search-intent/
【SEO】ドメインパワーとは 調べ方 目安 ドメインパワー アップ 方法 を 網羅！
https://saras-wati.net/seo/about-domain-power/
【AI】SEO 自動分析 ツール SEARCH WRITE サーチライト で コンテンツマーケティング強化
https://saras-wati.net/seo/about-search-write-seo/
Chrome キーワードサーファー キーワード調査 選定ツール が SEO対策 に 便利
https://saras-wati.net/seo/chrome-keyword-surfer/
共起語とは｜調べ方 SEO対策 ライティング 方法 使い方 かんたん 解説
https://saras-wati.net/seo/co-occurrence-words-seo/
Google 低品質コンテンツ 基準 探し方 ページ削除 の SEO 対策
https://saras-wati.net/seo/google-low-quality-content/
moz seo 対策 ツール 使い方 を 簡単解説！ドメインオーソリティ を 知ろう
https://saras-wati.net/seo/moz-seo-tools-howto/