PhotoshopのWeb用に保存で好きなデータサイズに調整しながら保存する方法

adobe Photoshopを使って狙ったデータサイズに画像ファイルを保存する方法について解説します。

画像によってデータ容量が違うのに、決められたサイズ以下にデータ容量を抑えなければならないケースはデザインの現場でもよくあります。

このようなケースに、対応できて自分の好きな容量に調整しながらデータを保存する方法なので使い勝手がとても良いです。

ここで使う保存方法は「Web用に保存」という機能です。

Renton

この方法はイラストレーターにも搭載されていますが、より画像編集を行うであろうPhotoshopで解説しようと思います。

この方法を知っていればどのような画像でも柔軟に対応できると思います。

目次

Web用に保存とは

Web用に保存とは

Webに使用するために適したファイル形式やサイズでの保存を目的とした保存方法のこと

よく使用する「別名保存」でも一緒のファイル形式で保存することは出来ます。

Webで使用する画像は基本72dpiの解像度なので、印刷時に使う画像(300dpi以上が好ましい)よりもファイルサイズが抑えられます。

  • 「Web用に保存」の場合は大きいサイズを狙ったサイズまでデータ容量を下げた状態で保存することを目的としています。

より小さなサイズにしたい場合や、モニターでの確認、実際にwebに使用する画像に変換などのケースによく用いられます。

注意しなければならないが「Web用に保存」をした場合は300dpi以上ある印刷用の画像でも、強制的にweb用の72dpiに下げられてしまうため、印刷用には使えなくなります。

PhotoshopでのWeb用に保存のやり方

まずは、ファイルサイズが比較的大きい画像を用意しました。

現状19.3MBあるデータサイズをここでは500KB以下にしてみます。先ほどの画像をフォトショップで開きます。

  1. メニューバー
  2. ファイル
  3. 書き出し
  4. Web用に保存を選択します
ショートカットキー

ショートカットキー → Command + Option + Shift + S

すると、画像にあるようなパネルが表示されます。このパネルの左下に保存後の目安のファイルサイズが表示されています。

現状だと18MB近いので、もっと下げていきます。

調整する場所としては、まず、画像のサイズを下げます。

右下にあるパーセントを30%まで下げてみます。

  • このとき注意して欲しいのが、隣にある画像サイズの“W”と“H”がリンクされているのを確認してください。ここの縦横比のリンクを外すと、画像の比率が変わってしまいます。

30%まで下げると、先ほど確認したファイルサイズが下がっているのが確認できると思います。現状だと2.6MBまで下げれましたが、さらに下げます。

次に画質の調整をします。ここでは45%まで下げてみます。

するとファイルサイズが目標の500KB以下になりましたので、この状態で下の方にある“保存”を押します。

これで「Web用に保存」は完了です。見比べるとweb上ではそこまで差はわからないと思います。ですが圧倒的にファイルサイズは小さく抑えられています。

PhotoshopのWeb用に保存で好きなデータサイズに調整しながら保存する方法まとめ

保存後のファイルサイズを見ながら、サイズや画質を調整できるので、狙ったファイルサイズにすることが容易にできるので覚えておいて損はありません。

この方法はJPEGだけでなく、PNGやGIFへの保存も可能ですので、用途に合わせて変えていってみてください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる