photoshop

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

photoshop

こんにちは!レントンです!

今回はフォトショップを使って狙ったデータサイズに画像ファイルを保存する方法について解説します!画像によってデータ容量が違うのに、決められたサイズ以下にデータ容量を抑えなければならないケースはデザインの現場でもよくあります。

このようなケースに、対応でき、自分の好きな容量に調整しながらデータを保存する方法を今回はフォトショップを使ってご紹介します。

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

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

この方法を知っていれば、「至急、メールに添付できるサイズで送ってください!」などの早急なクライアントの要望などにも応えることが出来ます。

スポンサーリンク

Web用に保存とは

その名の通り、webに使用するために適したファイル形式やサイズでの保存を目的とした保存方法です。よく使用する「別名保存」でも一緒のファイル形式で保存することは出来ます。

Webで使用する画像は基本72dpiの解像度なので、印刷時に使う画像(300dpi以上が好ましい)よりもファイルサイズが小さくなるというのが一般的です。

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

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

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

Web用に保存のやり方

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

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

メニューバー→ファイル→書き出し→Web用に保存を選択します。

ショートカットキーはCommnd + Option + Shift + Sですのでなるべく覚えてしまってください。

スポンサーリンク

すると、画像にあるようなパネルが表示されます。このパネルの左下に保存後の目安のファイルサイズが表示されています。現状だと18MB近いので、もっと下げていきます。

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

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

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

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

スポンサーリンク

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

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

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

まとめ

いかがでしたか?このように、保存後のファイルサイズを見ながら、サイズや画質を調整できるので、狙ったファイルサイズにすることが容易にできると思います。

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