Webページをもっと軽く。Photoshopで画像を圧縮しましょう

このharekarakeはもちろん、外部の媒体で記事を掲載する際も、僕は「画像の圧縮・リサイズ」を行っている。

当然なのだけど「ページを見る」というのはサーバーに置かれた情報をデバイスにダウンロードしているわけだから、ページの要素が軽ければ軽いほどサクサク閲覧できるわけ。

逆に言うならば、ページが重いと読み込みも遅くなって離脱する可能性が高まるし、何よりデータ通信の通信量もくってしまうわけで良いことはない。

特にWebページの中でとりわけ重いのが「画像ファイル」で、ページを軽くするにはこの画像ファイルのサイズを小さくするのが重要。Photoshopを使えば、簡単に画像の圧縮やサイズ変更ができるので、今回は一緒にやってみよう。

CONTENTS 目次

1. 現在の画像サイズの確認と変更

Photoshop compression2

今回はこの画像をリサイズ・圧縮してみる。

まずはPhotoshopのメニューバーにある［ファイル］-［画像解像度］から現在の画像サイズを確認・変更してみよう。画像解像度の画面が開いた。

Photoshop compression3

この画像が6000pixel×4000pixelであることが分かったのだけど、これはカメラで撮影した元画像そのままのサイズ。一般的なWebサイトであれば、長辺が1000-1500pixelほどあれば十分なので、このままでは大きすぎる画像と言えるね。

Photoshop compression4

まずは画像サイズを5分の1サイズである1200pixel×800pixelに変更する。

Photoshop compression5

幅と高さを指定する部分の左にあるこのマークが選択されていれば、縦横比が固定されている状態。

そのため、幅・高さのうちどちらかの数字を入力すれば、もう片方の数字は自動的に算出されるようになっている。

Photoshop compression6

画像サイズが変更された。

Photoshop compression7

先ほど画像のサイズを変更したので、次に画質を調整しながら保存する。

Photoshopのメニューバー［ファイル］-［書き出し］-［Web用に保存（従来）］を選んでください。このような画面が開く。

Photoshop compression8

保存形式と画質の選択は赤枠の部分で行ってください。

Photoshop compression9

画質は「低画質・中画質・やや高画質・高画質・最高画質」の中から選択可能。

保存を押すと、保存先とファイル名称の変更ができるので、任意のファイル名と保存先を指定しよう。

Photoshop compression10

画質は使用予定の用途に合わせて決めるのだけど、インターネットで活用するのであれば基本的には中画質〜やや高画質を選択する方が多いと思う。

この例では分かりやすく、低画質と最高画質で画像を保存してみた。

この画面でははっきりと分かりにくいかもしれないのだけど、並べてみると低画質の方が少しもやっとした印象になっている。

Photoshop compression11

最後にそれぞれのファイルサイズの差を比べてみる。（左：低画質/中央：元画像/右：最高画質）

元画像に比べてサイズを5分の1にした最高画質と低画像ではサイズに大きな違いがあることが分かるだろう。

Photoshopを使った画像圧縮はとても簡単だということがお伝えできたと思う。自分の求めている画像サイズ・画質通りに画像を圧縮させよう。