WebPは、Googleが設計したファイルサイズを軽量化しつつ高画質を維持できる画像フォーマットです。
そんなWebPの存在は知っていても、実際には使ったことがない方も多いでしょう。
本記事で、Photoshopで画像をWebP形式にして保存する方法や、WebP形式を扱うメリットについて見ていきます。
WebPとは
WebP（ウェッピー）とは、Googleが公式で用意している画像形式です。拡張子は「.webp」で表記されます。
画像サイズが軽いという特徴から、Web制作に使用する画像としてよく利用されているのが特徴です。現在では、ChromeやSafari、Firefoxなど主要なブラウザがWebPのフォーマットに対応しています。
ほかの拡張子との違いは？
PhotoshopはWebPのほかにもさまざまな拡張子のフォーマットで保存ができますが、ほかの拡張子とはどのような違いがあるのでしょうか。
以下の表で主な拡張子の特徴をまとめてみました。
| 拡張子 | 特徴 |
| WebP | 高圧縮率でありながら高品質を維持できる。ページの読み込み速度を改善できる。ブラウザのサポート状況に注意が必要。 |
| JPG | 高圧縮によって低容量で保存ができる。透過処理には非対応。画像を保存するたびに品質が低下する。色数の多い景色などの画像に向いている。 |
| PNG | 可逆圧縮によって複数回保存を繰り返しても画質が劣化しにくい。透過処理に対応。背景のないロゴやアイコンに最適。 |
| GIF | アニメーションに対応。256色までの制限があるため、色数の多い画像には向かない。 |
| SVG | ベクター形式のフォーマット。拡大・縮小してもサイズが劣化しない。透過処理に対応している。アイコンやロゴの制作に最適。ブラウザのサポート状況に注意が必要。 |
画像の特徴や用途によって最適なフォーマットは異なります。使い勝手が良いからといってすべての画像をWebPにしてしまうのではなく、画像の特徴や用途に合わせて保存形式は選択するようにしましょう。
また、以下の記事では、アニメーションをつけられる形式であるGIF画像をPhotoshopで作る方法について紹介しています。
作った素材からGIFを作る方法や、動画をGIF画像に変更する方法について解説しているので、アニメーションに興味のある方は、ぜひこちらもあわせてご覧ください。
PhotoshopでWebP形式で保存するメリット
PhotoshopでJPGやPNGではなく、WebP形式で保存するメリットは以下のとおりです。
- 容量を抑えられる
- SEO対策になる
- アニメーションや透過処理に対応している
これらのメリットについて確認していきましょう。
メリット①容量を抑えられる
Photoshopで作成した画像をWebP形式で保存するメリットは、そのPNG優れた圧縮性能にあります。
WebPは画質を保ちながら容量を圧縮できるため、JPGやPNGよりも少ないファイルサイズで扱えるのが特徴です。
この優れた圧縮性能により、ウェブページ全体のデータ量を抑えることができるため、サーバーの負担軽減やデータ転送速度の向上にも繋がります。
特に、多くの画像を使用するサイトにおいては、WebP形式への変換はサイト全体のパフォーマンスを向上させる有効な手段といえるでしょう。
メリット②SEO対策になる
WebP形式で画像を保存することはSEO対策にも繋がります。
日本語で検索エンジン最適化を意味するSEO対策とは、Search Engine Optimization（サーチエンジン オプティマイゼーション）の略称であり、ウェブサイトの検索エンジンにおけるランキングを向上させるための一連の施策を指します。
ウェブページの表示スピードは検索エンジンのアルゴリズムに影響を与える重要な要素の一つです。
WebP形式を使用することで画像ファイルのサイズが小さくなると、ページの読み込みスピードが向上します。
これにより、検索エンジンからの評価が高まり、検索結果での上位表示が期待できます。
また、画像のロード時間が短縮されることで、ユーザーエクスペリエンスも向上し、直帰率の低下やページ滞在時間の延長、サイト回遊率の上昇といった効果も得られます。
これらの特徴から、WebP形式の導入はSEO対策として有効だといえるため、サイト運営やサイト制作を行っている方は、積極的に取り入れてみるとよいでしょう。
メリット③ アニメーションや透過処理に対応している
WebPはPNGのように、背景を透明にした表現が可能です。そのため、ウェブサイトやアプリケーションでロゴやアイコンとしても使用することができます。
また、GIFのように、WebPはアニメーションをサポートしているのも特徴です。
このように、透過性とアニメーションに対応している点で、WebPは多機能で柔軟性の高いフォーマットといえるでしょう。
これらの機能により、WebPは様々なデザインのニーズに応えることができるため、Webコンテンツ制作では重宝されるフォーマットの一つです。
PhotoshopでWebP形式で保存する方法
以下の手順で、Photoshopで編集した画像をWebP形式で保存できます。
- メニューバーの「ファイル」から「コピーを保存」を選択する
- 保存画面に移行したら、ファイル形式を「WebP」に変更して「保存」ボタンを選択する
保存はJPGやPNGなどと同じ手順で行えるため、Photoshopなら簡単にWebP形式の画像を作成できます。
また、WebP形式での保存を自動化させたい場合は、アクション機能を使うのがおすすめです。アクションは、同じ手順の作業を自動的に行ってくれる機能で、うまく活用することで単純作業の効率化を実現できます。
以下の記事で、アクションの詳しい使い方について解説しているので、ぜひこちらもあわせてご覧ください。
PhotoshopでWebP形式で保存する際に気をつけること
Photoshopで編集した画像をWebP形式で保存する際は、以下の2点に注意する必要があります。
- 書き出しはできない
- サポートのないブラウザがある
これらの注意すべきポイントについて確認していきましょう。
注意点①書き出しはできない
Photoshopで画像を保存する際に、JPGやPNGであればメニューバーの「ファイル」にある「書き出し」から出力ができますが、WebP形式ではこちらの方法が使えない点に注意が必要です。
WebP形式で保存する際は、書き出しではなくメニューバーにある「コピーを保存で行う」と覚えておきましょう。
注意点②サポートのないブラウザがある
WebP形式は主要なブラウザの多くでサポートされていますが、すべてのブラウザでサポートがあるわけではありません。特に古いバージョンのブラウザではWebP形式の画像を表示できないことがあります。
そのため、WebサイトにWebP画像を使用する際は、JPEGやPNGなど、ほかの形式の画像も用意しておき、非対応のブラウザで閲覧された際に画像を切り替える記述をして対処しましょう。
このように、WebP画像を使う場合はブラウザのサポート状況を確認し、非対応のブラウザでも問題なく表示できるように準備することが大切です。
PhotoshopでWebP形式のファイルは開けない？
PhotoshopではWebP形式のファイルを開くことはできません。PhotoshopでWebPを開くためにはソフトの機能を拡張できるプラグインのインストールが必要になります。
WebPをPhotoshopで開くためのおすすめプラグインは「WebPShop」です。WebPShopをパソコンにインストールする手順は以下のとおりです。
- WebPShopの配布サイトにアクセスする
- GitHubのリンクをクリックする
- AssetsにWindowsとmac用のzipファイルがあるのでOSに合ったものをダウンロードする
- zipファイルを展開する
- ダウンロードしたWebPShop.pluginをPhotoshopのフォルダー内に移動させる
- Photoshopを再起動する
移動させるフォルダーのディレクトリは以下のとおりです。
- Windowsの場合
- macOSの場合
いずれもPhotoshop2024のバージョンの場合です。
上記のように、WebPShopをパソコンにインストールした状態でWebP形式のファイルをPhotoshopに読み込むことで、Photoshopで WebPを編集できるようになります。
Photoshopの基礎的な知識を学びたいなら
Photoshopでは、WebPやJPG、PNGといったさまざまな画像形式をサポートしています。しかし、画像編集の基礎知識がなければどの形式で保存すればよいかわからないでしょう。
Photoshop基礎セミナー講習では、データの保存方法など、Photoshopを使ううえで基本的な知識や操作方法について学習できます。
受講形態は実際に会場へ足を運んで対面で学習する会場受講と、Zoomでつないでオンラインで講座を受けられるライブウェビナーの2種類があります。
オンラインのライブウェビナー形式であったとしても、自宅のパソコンとセミナー会場のパソコンを接続して講座を進められるため、会場にいる講師のサポートを受けながら学習が可能です。
また、基礎から派生して実務でも使えるような応用的なテクニックも幅広く学べるため、これからPhotoshopの学習を始めたいと考えている方にぴったりです。ぜひ公式ホームページから費用や日程についてチェックしてみてください。
PhotoshopとWebPについてのまとめ
今回は、Photoshopで編集した画像をWebP形式で保存する方法について紹介しました。WebPはGoogleが設計した画像形式で、優れた圧縮性能によって小さなファイルサイズで扱えるのが特徴です。
特に、サイト制作を行っている方にとって、一つひとつの画像サイズが大きいとサイトの読み込み速度に悪影響を与えてしまうため、WebPは重宝する画像形式です。
しかし、WebPのサポートのないブラウザのバージョンもあるため、サポート状況を事前に調べてから使用するようにしましょう。
