【Photoshopの使い方】正しい画像圧縮講座

記事
ビジネス・マーケティング
写真をWEBサイトにアップする際に画像サイズや縦横比を変えたい場合があります。
(サイトそれぞれ規格と容量が決まっていますのでSNSなども同様です。)

もしPhotoshopがあるのに画像の圧縮を他のソフトやサイトでやっているようなら要注意です。
画像のボケやノイズが必要以上に増えてしまい、せっかく綺麗な写真が台無しになります。
以外と気にせずやってしまいがちなこの作業についてご説明しますので是非試してみてください。

準備 従来のやり方で圧縮したデータと圧縮前データを用意する

比較用にこの2点をご用意ください。
PSDデータがある場合は尚良いですが、解像度の良い状態の元データがあれば十分ですので大丈夫です。
今回はこちらのデータで進めていきますが、レタッチはしないのでどのデータでも大丈夫です。
画像圧縮1.jpg

ステップ1 圧縮前のデータをPhotoshopで開きます。

Photoshopで圧縮したいデータを開いたら次に【ファイル】>【書き出し】>【書き出し形式】をクリックします。
するとこのような画面になります。
画像圧縮2.jpg
それぞれ写真データの容量(4.9MB)、サイズ(幅4256pixel×高さ2832pixel)になってます。
(1MB=1024KB)
この状態だと容量が大きいのでWEBにアップするとかなりページが重くなったり、
サーバーの制限でアップできないことがあります。
※自動で圧縮してくれるサイトもありますがその場合かなり画質が荒くなりますので
予め圧縮しておくのがおすすめです。

ステップ2 容量制限以下、適切なサイズに圧縮

まず画像サイズの縦・横の数値が大きすぎるので今回は縦横比は変えずに幅を800pixelに設定します。
すると高さは自動で調節されます。(この写真は縦横比を維持するために自動で798×533になりました)
画像圧縮3.jpg
次に容量をなるべく小さくしたいので画質を40%に設定します。
すると容量は63KBになりました。
これで書き出しをすれば完了です。
用意していただいた以前の圧縮データと、今回圧縮したものどちらがキレイでしょうか。

最後に

例えば解像度828pixel×1792pixelのiPhoneで表示する場合、これ以上の高さと幅のあるデータを表示させても、
解像度がよくなるわけではありませんのでぴったりサイズが一番です。(表示させたいサイズ)
今回画像サイズを小さくしたあとに、画質を調整しましたが、
サイズを変えずに画質を落とした場合は画質を例え1にしたとしても10倍以上の容量にしかなりません。

同じ容量、サイズで比較しましょう。
左がPhotoshop、右がWEB上で圧縮してくれるサイトを使用したものです。
画像圧縮5.jpg
特徴としWEB圧縮の方はノイズをごまかすためにぼかしていますので当然ボヤっとした写真になります。
一方Photoshopの方は少しカラーノイズは気になりますが60KBのサイズで髪の毛までくっきり表現されています。
もしあなたのWEBサイトがボヤっとしていたら、圧縮方法に問題があるかもしれませんね。
いかがでしたでしょうか。
写真の容量は大きい方がもちろんキレイですが、WEBサイトなどの場合、ページの重さの原因になり、
SEOにもかなり悪影響を及ぼします。(特にGoogle)
是非参考にしてみてくださいね!
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す