【テンプレートを使って簡単にデザインをしたい方はこちらをクリック▶︎Adobe Express】
Web制作やLP制作をしていると、
「画像をもっと軽くしたい」
と思う場面は非常に多いです。
特に、
・LPの表示速度が遅い
・PageSpeed Insightsで減点される
・JPEG画像が重い
・スマホ表示が遅い
・SEOスコアが悪い
という悩みを持つ方は非常に多いです。
そこで最近、Web制作業界で主流になっているのが「WebP」です。
WebPを使うことで、
・JPEGより軽い
・PNGより軽い
・高画質
・透過対応
という大きなメリットがあります。
Googleも推奨している画像形式のため、SEO対策としても非常に重要です。
この記事では、PhotoshopでWebP保存する方法を初心者向けにわかりやすく解説します。
さらに、
・WebPとは何か
・JPEGとの違い
・WebP書き出し方法
・軽量化のコツ
・WordPressで使う方法
まで徹底解説します。
目次
WebPとは？
WebPとは、Googleが開発した画像形式です。
最大の特徴は、
「高画質なのに軽い」
こと。
例えば、同じ画像でも、
・JPEG → 1MB
・WebP → 300KB
になることがあります。
つまり、画質を保ちながら容量を大幅に削減できます。
特にスマホ表示では非常に重要。
表示速度改善にも大きく貢献します。
なぜWebPが重要なのか？
Googleは現在、
「ページ表示速度」
をSEO評価に使っています。
つまり、画像が重いとSEOにも悪影響があります。
特にLPでは、
・表示速度低下
・離脱率上昇
・CV率低下
につながります。
WebP化すると、ページ全体が軽くなるため、SEOやCV改善にも効果があります。
特に最近は、スマホユーザー中心なので、画像軽量化は非常に重要です。
PhotoshopでWebP保存はできる？
最近のPhotoshopでは、標準でWebP保存に対応しています。
以前はプラグインが必要でしたが、現在は比較的簡単に保存できます。
ただし、Photoshopのバージョンによっては、WebP表示が出ないことがあります。
その場合は、Photoshopを最新版にアップデートする必要があります。
PhotoshopでWebP保存する方法
最も簡単な方法は、
「書き出し形式」
を使うこと。
手順：
ファイル
↓
書き出し
↓
書き出し形式
を選択。
すると、形式選択の中に「WebP」が表示されます。
そこで、
・品質
・画像サイズ
・メタデータ
などを調整できます。
非常に簡単なので初心者にもおすすめです。
WebP保存時のおすすめ設定
初心者が迷いやすいのが品質設定。
おすすめは、
・品質70〜85
程度。
このくらいなら、見た目を保ちながらかなり軽量化できます。
逆に、品質100にすると容量が大きくなりやすいです。
LP制作では、
・70〜80
程度が非常に使いやすいです。
JPEGとWebPの違い
JPEGは長年使われている形式ですが、容量が大きくなりやすいです。
一方WebPは、
・軽い
・高画質
・透過対応
という大きなメリットがあります。
特に、WebPはPNGの代替にも使えるため、かなり便利です。
最近のWeb制作では、WebPが主流になりつつあります。
WebPのデメリット
WebPにもデメリットはあります。
例えば、
・古いブラウザで非対応
・古いソフトで開けない
・印刷用途には向かない
など。
ただし、現在の主要ブラウザはほぼ対応しています。
そのため、Web用途ならほぼ問題ありません。
WebPにするとどのくらい軽くなる？
画像によって異なりますが、
・30%
・50%
・場合によっては70%
くらい軽くなることもあります。
特に写真系画像は効果が大きいです。
LP全体で見ると、かなりの軽量化になります。
その結果、
・表示速度改善
・SEO改善
・離脱率低下
につながります。
WordPressでWebPを使う方法
最近のWordPressはWebPに対応しています。
通常の画像と同じようにアップロード可能。
ただし、古いテーマや古いプラグインでは問題が出る場合があります。
特に、
・画像最適化プラグイン
・キャッシュプラグイン
との相性確認は重要です。
LP制作でWebPを使うメリット
LPでは、画像容量が非常に重要です。
特にファーストビュー画像が重いと、表示速度が大きく低下します。
WebPを使うことで、
・高速表示
・SEO改善
・広告効果向上
につながります。
最近は、広告LPでもWebP化がかなり増えています。
WebPでよくあるトラブル
初心者によくあるトラブル。
・画像が表示されない
・アップロードできない
・WebPが開けない
・プレビューできない
・画像最適化プラグインと競合
特にサーバー環境によっては、WebP変換がうまく動かない場合があります。
その場合は、JPEG fallback設定を入れると安全です。
WebP保存でおすすめの画像サイズ
画像サイズも重要です。
例えば、
・LP → 横1200〜1600px
・ブログ画像 → 横1200px前後
・サムネイル → 横800〜1200px
程度が使いやすいです。
大きすぎる画像は、WebPでも重くなります。
「必要以上に大きくしない」
ことが非常に重要です。
まとめ
PhotoshopでWebP保存する最大のメリットは、
「高画質のまま軽量化できる」
ことです。
特に重要なのは、
・品質70〜85
・画像サイズ最適化
・JPEGからWebP移行
・LP高速化
・SEO改善
この5つ。
WebPは、現在のWeb制作では非常に重要な画像形式です。
特に、
・LP制作
・ブログ運営
・ECサイト
・広告運用
では大きな効果があります。
Photoshopだけでも簡単にWebP保存できるため、ぜひ今回紹介した方法を試してみてください。
関連記事
Adobe Fireflyの使い方完全ガイド｜初心者でも簡単にAI画像生成
Photoshopで写真をアニメ風に加工する方法｜初心者でもできる簡単テクニック
Photoshopで画像の被写体を切り抜く方法【初心者〜プロまで解説】
Photoshopでガラス割れエフェクトを作る方法【初心者向け】リアルなひび割れ加工を簡単解説
ペイントツールのスタンダード【CLIP STUDIO PAINT PRO】