【テンプレートを使って簡単にデザインをしたい方はこちらをクリック▶︎Adobe Express】
WebサイトやLP制作をしていると、必ず悩むのが「画像の重さ」です。
特に、
・LPの表示速度が遅い
・Photoshopで書き出した画像が重い
・Makuakeや楽天にアップできない
・PageSpeed Insightsで減点される
・スマホで表示が遅い
という問題は非常によくあります。
画像が重いと、単に表示速度が遅くなるだけではありません。
・SEO低下
・離脱率増加
・CV率低下
・広告効果低下
にも直結します。
特に最近は、Googleが「表示速度」をかなり重視しているため、画像軽量化はWeb制作において非常に重要です。
この記事では、Photoshopで画像を軽量化する方法を初心者向けにわかりやすく解説します。
さらに、
・JPEGとPNGの違い
・WebPとは何か
・画質を落とさず軽くするコツ
・LP制作時の最適サイズ
まで徹底解説します。
目次
なぜ画像軽量化が重要なのか？
画像が重いと、サイト表示速度が遅くなります。
例えば、
・5MBの画像を10枚
使うだけで、ページ容量は50MB。
スマホ回線ではかなり遅くなります。
特にLPでは、表示速度が遅いとユーザーが途中で離脱しやすくなります。
Googleの調査でも、表示速度が1秒遅くなるだけで離脱率が上がると言われています。
つまり、画像軽量化は「デザイン」ではなく「売上」に関係しています。
Photoshopで画像が重くなる原因
Photoshopで画像が重くなる原因は主に以下です。
・画像サイズが大きすぎる
・解像度が高すぎる
・PNGを使いすぎ
・不要レイヤーが多い
・書き出し設定が適切でない
特に初心者に多いのが、
「300dpiのままWeb用画像を書き出す」
こと。
Webでは基本72dpi〜144dpi程度で十分です。
印刷用設定のままだと、無駄に容量が増えます。
まずは画像サイズを見直す
最初にやるべきは「画像サイズ」の見直しです。
例えば、LPで横幅1200pxしか使わないのに、
・4000px
・6000px
で書き出しているケースがあります。
これは非常にもったいないです。
おすすめサイズの目安：
・バナー → 横1200px前後
・LP画像 → 横1200〜1600px
・サムネイル → 横800〜1200px
最近はRetina対策で少し大きめでも良いですが、それでも過剰サイズは不要です。
JPEGとPNGの違いを理解する
画像形式の違いを理解することは非常に重要です。
JPEG
特徴：
・軽い
・写真向き
・圧縮できる
LPでは最も使用頻度が高いです。
特に背景写真や人物写真はJPEGがおすすめ。
PNG
特徴：
・透過可能
・劣化しにくい
・容量が重い
ロゴや透過画像向き。
ただし、写真をPNGにすると非常に重くなります。
初心者はPNGを使いすぎる傾向があります。
WebPを使うと劇的に軽くなる
最近特におすすめなのが「WebP」です。
WebPはGoogleが開発した画像形式で、
・高画質
・軽量
・透過対応
という非常に優秀な形式。
JPEGより30〜50%軽くなることもあります。
特にLP制作ではかなり効果的。
Photoshop単体では扱いにくい場合もありますが、最近は対応も増えています。
Photoshopで軽量化する基本手順
最も基本的な方法は、
「Web用に保存」
を使うこと。
手順：
ファイル
↓
書き出し
↓
Web用に保存
を選択。
ここで、
・JPEG品質
・画像サイズ
・容量
を調整できます。
特に重要なのはJPEG品質。
おすすめは：
・60〜80
程度。
100品質は重すぎることが多いです。
実際、80前後でもほとんど見た目は変わりません。
「書き出し形式」を使う方法
最近のPhotoshopでは、
「書き出し形式」
も便利です。
こちらは、
・複数サイズ
・Retina対応
・PNG/JPEG切り替え
が簡単。
特にWeb制作ではかなり使いやすいです。
手順：
ファイル
↓
書き出し
↓
書き出し形式
を選択。
ここで画像サイズも調整できます。
不要レイヤーを削除する
PSDファイル自体が重い場合。
不要レイヤーを削除するだけでもかなり軽くなります。
例えば、
・非表示レイヤー
・古い修正案
・使わないスマートオブジェクト
など。
特にLP制作では、修正履歴が大量に残っていることがあります。
定期的に整理すると、Photoshop自体も軽くなります。
スマートオブジェクトを使いすぎない
スマートオブジェクトは便利ですが、使いすぎると重くなります。
特に、
・高解像度画像
・大量配置
・複雑なエフェクト
を組み合わせるとかなり重い。
完成後は、必要に応じてラスタライズするのも有効です。
LP制作でおすすめの容量目安
LP制作では、画像容量管理が非常に重要です。
おすすめ目安：
・FV画像 → 300KB〜800KB
・通常画像 → 100KB〜300KB
・アイコン → 10KB〜50KB
できれば、LP全体で5MB以内を目指したいです。
特にスマホユーザーが多い場合は重要。
外部ツールを使うとさらに軽くなる
Photoshopだけでも軽量化できますが、さらにおすすめなのが外部圧縮ツール。
有名なのは：
・TinyPNG
・Squoosh
・ImageOptim
など。
特にTinyPNGはかなり有名。
JPEGやPNGをさらに軽くできます。
見た目ほぼ変わらず軽量化できるため、Web制作では定番です。
よくある失敗
初心者によくある失敗。
PNGを使いすぎ
→ 重くなる。
品質100で保存
→ 容量巨大。
サイズが大きすぎる
→ 無駄。
圧縮しすぎ
→ 画質劣化。
Retinaを意識しすぎる
→ 過剰容量。
まとめ
Photoshopで画像を軽量化する最大のポイントは、
「必要以上に大きくしない」
ことです。
特に重要なのは、
・画像サイズ最適化
・JPEG品質調整
・PNG使いすぎ防止
・WebP活用
・不要レイヤー整理
この5つ。
画像軽量化は、単なる容量削減ではありません。
・SEO改善
・表示速度改善
・CV改善
にも大きく関係します。
LP制作やWeb制作では、デザインだけでなく「軽さ」も重要な品質です。
ぜひ今回紹介した方法を試してみてください。
【テンプレートを使って簡単にデザインをしたい方はこちらをクリック▶︎Adobe Express】
関連記事
Adobe Fireflyの使い方完全ガイド｜初心者でも簡単にAI画像生成
Photoshopで写真をアニメ風に加工する方法｜初心者でもできる簡単テクニック
Photoshopで画像の被写体を切り抜く方法【初心者〜プロまで解説】
Photoshopでガラス割れエフェクトを作る方法【初心者向け】リアルなひび割れ加工を簡単解説
Photoshopで金属感を出す方法｜初心者でもできるリアルなメタル表現テクニック完全解説
ペイントツールのスタンダード【CLIP STUDIO PAINT PRO】