WebPを導入するぞ！【画像変換・振り分け・Photoshop】

WebP対応のブラウザは、もはや全体の90％以上

WebP画像をWebで見るだけなら、WebPに対応したブラウザを使えばOK！

ただ、自分のブログ・サイトにWebP形式の画像を使いたい場合は、どうすればいいのか？

GoogleのSquooshとかPhotoshopとかで、WebP形式で画像を書き出すだけでいいの？いや、絶対他に何かあるでしょ？？

そんな疑問があるとき、ぼくの中で起こりまして。

そこであれこれ勉強しました。

そしたらチェックポイントや必要なことが、やっぱり結構ありまして（笑）

ざっとまとめると、こんな感じ↓↓↓

まぁ、大したことないものもありますが、それでもこのように書いてみると、けっこうありますよね。

この記事では上記内容を、WebP画像を自分のブログ・サイトに導入するときに必要になる順に、できるだけわかりやすく紹介＆解説していきます。

パソジユではすでにWebP画像を導入してます！（画像全部じゃないですけど）

ワクワクする新しいもの、あなたも使ってみませんか？？(^o^)/

WebPをどんな方法で導入するか？〜さらっと概要をおさえよう

この記事ではWebP画像を作成するのに必要なものについて、あれこれ解説していきますが、まずはさら〜〜っと、WebP導入の全体像をつかみましょう！

まず、WebP形式の画像を導入するのに必要な手順は、実は非常にシンプルでして、、、

この3つだけ。

これらについて、少し解説します。

WebP画像を作成する

まずはWebP画像作成の方法。

大きく分けて、作成方法は3種類↓↓↓

これらについて、かんたんに説明します。

→「新規でWebP画像を作成（保存・書き出し・編集）したい」「既存の画像を1つ1つ目で見て、WebPに変換したい」という場合、これらのツールを使います。

→ブログ・サイトの大量にある既存の画像を、とにかく一斉にWebPに変換したいなら、これを使って変換します。

→パソコンでWebP画像を扱えない（保存や編集ができない）場合や、いろいろ面倒なことはすっ飛ばして、とにかく簡単にWebPを導入したい人は、これが一番ラクでいいでしょう！

また「コマンドラインツールは難しそうだから使いたくないけど、画像の一斉変換はしたいんだよなぁ」という場合にも、活躍してくれるでしょう。

このように、用途・目的別にツールを使い分け、WebP画像を作成します。

画像をサーバーにアップロードする

これは特にどうってことはなく、いつものように画像をアップロードすればOK！

ただ、、

いつも最新のバージョンを使ってる方は、何も気にしなくて大丈夫。

ここではさらっとこんな感じに。

詳しくは、後ほどの章で書きます。

ブログ・サイト上に画像を配信する

これもたとえば「画像は全てWebPだけにする」とか「これから使う新規画像はWebPでいくけど、今までに作った既存の画像はそのまま使い続ける」なら、とくに考えることはないかな。

だけど「WebPに対応したブラウザにはWebP画像を配信し、WebP非対応のブラウザにはJPGやPNG画像を配信したい」という場合は、画像の配信振り分けをするための用意（設定）が必要になります。

方法は3種類↓↓↓

この中から自分が一番やりやすい方法で、画像の振り分けをします。

あくまでも画像の振り分けをしたい人は、ですよ。必ずしなくちゃいけない対応ではないので。

とまぁ、、、概要はこんな感じ！

大体の感じ、つかめたでしょうか？

いろんなサイト見てると「なんかWebP画像導入するのって、難しいのかな？条件厳しいのかな？？」とか思ってしまうかもしれませんが、実は難しいことは全然ないです。

確かに配信画像の振り分けや、既存の画像を一斉にWebP画像に変換しようとすると手間がかかりますが、これから作る新しい画像をWebP形式にするだけなら、負担はほとんどありません。

さ、もう少し話を掘り下げましょっか(^o^)/

WebPを導入する前の確認ポイント！

「ブログ・サイトの画像をWebPにしたい！」と思っても、条件を満たしていないとできません。

またWebPを導入する際の確認ポイントは、

• どんなふうにWebPを導入したいか？
• どう扱いたいか？

によっても変わってきます。

なので確認が必要なポイントを、1つずつ見ていきましょう！

ブログ・サイトのサーバーがWebPに対応しているか？

まずはここが一番大事！！

自分のブログやサイトを置いてるサーバーがWebPに対応してなければ、そもそもWebP画像を配信できません。

なので、、

サイトの検索ボックスに「webp」とかで検索すると、情報が出てくるはず。

ちなみにぼくも利用してるエックスサーバーだと、、、

とのこと。

とはいえ、実はPHP7.4のセキュリティサポートは2022年11月28日で終了しているんです。

「だったら黙って7.4よりも新しいバージョンを使う方がいいよね」となるじゃないですか？

