WEB画像の最適な解像度・画素・サイズを徹底解説！

今回はWEBで使用する画像の最適な解像度・画素・サイズについて解説をしていきたいと思います。

WEBデザインをしている方にとっては、WEB画像の解像度などは非常に簡単な話なのかもしれませんが、これからWEB用の画像を作成しよう！と思っている方にとっては非常に悩む所ですよね。

単位もピクセルやらdpiやらppiやら、他にもたくさん。。。しかもしれぞれ混同して使われる事もあるので、全然よく分からない状態になります。

本記事でWEB画像の解像度・画素・サイズについて理解を深めて、WEB画像を作成する際の参考にして下さい。

リーベル

WEB画像を作成する際、解像度は最初に決めておかなければならない大事な設定値です。
最適な解像度の考え方をしっかりと押さえておきましょう。

WEB画像の解像度

まずは解像度から解説します！

画像に使われる解像度にはdpiとppiがあります。※この他にlpiもありますが、一般的にあまり使用しないので、ここではあまり気にしなくて大丈夫です。

いずれも同じ様な意味で扱われる事が多いのですが、それぞれにちゃんと意味があります。

dpiとは？

dpiというのは「dots per inch」の略で、1インチの中に含まれるドットの数を表します。

数値が大きいほど、高解像度になり、綺麗で鮮やかな画像になります。

ppiとは？

ppiは「pixels per inch」の略で、1インチの中に含まれるピクセルの数を表します。

dpiと同じ様に、数値が大きいほど高解像度になります。

dpiとppiの違い

ではdpiとppiの違いって一体何なんでしょう？

結論から言うと、どちらもほぼ同じような意味で扱われます。

ただ、本来dpiというのはプリンターの印刷物を代表とした入出力機器で扱う言葉になります。たしかにdot（ドット）というのは、画像よりも紙などの印刷物でよく使われますよね。

逆にppiは文字通り、1インチの中のピクセル（画素）なので、WEB画像などのデジタルデータでよく使われる言葉になります。なので、WEB画像の場合はppiを使う方がマッチしています。例えばWEB画像を作るためによく使われるphotoshopなどでも、デジタルデータの場合、ppiという名前で解像度を表現しています。

ところが、WEB画像の解像度はdpiで語られる事が多いのです。。。これはデザイナーの方にとってはdpiの方が馴染みがあり、ppiよりもdpiという言葉をよく使用するので、それが広まったと言われています。いずれにしても同じようなものと思っておいてOKです。

WEB画像の推奨解像度

かつてはWEB用画像の推奨解像度は72dpi～96dpiと言われていました。今でもWEB用の画像作成ソフトウェア等を使用するとデフォルトで解像度が72dpiというのはよくある事です。

しかし、今やPCの画素数の向上とRetina等の高精細液晶ディスプレイの登場でその考え方は大きく変わりました。特にRetina等の高密度ディスプレイは、PCのディスプレイの約2倍の密度で画素が表示される仕組みになってます。

PCの画素数が向上しても、今まで綺麗に見えていた画像なんだからそのまま使えばいいや。というのは通用しないケースも出てきたのです。

解像度だけではなく画素とサイズ（大きさ）で考える

WEB画像を作る時は解像度だけではなく、画素数とサイズも考慮する必要があります。

特に大事なのはサイズの方で、HTMLでも画像を表示する際はサイズを指定しますよね。

ではどの位のサイズにするのがベターなのでしょうか。

WEB画像の画素・サイズ（大きさ）

WEB画像の最適なサイズについて解説をしていきます。

画素とサイズは一緒に考えた方が良いです。

画素

画素数は横軸×縦軸で計算されます。

ディスプレイやカメラやプロジェクターには786,432画素などと記載されています。これは、1024×768=786,432画素を表わしていて、786,432画素を表現できる画面を搭載しているという事になります。仮に、ディスプレイの画素数が1024×768であった場合、このディスプレイに最適な画像は横軸1024画素、縦軸768画素と言えます。

ただ、WEB画像の場合、横軸は基本的に固定、縦軸は基本的に可変となるので、横軸の事だけを考えればOKです。

