解像度
結論から先に言いましょう。web上の画像において解像度は意味がありません。
解像度というのは、画像を作っているドットの細かさを表します。 通常は単位にdpiを使います。 dot per inch の略で、文字どおり1インチ(2.54センチ)あたり何ドットになるかを示しています。この数字が大きい画像ほどドットが細かくなります。
パソコンで画像を扱う上で解像度を意識するときは、スキャナで絵などを取り込むときと、プリンタで印刷するときでしょう。取り込みたい絵が何ドットになるのか、画像データが紙の上でどれくらいの大きさになるか、考えないといけませんからね。
スキャナで絵などを取り込むことはデータの入力、プリンタで印刷することはデータの出力になります。 ディスプレイ上に表示することもデータの出力にあたります。
たとえば、200dpi、縦横200ドットの画像なら1インチ(2.54センチ)角の大きさで表示されるのが正しいことになります。
…これは200dpi、縦横200ドットの画像なのですが、2.54センチ角で表示されてますか。
されてないはずです。
残念ながらwebブラウザをはじめ、画像を表示するソフトウェアに画像の解像度を考慮して表示するものはほとんどありません。上の例の場合、「200dpiで200ドット(=1インチ)角の画像」ではなく「(単に)200ドット角の画像」として扱われます。つまり、ディスプレイ上では解像度が無視され、画像のドット数(ピクセルサイズ)どおりに表示されます。ということはWEB用に画像データを作る場合、ドット数だけを見てサイズを決めればいいわけです。それで最初に書いた結論になります。
これはフォトショップ(CS)とGIMP(2.2) の画像を拡大縮小する際のダイアログですが、どちらとも下の段の囲みは気にしなくてかまわないってことです。また、フォトショップの 環境設定>単位・定規 で、定規の設定をinchやcmでなくpixelにしておいた方がいいでしょう。
[余談]解像度情報の埋め込み
JPEGフォーマットの画像データには、解像度情報を持たせられます。一方、GIFには解像度情報を入れられないようです。
PNGで解像度が記録できるかどうかについても調べました。仕様書をながめてみたところ、どうも解像度を記録する部分はなさそうです。ただ、GIMP では PNG画像も解像度情報の記録・読み出しが可能です。仕様書によると PNGには「画像の物理サイズ(単位はメートル)」という情報が記録できるので、この情報とピクセルサイズから解像度を計算していると思われます。また、フォトショップも最近ではPNGの解像度情報の記録・読み出しに対応しています。
このほかにも画像にさまざまなデータが埋め込まれている場合があります。(著作権情報や、デジカメ写真なら撮影時の各種データなど)
表示される大きさ
img要素には width, height 属性があります。画像の横サイズと縦サイズの指定なのですが、これは指定しておいた方がよいとされています。
<img src="catgirl3.png" width="100" height="150" alt="ねこみみ3" />
なぜ指定するのかというと、こうしておくと表示が早くなるのです。width と height を指定しない場合は画像を読み込むまでサイズがわからず、ブラウザが表示を確定できません。特に理由がない限りwidth と height は指定しておく方がいいかもしれません。
また width, height 属性を使って元の画像のサイズと違う大きさでも表示できます。
<img src="catgirl3.png" width="200" height="300" alt="ねこみみ3" />
先の例と同じ画像ですが、こちらは縦横倍の大きさで表示されます。元の画像のサイズがどうであってもこの width と height の指定サイズで表示されてしまうので、指定のサイズを間違えないように気をつけましょう。
HTML内の指定でなく、CSSでの指定で表示サイズを変えることもできます。 では、上の例の200ドット角の画像を1インチ角で表示させてみましょう。
img要素の width, height 属性で指定できるのはドット数(ピクセルサイズ)なので、1インチにはできません。仮にディスプレイ解像度が96dpiであれば、96ドット角にしてやれば1インチになりますが、人によって使ってるモニタのサイズもデスクトップの大きさもバラバラで、ディスプレイ解像度が違うので、1インチになるドット数が決められません。
一方、CSSでは幅や高さなどの長さの指定にさまざまな単位が使えます。
- HTMLでの指定
<img id="one-inch" src="200dpi.jpg" alt="200dpiサンプル" />
- CSSでの指定
#one-inch { width: 1in; height: 1in; }
さてどうでしょうか。なかなかいいところまで行ったかもしれません。微妙にサイズが違うかも。ちなみに私の環境(デスクトップサイズ1024×768、15インチ液晶ディスプレイ)では約2.8センチでした。 なぜ正しく1インチにならないのでしょう。カギはブラウザ(あるいはシステム)がディスプレイ解像度をどう認識しているか、にあります。
webブラウザによっては画面解像度を設定できるようになっているものもあります。たいがいは環境設定メニューのフォントの項目にあると思います。
上の例は Firefox1.5 での設定画面です。Netscape7 や iCab などにも同様のものがあります(iCabではCSSの項目のところにあります)。
一方、Windows版 Internet Explorer や Safari にはありません。これはシステムの方で設定する必要がありますが(Mac OS X はどこで設定するんだろう…)、ほかのアプリケーションにも影響がありますのでうかつに手を出さない方がいいでしょう。
さて計ってみると私のシステムではだいたい85dpiのようです。デスクトップサイズとモニタサイズから計算してもそれくらいの数字が出ますので85dpiに設定します。
今度はちゃんとほぼ1インチの大きさで表示されます。初期設定では画面解像度が96dpiに設定されてることが多いので、一度確認してみるといいでしょうね。 逆に言えば、実際のディスプレイ解像度がどうであれ、96dpiに設定されていることが多いので、すべての閲覧者のディスプレイにきっちり1インチの大きさで表示させることは無理なわけですが。
追記
いくら小さく表示できたとしても、ファイルサイズは元のままなので、サムネイルなどで小さい画像が欲しい時は画像編集ソフトで小さくしたものを使った方がいいですよ。