エックスサーバーだとそれより新しいバージョンは、PHP8.0〜8.3が使用可能。

これにあわせて、エックスサーバーの「PHPのバージョンについて」というページも見てみると、こんな風にも書いてあります↓↓↓

現在公式にサポートされてるバージョンがPHP 8.3であり、推奨バージョンがPHP 8.2ということがわかります。

とはいえここで、実は何よりも大事なポイントがありまして、そもそもお使いの、、、

という場合があります。

いくらサーバーやWordPress側で「PHP 8.3を導入しました！」「PHP 8.2の使用が推奨だよ！」とか言われても、あなたのブログやサイトで利用してるWordPressテーマがこれらのPHPバージョンに対応していなければ、そもそも使えません（汗）

なので、、

もしテーマが対応しているPHPのバージョンがめちゃくちゃ低いのなら、テーマの変更も考えた方がいいのかもしれません。

まずはお使いのWordPressテーマやプラグインが対応しているPHPバージョンも一緒に、確認してみましょう！

確認せずにとりまサーバー側でPHPバージョン変更なんてしちゃうと「ブログ・サイトが表示されない！真っ白！」とかなって焦りますよ（汗）

かなり前の話ですが、実際ぼくがそうなって焦ってましたwwwwww

WordPressがWebPに対応したバージョンになってるか？

WordPressを常に最新のバージョンで使っている方は、特に気にすることはありません。

ただ仕事の兼ね合いや使っているテーマ・プラグインなどの都合でWordPressのバージョンを抑えている方は、確認しましょう。

これより低いバージョンだと、WebPを扱えません（汗）

パソコンがWebPに対応しているか？（必須ではない）

WordPressにJPGやPNG画像をアップロードするだけで、自動的に画像をWebPに変換してくれるようなプラグインを使ってWebP対応するなら、作業に使うパソコン（スマホ・タブレット）のWebP対応は必要ありません。

ですが、作成したWebP画像を「パソコン上に一時的にでも保存したい」とか「パソコンで見たい・編集したい」と考えてるなら、パソコンもWebP形式の画像に対応している必要があります。

そこで、主要OSのWebP対応状況を確認してみましょう！

現状、こんな感じ↓↓↓

Mac、Android、iPhoneとiPadは見ての通りです。

ただWindowsに関しては一言でサクッと言えないので、ちょっと説明します。

まず、Windows10やWindows11のWebP対応についての、Microsoftの公式な情報を探してみたのですが、どうも見つからない。

Google検索にもMicrosoftのHPにも、どこにも（汗）

そこで、手元のWindows10で実験してみました。

さらにこの「Microsoft Edge HTML Document」についてわかったことは、、、

なので、、、

以上から、、、

ちょっとした保存程度なら、そのままでも大丈夫かも。

だけどまともにガッツンガッツン使えるようにしたいなら、コーデックやアプリのインストールが必要でしょう。

ここら辺は実際のあなたの環境に合わせて、対策しましょう(^o^)/

（※こういうところ、Macの方が便利だなと感じます。値段は高いですけどね（汗））

画像の配信振り分けをするのか？

実はこれ、かなり大事なポイント！

先ほども軽く話しましたが、要は、、、

ってことです。

なので、

という場合は、振り分けの必要は、ありません。

ぶっちゃけ画像の振り分けをするかしないかで、手間がめちゃくちゃ変わります！！

もちろんしない方が手間が圧倒的に少なくなるし、画像の保存場所の容量も少なくて済みます！！

ぼくの個人的な見解としては、、、

と予想します。

とはいえ、実際のブログ・サイトの集客層や運営方針によっても結論は変わりますので、調査してみるのが、一番確実。

パソジユで行った調査や考察をこの記事にまとめてますので、よかったら参考にしてみてください(^o^)/↓↓↓

さぁ、WebP導入前の確認ポイントはこんなところです。

大丈夫そう？

準備OKなら、次の章に進みましょ♪

WebP画像の書き出し・変換方法

まずぼくの知る限り、WebP画像を作成する方法は、大きく分けて2つあります。

①は最もお手軽。

JPGやPNGで作った画像をWordPressにアップロードするだけで、WebP画像を作成してくれるようになってる（のがほとんどっぽい）から。

ただ、、、

のなら、②でやるのがよき！

プラグインはめっちゃ手軽だけど、WebP編集ツールを使って自分で圧縮具合も見ながらやった方が、画像の容量も減らせるし、品質も保てますから。

おしゃべりはこのくらいにして、WebP画像を作る方法を解説していきます。

PhotoshopでWebPを快適に扱えるようにする「WebPShop」

実はPhotoshopでもv 23.2以降、デフォルトでWebPファイルへの対応が始まりました！！

