画像の最適化でサイトを高速化する

あなたのサイトでは画像の最適化は行っていますか？画像の最適化をおこなうとサイトの表示速度が大きく改善される場合があります。「どうもサイトが重いな...」と思われる方はぜひ本記事をお読みくださいませ。

はじめに

いきなりですが、少しややこしい話をします。この話を理解できていないと、画像の最適化を何の手段で達成しているのか？を見失ってしまうため、このタイミングで説明をします。画像の最適化には当然ですが、画像を縮小して適切な解像度・ファイルサイズにする必要があります。ここでの縮小という言葉には主に三つの手段を含んでしまっています。

画像の解像度を小さくして画像サイズを削減する例) 1920x1080 → 1280×720
画像のクオリティ調整による圧縮やメタ情報の削除などで画像サイズを削減する例) EXIF情報の削除
画像のフォーマットを変更して画像サイズを削減する例) PNG → WebP

つまり「画像を縮小してファイルサイズを削減しよう」という言葉は、簡単に置き換えると、

画像の解像度を小さくしよう
画像のクオリティ調整（メタ情報の削除）をしよう
画像フォーマットを変更しよう

という多義語になります。

ここで伝えたいことはこれらの違いをまずは理解することです。どれをやった方がいいか？という質問に対しては、もちろん理想を言うなればすべて同時に対応したほうがいいです。適切なフォーマット、適切な圧縮率、最適な解像度のすべてが満たされれば最高であることに変わりはないです。

ただ自分がいまやろうとしている作業はどの項目にあたるのだろうという意識を持つことが大切です。さもなければ「ファイルサイズは減ったけれど、予定していなかった解像度が小さくなってしまった、なんでだろう？」という問題が起きたときに解決することができないです。

そして本記事のトピックで取り扱うのは、1と2です。3.画像のフォーマットを変更して画像サイズを削減する については、画像フォーマットをWebPに変換するという記事を公開しているのでそちらを参考にしてください。

1. 画像の解像度を小さくして画像サイズを削減する

解像度とは？

そもそも解像度とは何でしょうか。ここでは印刷物などを考えずにディスプレイに表示される解像度、つまり画面に表示されるピクセルの総数のことを解像度ということにします。一般的な解像度とピクセルの組み合わせには名称がついています。例えば 4K は聞いたことがあるでしょう。4K とは 3840×2160のピクセルで構成される画像（動画）であるということができます。

名称	ピクセル
QVGA	320×240
VGA	640×480
HD	1280×720
FullHD	1920×1080
WQHD	2560×1440
4K	3840×2160
8K	7680×4320

2022年において最も主流の端末のディスプレイ解像度は1920×1080 になっています。この解像度のなかにWebページではディスプレイに画像や動画が並べられていくというわけです。

適切な解像度とは

まず解像度の最もつらい点は、主流のパソコンやスマートフォンによって、解像度の主流が変わってしまうということです。そのため最適な解を提案しにくいのですが、一つの指針として以下のサイトより現在の世の中のディスプレイ事情を確認するとよいでしょう。

解像度のシェア	https://gs.statcounter.com/screen-resolution-stats
端末別の解像度	https://yesviz.com/viewport/
解像度別の端末	https://devhints.io/resolutions

世の中の解像度について

世界の解像度事情を把握したうえで、どの解像度を対象にサイトを構築するのか？を考えて上手に解像度を選ぶ必要があるということです。

一方で昨今はレスポンシブデザインが主流となっているため、さらに事情は複雑です。事情は複雑ですがシンプルに考えれば、以下の二種類のいずれかになるでしょう。

一枚の画像をHTMLやCSSで拡大縮小して表示を行う
複数枚の画像を用意して端末サイズに合わせて画像の出し分けをおこなう

