「適切なサイズの画像」とは？改善方法も解説【PageSpeed Insights】

　

Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「適切なサイズの画像」とはどういう意味か、また診断結果を改善する方法についても解説します。

　

「適切なサイズの画像」とは？

パソコンだけでなくスマートフォンやタブレットからWEBサイトを閲覧する機会が増えましたが、適切なサイズの画像を使わないとぼやけたり乱れてしまいます。大きな画像を小さくするのはいいのですが、もともと小さな画像を拡大すると粗くなってしまいます。どんなツールを使って閲覧するのかを考え、必要なサイズを考えて準備していくことになります。近年は幅広のWEBサイトも増えているので、細かく調整をしながらベストなサイズを探りましょう。

「適切なサイズの画像」の改善方法

画像サイズは高解像度で大きいほど美しく目を引く画像ですが、そのままWEBサイトに使おうとすると画像のファイルサイズが大きいため、表示するまでに時間が必要になって閲覧者側にストレスをかけてしまいます。ファイルサイズはメガバイト（MB）だと重すぎるので、キロバイト（KB）になるように調整しましょう。大きくても約１００～１２５KBにしておくと閲覧しやすいです。画像の寸法はピクセル表示となりますが、ホームページやブログでの大きさは横約６００～８００ピクセル、縦約３００～４００ピクセル程度が一般的です。

作成側の好みもありますが、小さすぎず大きすぎずでこのぐらいのピクセルサイズで準備されています。解像度は印刷する画像だと３００ｄｐｉは欲しいのですが、WEBサイトに使う分には７２ｄｐｉもあれば十分です。解像度が下がればファイルサイズも小さくなりますので、サイズ調整をするときには解像度も高すぎないかどうか見ておくようにしましょう。

実際に画像サイズを適切に改善していくためには、自分で画像を加工できるソフトやアプリを用意します。無料でも有料でも使いやすいものであれば何を使っても構いません。最低限必要な機能として、画像の縮小・拡大、画像の切り取り（トリミング）、モザイクやぼかしなどのフィルタ加工、枠線作成などの機能があると、ＷＥＢサイト用の画像作成がスムーズに行えます。

画像の加工をした後は適切なサイズで保存が出来るように保存形式についても必ず見ておきましょう。写真系統の画像であればＪＰＧ形式で保存をし、イラストなどの保存をするときにはＰＮＧ形式にしておくと、保存時の劣化も少なく綺麗にファイルの保存をすることが出来ます。

たかが画像と思って用意したものをそのままＷＥＢサイトに組み込みがちですが、閲覧者が快適に閲覧することができているのかということを、第三者の視点で見直すようにしましょう。小さすぎても細部が見えなくなってしまうので、他のＷＥＢサイトも参考にしながら画像を加工して利用して下さい。

すでに運用しているサイト内の画像が適切かどうかは、「PageSpeed Insights」で確認できます。調べたいURLを入力して「分析」をクリックすることで、「適切なサイズの画像」についてチェックできますから、利用してみましょう。