なので、とくに設定とかしなくてもWebPファイルを普通に読み込めるし、編集・保存・WebPへの変換（書き出し）も手軽にできるようになってます。

ただし、保存にちょ〜〜っと難があり、実際にWebP形式でファイルを保存してみると、、、

こんな感じのダイアログに。

これの何が不便かと言うと、、、

だから実際に作ってみないと、どんな画像になるか＆何KBになるかがわかんないんですよね（汗）

なので現時点では、、、

と言うわけで、Googleが提供するプラグイン『WebPShop』をインストールして、Photoshopで快適にWebPを扱えるようにしましょう！

突然始めちゃいますよ（笑）

まず、Google Developersの『WebPShop』のページに行きます。

赤枠「these instructions」をクリックします。

するとこのように、GitHubのWebPShopプラグインのInstallationの画面に飛びます。

軽く見てもらうとわかるように、WebPShopプラグインファイルへの直リンク、Mac用と×64プロセッサ（intelやAMDなど）を使ってるWindows用のものが、2つ貼ってあります。

ですが上記画像のように、最新版ではないバージョンへのリンクになってる場合もあるようでして。。。

なので、一番上の赤枠のリンクをクリックして、進みます。

すると、WebPShopのリリースノートの一覧ページに来るので、

「なるべく上にある新しいバージョン」かつ「自分が使ってるOS用のプラグインファイル」のリンクをクリックし、ダウンロードします。

ここではMac用のリンクをクリックします。

「WebPShop_0_4_2_Mac_Universal.zip」というファイルがダウンロードされますので、これをダブルクリックし、解凍。（zipファイルは消去しちゃってOK）

すると「WebPShop.plugin」というフォルダが出てきますので、これを『WebPShopのInstallation（GitHub）』に書いてあるように、、、

「アプリケーション/Adobe Photoshop（WebPShopをインストールしたいバージョン）/Plug-ins」の直下に置きます。

Finderを上記画像のような表示形式にして、「Plug-ins」に「WebPShop.plugin」をドラッグ＆ドロップするだけでOK！

そしたらPhotoshopを立ち上げます。（もし、Photoshopを開いていたなら、Photoshopを落とし、もう一度立ち上げます。）

で、ぼくはここで試しに、手元にあるWebp画像を読み込もうとしたのですが、、、

この画面が出てきて進めないwww

そしたら1度だけでいいので「OK」をクリックします。

OKを何回押しても無限にこの表示が繰り返されるので、あとは放置したまま「セキュリティとプライバシー」の画面を開き、

鍵を外す→このまま許可をクリックし、また鍵をかけます。

再度webp画像を開こうとすると、また注意みたいなポップアップが出てきますが、「開く」で進みます。

これでWebP画像を読み込めます！

同時にJPG・PNG・GIFなどをWebPフォーマットに変換できるようにもなってます！

ちなみに画像をWebPに変換・保存するには、Photoshopで画像を読み込んだ状態で、

すると、このような画面になるので、、、

フォーマットを「WebPShop」にして「保存」をクリックします。

「Preview」のとこにチェックを入れれば、上記画像のような表示になります！

ちょっと前のバージョンだと、プレビュー表示が小さくて見辛く、拡大表示する範囲も狭かったので、少し使いづらかった。

そこら辺が改善されてて、ありがたやです！

手元であれこれやって、様子を見ながら使いましょう！

Googleの「Squoosh」

「Photoshop使ってないよ〜」とか「今使ってる画像編集ツールがWebPに対応してない」なら、誰でも無料ですぐに使える、、、

がおすすめ！

これはWebPを開発したGoogleが提供しているツールで、インストールする必要がなく、Squooshのサイトに行ってブラウザ上に画像をドラッグ＆ドロップするだけで使えるので、超簡単(^o^)/

しかもこのSquoosh、画像のデータをSquooshのサーバーに送ることなく、手元のパソコン・スマホに置いたままで作業できるから、、、

ね？

手軽でしょ！（笑）

色々と細かい調整もできますし、圧縮前後の画像を並べて見比べることもでき、画面表示も大きいから見やすくて、使い勝手は最高！

それとこのSquooshはWebPに限らず、いろんな画像フォーマットに変換できるのも魅力。

とにかく、『Squoosh』に行って使ってみましょっか！

ピンクのもやもやに画像をドラッグ＆ドロップ、もしくはもやもやのあたりをクリックして、ファイルを選択。

すぐ下にあるサンプル画像を使ってもOK！

すると、、、

こんな感じで2画面表示の編集画面になります。

デカっ！（笑）

初期状態だと左側（画面2）が元の画像、右側（画面1）で圧縮・変換をするような感じになってます。

ただ左側（画面2）でも同じように圧縮・変換できますので、「WebPのlossyとlossless、どっちがいいかな？」とかの比較もできます！

