Web用画像で一番勘違いされている「解像度」と「ピクセル」の話

これ、制作現場でもかなりよくあるんですが、「画像は解像度を下げれば軽くなる」と思っている人、結構多いんですよね。でも実際には、Webにおいて一番重要なのって解像度じゃなくてピクセル数なんです。ここをちゃんと分けて理解しておかないと、無駄に重いサイトになったり、逆に画質が崩れたりする原因になります。まず前提として、「解像度」という言葉は2つの意味で使われています。一つは印刷用のdpi、もう一つは画面表示のピクセル数です。この2つがごちゃ混ぜになっているのが、混乱の原因です。印刷の場合は、300dpiとか350dpiみたいな数値が重要になります。これは紙にどれだけ細かくドットを詰めるかという話なので、当然高い方が綺麗に印刷されます。ただ、Webではこれがほぼ関係ありません。ブラウザが見ているのはdpiではなくて、「横何ピクセル、縦何ピクセルか」だけなんですよね。つまり極端な話、300dpiでも72dpiでも、ピクセル数が同じなら見た目は変わらないということです。ここがまず一番重要なポイントです。じゃあ何が問題になるかというと、スマホや一眼で撮った写真をそのまま使うケースです。最近のスマホや一眼って普通に4000pxとか6000pxとかあるじゃないですか。このサイズのままアップすると、当然ファイルサイズがめちゃくちゃ大きくなります。しかもブラウザはそれをそのまま表示するわけじゃなくて、例えば表示領域が800pxしかなければ、内部的に縮小して表示します。つまり、「見た目は小さいのに、中身は巨大な画像」を読み込んでいる状態になるんです。これがページ表示速度を一気に落とします。実際、高画質のまま画像を使うと表示速度が低下して離脱の原因になると指摘されています。ここでよくある失敗が、「とりあえず高画質のまま入れておこう」という判断です。確かに画質は綺麗に見えるかもしれないんですが、ユーザーからすると、読み込みが遅い方が圧倒的にストレスになります。しかも今ってほとんどスマホ閲覧なので、なおさらです。だから基本的な考え方としては、「表示サイズに合わせてピクセル数を決める」が正解になります。例えば記事の本文幅が800pxなら、画像も800〜1200pxくらいにしておけば十分です。これ以上大きくしても、ほぼ意味はありません。

スマホ・一眼の高画質を「そのまま使うと逆効果」になる理由

ここからがもう一歩踏み込んだ話なんですが、最近はカメラ性能が上がりすぎて、逆にWebでは扱いづらくなっています。スマホでも普通に高画素で撮れるし、一眼だとさらにデータが大きくなりますよね。これ自体は良いことなんですが、そのままWebに持ってくると、ほぼ確実にオーバースペックになります。例えば、メインビジュアルなら1200〜1920pxくらいが目安です。でも実際に撮影したデータはその倍以上あることがほとんどです。この差分が全部「無駄なデータ」として読み込まれることになります。しかも厄介なのが、最近のディスプレイは高精細なので、「多少大きくてもいいのでは」と思われがちな点です。確かにRetinaとか高解像度ディスプレイでは、ある程度大きめの画像の方が綺麗に見えるケースもあります。ただ、それでも限度があります。重要なのは、「必要な分だけ用意する」という考え方です。例えば横1200pxで表示するなら、2倍の2400pxくらいまでなら許容範囲ですが、それ以上はほぼ無意味です。それよりも重要なのがファイルサイズです。画像はピクセル数が増えるほどデータ量も増えます。そしてデータ量が増えると、読み込み時間が伸びます。この読み込み時間がSEOにも直結します。実際、画像サイズが大きすぎると表示速度が低下し、検索評価にも影響する可能性があるとされています。つまり、画像の最適化って単なる軽量化じゃなくて、SEOにも関係してくる話なんですよね。ここでさらに重要なのが、「ユーザーはそこまで画質を見ていない」という点です。もちろん極端に荒い画像はダメですが、ある程度のサイズを超えると、体感差はほとんどありません。むしろ、表示が遅いスクロールがカクつく読み込みが止まるこういった体験の方が、はるかに印象を悪くします。だから制作側の判断としては、「最高画質」ではなく「最適画質」を狙う必要があります。この違いはかなり重要です。最高画質というのは、単純にデータを削らない状態です。でも最適画質というのは、「見た目を維持しながら無駄を削る」ことです。ここができているかどうかで、サイトのパフォーマンスはかなり変わります。あともう一つ現場でよくあるのが、「とりあえずJPEGで保存している」というケースです。もちろん写真ならJPEGで問題ないんですが、最近はWebPみたいな軽量フォーマットもあるので、ここも含めて最適化していく必要があります。ただ一番重要なのは、フォーマットよりも前に「サイズ設計」です。サイズが間違っている状態でフォーマットだけ変えても、効果は限定的です。結局のところ、Web用画像で考えるべき順番はこうなります。まず表示サイズを決める次にピクセル数を合わせるその上で圧縮やフォーマットを選ぶこの順番が逆になると、ほぼ確実に無駄が発生します。特に最近はAIで画像を生成したり、スマホで気軽に撮影したりできる分、「そのまま使う」という流れが増えています。でも実務としては、そのまま使うのが一番非効率なんですよね。ちゃんとリサイズして、適切に圧縮して、用途に合わせて使い分ける。これをやるだけで、表示速度も、SEOも、ユーザー体験も全部変わってきます。 Web用画像って「綺麗に見せる」ことよりも、「どう最適化するか」の方が重要なんです。そしてこの最適化って、見た目では気づかれにくいんですが、サイト全体のパフォーマンスにはかなり大きく影響します。だからこそ、画像は最後に調整するものじゃなくて、最初から設計するものとして考えた方がいいです。
Web用画像の適正な解像度・ピクセル数スマホ・一眼レフの写真をホームページ用に最適化する方法

ホームページ制作（Web制作）の日常

ホームページ制作（Web制作）の日常。制作業務からコンサルまで。ホームページ制作(Web制作)、ホームページ作成ホームページ制作会社、Webマーケティング会社 SEO会社ホームページ作成会社京都ホームページ制作(Web制作)ホームページ制作京都ホームページ新規制作、WordPressサイト制作、SEO、Webマーケティング、Webコンサルティング、SEO対策・ホームページ修正（サイト修正）