写真をWEBサイトにアップする際に画像サイズや縦横比を変えたい場合があります。
(サイトそれぞれ規格と容量が決まっていますのでSNSなども同様です。)
もしPhotoshopがあるのに画像の圧縮を他のソフトやサイトでやっているようなら要注意です。
画像のボケやノイズが必要以上に増えてしまい、せっかく綺麗な写真が台無しになります。
以外と気にせずやってしまいがちなこの作業についてご説明しますので是非試してみてください。
比較用にこの2点をご用意ください。
PSDデータがある場合は尚良いですが、解像度の良い状態の元データがあれば十分ですので大丈夫です。
今回はこちらのデータで進めていきますが、レタッチはしないのでどのデータでも大丈夫です。
Photoshopで圧縮したいデータを開いたら次に【ファイル】>【書き出し】>【書き出し形式】をクリックします。
するとこのような画面になります。
それぞれ写真データの容量(4.9MB)、サイズ(幅4256pixel×高さ2832pixel)になってます。
(1MB=1024KB)
この状態だと容量が大きいのでWEBにアップするとかなりページが重くなったり、
サーバーの制限でアップできないことがあります。
※自動で圧縮してくれるサイトもありますがその場合かなり画質が荒くなりますので
予め圧縮しておくのがおすすめです。
まず画像サイズの縦・横の数値が大きすぎるので今回は縦横比は変えずに幅を800pixelに設定します。
すると高さは自動で調節されます。(この写真は縦横比を維持するために自動で798×533になりました)
次に容量をなるべく小さくしたいので画質を40%に設定します。
すると容量は63KBになりました。
これで書き出しをすれば完了です。
用意していただいた以前の圧縮データと、今回圧縮したものどちらがキレイでしょうか。
例えば解像度828pixel×1792pixelのiPhoneで表示する場合、これ以上の高さと幅のあるデータを表示させても、
解像度がよくなるわけではありませんのでぴったりサイズが一番です。(表示させたいサイズ)
今回画像サイズを小さくしたあとに、画質を調整しましたが、
サイズを変えずに画質を落とした場合は画質を例え1にしたとしても10倍以上の容量にしかなりません。
同じ容量、サイズで比較しましょう。
左がPhotoshop、右がWEB上で圧縮してくれるサイトを使用したものです。
特徴としWEB圧縮の方はノイズをごまかすためにぼかしていますので当然ボヤっとした写真になります。
一方Photoshopの方は少しカラーノイズは気になりますが60KBのサイズで髪の毛までくっきり表現されています。
もしあなたのWEBサイトがボヤっとしていたら、圧縮方法に問題があるかもしれませんね。
いかがでしたでしょうか。
写真の容量は大きい方がもちろんキレイですが、WEBサイトなどの場合、ページの重さの原因になり、
SEOにもかなり悪影響を及ぼします。(特にGoogle)
是非参考にしてみてくださいね!