設定が決まったら、右下のダウンロードボタンを押せば、画像をダウンロードできます！

ねっ？簡単でしょ(^o^)/

それとSquooshが気に入ったら、既存の画像をまとめて一括での変換もできる『CLI版（＝Squoosh CLI）』や『API版（＝libSquoosh）』の使用を検討してもいかもしれません。

コマンドラインツール「cwebp、dwebp」で一斉変換する

上でチラッと触れたSquoosh CLIやlibSquooshなどもありますが、

それ以外にも、既存の画像を一斉に変換するコマンドラインツールがあります。

その中でも、よく目にするのがこれ↓↓↓

これらはどれもWebPの教科書『WebP ＞ Guides（Google Developers）』で公開されてるツールなので、安心感は文句なしですよね。

それぞれの概要は、こんな感じ↓↓↓

以下にリンク貼っておきますので、必要な方は使ってみてください(^o^)/

WordPressプラグインを使ったWebP対応

自分のブログ・サイトをWordPressで構築している場合、WebP対応の最も簡単な方法が、、、

たとえば『Converter for Media』ならば、、、

• JPGやPNG画像をアップロードすれば、自動でWebP形式に変換してくれる
• 既存の画像も全て一括で変換してくれる
• WebP対応ブラウザ、非対応ブラウザで画像の出しわけをしてくれる

ようです！

つまり、WebP導入したときに必要な手順を、まるっとやってくれるようで、、、すんごい便利ですよね！！

ただ、、、

という方には向きません。

とはいえ直感的に扱えるので、プラグインは楽チンなとこがいい！

他にも『EWWW Image Optimizer』『WebP Express』というプラグインもありますので、ご自分に合いそうなものを使いましょう！

WebP画像の配信振り分け方法

WebP画像の振り分け配信、実際の振り分け方法は、この3つ↓↓↓

ただしpicture要素は「全ての画像のHTMLに記述を追加しなきゃいけない」のでかなり手間がかかりますし、Akamaiはすごい便利だと思いますが、その分、かなりお金はかかるはず。なので、個人向けというよりは企業向けかと。。。（具体的な価格は、ちょっとわかりませんでしたが。）

なので一番現実的には「.htaccessでの振り分け」が手軽でいいと思います！

具体的なhtaccessへの記述内容は、自分のやりたいことによっても変わりますので、[webp 振り分け]などでググって、自分に合いそうなものを選びましょう。

もしくはプラグイン『EWWW Image Optimizer』で表示されるコードを.htaccessに記述するという手もあります。

方法は、プラグインインストール→有効化し、EWWW Image Optimizerの設定画面で「WebP変換」にチェックを入れると、WebP配信振り分けの際に必要な.htaccessに記述するコードが表示されます(^o^)/

このとき、「リライトルールを挿入する」をクリックすれば、コード（とちょっとした説明文）が、ブログ・サイトのサーバーの.htaccessに記述されます。

それが嫌な方は.htaccessに、コードをコピペしましょう。

画像をリダイレクトする（画像からの流入が重要な場合）

ぼくがこう言う根拠と詳しい内容は、海外SEO情報ブログさんのこの記事『JPGからWebPに画像を置き換えるときリダイレクトは必要か？（海外SEO情報ブログ）』をご覧ください(^o^)/

いつもお世話になっており、本当にありがとうございます！

ただぼく的に、旧画像からWebP画像へのリダイレクトは、、、

と思います。

判断基準はそれぞれのブログ・サイトごとにあるかとは思いますが、たとえば、、、

Search Consoleの「検索パフォーマンス」の画面で、、、

「検索タイプ」をクリックし、

「比較」→「ウェブ 対 画像」にして、右下の「適用」クリックすると、、、

こんな感じで「ウェブ」と「画像」の比較ができます。

ウェブが3万回クリックされてるときに、画像はたったの124回。

パソジユは元々「画像検索からの流入が必要！」とは考えてませんし、数字で見てもこの感じ（苦笑）

よって、

と、判断します。

ただし、「画像からの流入は、うちのブログにとって重要！」「この画像を、このキーワードの画像検索結果で上位表示させたいんだ！」というような場合は、もちろん数字に関係なくリダイレクトした方がいいと思います。

まとめ：WebPを導入して、自分も読者も快適なWebライフを！

WebPの導入は、ブログ・サイト運営者自身にとっても読者様にとっても、win winな結果をもたらしてくれます。

ぼくらが積極的にWebPを導入し、ウェブの世界で使う画像のスタンダードを、そろそろWebPにしちゃいましょう！

パソジユでも順次WebP画像を増やしていく予定です。

その中で何か困ったことや「これもいいな」ってことがあれば、パソジユのWebP関連の記事に追記したり、新記事としてリリースしまっす(^o^)/

WebPの知見、どんどん増やしちゃえ☆