ウェブサイト用画像の基礎知識
ウェブサイト用画像の基礎知識
表示サイズを調整しましょう。
ウェブサイト用の画像は、画像編集ソフトウェアでその画像解像度を変更する必要があります。
解像度とは
画像編集ソフトウェアを利用すると、解像度という言葉や単位を目にします。この解像度はその用途によって利用される単位が違います。
スキャナ読み込み時の解像度
スキャナ読み込み時では「dpi」という単位を目にします。これは、「100dpi」とした場合1インチあたり「100ピクセル(この単位については後述します。)」の密度で読み込むという事です。つまりdpi値を大きくする程、より多くの画像情報を取り込むのでデータサイズは大きくなりますが、その画像を印刷する時には、より綺麗な印刷が出来るという事になります。
モニタの解像度
ウェブサイトで利用する画像は、この「モニタの解像度」を考慮して調整する必要があります。
モニタの解像度は、そのモニタの広さを表します。つまり、どのサイズまでの画像を表示できるか?という事になります。
当社が、お客様のサイトをデザインする際にも必ず、このモニタ解像度に注意します。モニタが表現できるサイズ以上で作ってしまうと、画面からはみ出す事になります。ブラウザでは、表示できない部分はスクロールバーで動かして見れるようになっていますが、縦にも、横にもスクロールバーが出てしまうのは閲覧者にとっては、見づらいページになります。従って、「横方向のスクロールバーを出さないように作る」という事に注意します。これは、画像サイズにも言える事で横方向のスクロールバーを出さないサイズ＝モニターに収まるサイズ」に調整する事が大切です。
※実際には、画像だけをブラウザで表示させた場合、最近のブラウザの機能で最適サイズに縮小されます。但し、ウェブサイト用画像のようにページ+画像で表示させた場合、この機能は適応されないので解像度に注意する必要があります。
単位＝ピクセルとは?
ウェブサイトでは、ピクセルという単位を使用します。
1ピクセルとは、分かり易く言うと方眼紙のマス目のひとつと考えると良いでしょう。
モニター解像度で「800×600」の場合は、横方向に800ピクセル、縦方向に600ピクセルを表示する事が出来ると言うことです。
ビットマップ方式の画像データは小さな四角い点の集まりで写真などの画像をあらわします。色の付いた1つの四角＝1ピクセルの集合したものが一つの画像データになります。従って、下の画像は横300ピクセルですので、横方向に300マスの画像と言う事になります。
赤い部分を拡大してみると･･･
四角ひとつが一色という事が分かります。
モニターの標準サイズ
この基礎知識の最初の項目で「より多くの人が快適に見れるように」という事を説明しましたが、これは画像サイズにおいても重要です。
つまり利用しているモニターサイズも訪問ユーザーによって違うのです。
例えばお客様が、19インチモニターを利用して1280×1024のサイズで利用していたとします。このサイズでギリギリ収まるようにサイズ調整するのは間違いです。
何故なら、15インチモニターで見ている人も居るからです。多くの15インチモニターの表示限界は1024×768※ですので、1280×1024サイズを基点にすると15インチで見ている人には大きすぎる画像になってしまいます。では、どのサイズを標準とするのが良いのでしょう?
小さなノートパソコンでは、640×480(Macintoshで言う13インチモード)が標準という場合もあります。但し、このサイズは少数派ですので切り捨てるという考え方があります。そこで、我々の業界では800×600サイズを標準としていました。最近では、グラフィック機能の向上で1024×768を標準で採用する流れもあります。
※15インチモニターにおいても、グラフィックボードの性能により、それ以上のサイズで表示できるパソコンもございます。
◎ 携帯サイトの場合
携帯電話向けのサイトの場合は、もっと小さなサイズに調整する必要があります。また、携帯の場合機種毎にサイズが様々の為、一概に「これが標準」という事はありませんが、新しい携帯電話程、液晶サイズは大きくなっています。とは言っても、パソコン向けと比べて小さなサイズです。2年以内に発売されている携帯電話向けと考えると横幅250ピクセル程度が適切でしょう。
実際には、どのサイズが適切か？
標準モニターで表示できるサイズ以下と説明しましたが、実はこれも適切ではありません。実際に表示させるページには、左側や右側にリンクメニューなどが設置されているので、この分を差し引いたサイズ以下で、調整する必要があります。弊社で制作するページは、ページ印刷時(A4用紙)にも収まるように、その内容を調整しています。従って、この内容部分に収まるサイズで調整する必要がありますので横幅500～600ピクセル以内※が適切です。
それ以上のサイズで調整した画像ファイルをアップロードしてしまうと、ページ全体のレイアウトが崩れてしまう事がありますので、ご注意下さい。
※お客様によっては、デザイン上これ以下のサイズに限定する事もあります。
