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

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

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

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

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

Sponsored Link

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

Photoshop compression2

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

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

Photoshop compression3

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

Photoshop compression4

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

Photoshop compression5

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

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

Photoshop compression6

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

2. 画質を調整してWeb用に保存

Photoshop compression7

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

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

Photoshop compression8

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

Photoshop compression9

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

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

3. 画質の違いによるファイルサイズの比較

Photoshop compression10

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

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

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

Photoshop compression11

最後にそれぞれのファイルサイズの差を比べてみます。(左:低画質/中央:元画像/右:最高画質)

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

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

写真、画像、デザインエディター | Adobe Photoshop

関連:AIの力で画像をもっと鮮明に

今回は画像を小さくする方法を解説しましたが、こちらの記事ではAIの力を用いて、画像を”高画質”にする方法を解説しています。手持ちの古い画像をもっと鮮明に、なんてことも可能なのでぜひ合わせて。

AIの力で画像をもっと鮮明に。Photoshopの新機能「スーパー解像度」

\ SHAREしてね /
Sponsored Link

by
関連記事