Retina等の高密度ディスプレイの場合は文中でもお話した通り、2倍の密度で表示されますので、さらに倍の数字の画像を用意する事が必要になります。

ちょっとややこしくなってきましたよね。でも大丈夫。実はWEB画像の場合は画素の事はあまり深く考える必要はありません。その理由はこの後説明しますので画素については一旦知識として覚えておいて下さい。

サイズ（大きさ）

WEB画像をサイト中に表示指定する場合は基本的にこのサイズのみを指定する事になります。つまり、WEB画像を作る上で一番大切な考え方とも言えます。サイトのどの部分に、どの位のサイズで表示したいかを考慮する事が重要なのです。

例えばサイト全体の幅が960pxで、ヘッダー画素を作りたいと思った場合、900pxくらいの画像を作成して、width=900のサイズで画像を配置する。という風に考えればokです。

このwidthが横幅（サイズ）になります。縦幅は自由に変えてokです。

ただ、何度も繰り返しになりますが、高解像度ディスプレイの場合は、解像度を2倍にしなければならない等、ここからさらに計算をしなければなりません。

ですから、ある程度のサイズが決まったら、テストを繰り返しながら最適なサイズを決めるのが良いのではないかと思います。事実、私の周りでWEB用の画像を作成している人は、結局はテストを繰り返して目で判断しているからです。

【結論】テストして決めるのが良い！

解像度・画素・サイズについて色々とお伝えしてきましたが、最近はディスプレイ性能がどんどん向上していたり、サイトのツールがある程度自動的に最適なサイズなどを表示してくれたりで、自分で計算をするのが非効率になりがちです。

そういう場合は、とりあえず画像をWEBにUPして見た目を確認してみるのが良いと思います。

テストをしながら決める場合も注意しなければならない事もあります。

サイズを変更するのは非常に簡単ですが、画像そのものの解像度を変更するのは結構大変です。もう一度画像を作り直さなければならない事もあります。ですから、解像度を決めたら画像を作り込む前に一度WEB上にUPをしてみて、PC・スマホ（可能であればタブレットも）で、どの様に表示されるかを確認するのがベターです。

イラストや加工写真の画像をUPする場合は、作業途中のファイルを随時UPしながら、完成イメージとずれていないかを確認しながらWEB画像を作っていくくらいの気持ちの方が良いと思います。

最近は画像作成・加工ソフトでも途中で解像度を調度良く変更してくれる機能もありますので、その様な機能を使いながら、柔軟に解像度を変更していくと良いのでないでしょうか。

その他に覚えておきたい事

解像度をいちいち考えるのが面倒！という場合に、少し変わった画像形式についてもご紹介しておきます。

SVG

どんどん高画質の画面が搭載されたデバイスが増えると、またいつか画像の作り直しをしなければなりません。それを考えるとSVG形式で画像を作成しておくのも一つの手です。

SVG型式は、Illustratorなどのソフトで作成されたベクター情報を保存した画像フォーマットになります。

拡大縮小を行っても画像が荒くならないのが1番の利点といえます。今は注目度が低い印象がありますが、もしかしたら今後スタンダードな形式になるかもしれません。

Illustratorなどのベクター線を使いこなせるのであれば、ぜひ検討して下さい。

まとめ

今回は、WEB画像の解像度・画素・サイズについてお伝えしました。

文中でもお伝えした通り、一番大切なのは実はサイズです。

そして、理屈だけではイメージできない部分もたくさんあるので、実際にテストしてどの様に表示されるかテストを繰り返すのが一番ベターです。

やっぱり実際に目で見ながら画像を最適化していくのが一番良いです。

ちなみに、WEB画像に限らず、WEBデザイン全般の知識をしっかりと身に付けたい！とかプロのWEBデザイナーになりたい！という場合はスクールでWEBデザインの基礎を身に付けるのも良いと思います。スクールについては以下の記事にまとめています。

WEBサイト作成・デザインをしていると、ユーザのデバイスの進化に伴って、覚える事がたくさん出てくると思います。でも、制作過程はすごくやりがいがありますので、がんばりましょう！