一枚の画像を拡大縮小するメリットはシンプルで画像を一枚だけ用意すればよいということです。実装は非常に簡単です。一枚の画像をパソコンでもモバイルでも利用します。多くの場合はパソコン版の解像度に合わせるでしょうから、モバイルでは無駄にきれい大きく表示される場合があるでしょう。

一方で、複数枚の画像を用意すると、実装難易度は若干あがります。しかし例えばパソコンでは解像度が高い（ファイルサイズの大きい）画像を、モバイルでは解像度が低い（ファイルサイズが小さい）画像と表示を変えられることができます。端末によって画像そのものを変えたい場合もあるでしょうし、モバイル用に最適化された画像はファイルサイズが小さいため、通信速度が遅い状態でも取得しやすく、結果としてページの表示速度を改善させることができます。

レスポンシブデザインの記事ではないので、この話はここまでにしておきますが、適切な解像度というのは環境によって変わるということを理解してもらえたのではないでしょうか。

解像度の確認方法

Webサイトの画像の解像度を確認する方法ですが、Website Speed Test by Cloudinary を利用する方法がよいでしょう。

このサイトを確認すれば各画像の現在の解像度と適切な解像度を同時に教えてくれます。またフォーマットを変更したときに縮小される圧縮率も同時に掲載されます。これらを活用して画像に合った最適な解像度を探すとよいでしょう。

解像度の変更: Cloudinaryをおすすめ

解像度の変更はあらゆるツールで対応することができます。デスクトップアプリケーションからスマホアプリまであらゆる方法で解像度の変更は行うことができます。なので基本的にはお好きなものを選んでもらえればいいです。一番シンプルなのは標準のペイントアプリでしょうか。

ただそれだと面白くないため、今回は画像を総合管理できるCloudinaryを紹介します。Cloudinary は画像と動画に関することは、当然解像度の変更はもちろん、解像度以外のほぼすべてのタスクに対応できます。前段で紹介した画像のクオリティ調整による圧縮やメタ情報の削除、画像のフォーマットを変更することも当然できてしまいます。

やり方は簡単でGoogle Storage や DropBoxのように画像をクラウド上に保存して、編集ボタンを押すだけです。編集ボタンをクリックすると以下のように編集画面に遷移するため、ここで幅と高さを変更すればOKです。

注意: Cloudinaryは本気で利用しようとすれば有料のサービスです。多人数や法人で利用される場合は以下のプランにしたがってください。
https://cloudinary.com/pricing

おまけですが、Cloudinaryの便利な点は、URLで解像度を変更できることです。例えばこのような画像（468x313)のURLがあったとします。

https://res.cloudinary.com/dnnxvnahu/image/upload/v1663216133/cld-sample-5.jpg

このURLに追加で高さを与えます。ここでは h_153 というパスをURLの中間に追加（太字）しています。幅は高さに合わせるようにしました。すると同様の画像（229x153）の画像を取得できます！

https://res.cloudinary.com/dnnxvnahu/image/upload/c_scale,h_153/v1663216133/cld-sample-5.jpg

わかるでしょうか、URLを変更するだけで解像度を変えることができるのです。これを使えば前述したレスポンシブデザインへの対応も少しは楽できそう...と思ってもらえれば幸いです。

2. 画像のクオリティ調整による圧縮やメタ情報の削除などで画像サイズを削減する

概要

解像度を変更せず、かつ画像フォーマットも変更せずに画像サイズを落とす方法があります。この章ではそれらの方法を紹介します。なんだか魔法のようですが、現代における画像フォーマットは圧縮率を調整することができたり、メタデータが含まれたりします。これらを最適化して画質をなるべく落とさないようにファイルサイズを削減できます。

さて解像度の最適化の定番ツールは以下のサイトになります。これらのツールはなるべく画像の画質を落とさないまま、画像のファイルサイズを小さくすることに長けています。もちろんCloudinaryでもかまいません。ただ数枚の画像を最適化したいだけであれば、これらのサービスを利用するほうが楽でしょう。