Photoshopで画像容量を軽くしてWeb用に保存する方法

Photoshopで画像容量を軽くしてWeb用に保存する方法

Webサイトに掲載する画像の容量はサイトの表示速度をなるべく早くするため軽い方がよいです。
スマホやカメラで撮った写真はかなり重いのでそのまま掲載するとサイトの表示速度が遅くなるためSEO的にもマイナスの影響があります。
なのでスマホやカメラで撮った写真(今回はjpg形式の画像)をWeb用に容量調整して書き出す方法をご紹介します。

Photoshopに画像を取り込む

「ファイル」→「開く」からjpg形式の画像があるフォルダを開き、容量を軽くしたいjpg画像を選択・クリックします。

Photoshopに画像を取り込むイメージ

画像解像度から幅と高さのサイズ調整

容量を軽くしたいjpg画像を開いたら、まず画像解像度の調整を行います。
「イメージ」→「画像解像度」をクリックします。
画像解像度画面が表示されるので、「幅」と「高さ」のサイズが大きい場合、数値を下げると画像容量(サイズ)も軽くなります。
鎖のマークがついてれば「幅」「高さ」どちらかの数値を変更すると相対的に両方の数値が変更されます。
Webサイトに掲載するのであれば大きくても2000px以下で良いと思います。
2000pxに変更し、画像解像度画面の「OK」ボタンをクリックします。

画像解像度から幅と高さのサイズ調整イメージ

Web用に保存、画質の調整

次にWeb用に保存を行います。
「ファイル」→「書き出し」→「Web用に保存」をクリックします。
Web用に保存画面が表示されるので、「画質」の数値を調整します。
画質の数値にある「100」は100%という意味で、この数値を「90」に変更するとjpg画像の画質を90%にするということになります。
画質を下げると画像がその分劣化することになるのですが、元画像にもよりますが元画像のサイズが大きいものであれば画質を90%位にしてもWebサイト上だとぱっと見ではわからないと思います。多分。
画質を変更したら「保存」ボタンをクリックします。

Web用に保存、画質の調整イメージ

画像容量(サイズ)調整前と後の画像比較

画像容量(サイズ)調整前と後の画像比較イメージ

画像容量サイズ調整前(左)、調整後(右)になります。

容量調整前のサイズ:565KB
容量調整後のサイズ:345KB

調整前(オリジナル)の画像サイズより39%程軽くなってます。

 

※流用される場合は自己責任でお願いします。