Webページプログラ
Lecture3 Oct. 2nd 2017
1
ネット画像の必要不可欠な基礎知識
画像にはそれぞれファイル形式があり、すべての画像がホームページで使えるわけでは ありません。同じ絵柄の画像であっても、ブラウザが表示できない形式もあります。また、
ファイル形式によってはデータの容量が大きすぎて、インターネットでは表示に時間がか かり、不適切なものもあります。
Webページで使用できる画像形式は、通常JPEG形式とGIF形式とPNG形式の３種類 があります。Windowsの標準形式であるBMPや、Mac OSの標準であるPictは使用でき ませんので注意してください。
大きい画像をホームページで使うときは必ずリサイズする
画像は点の集まり
画像は点（ドットまたはピクセル）で構成されています。たとえば 400 万画素デジカメの 画像は約４００万個の点で構成されています。200万画素の2倍も点の数が多く、従ってフ ァイル容量が大きいとインターネットでは表示に時間がかかり適切ではありません。
デジカメ画像は大きすぎる
点の数（サイズ）が大きい画像はホームページに大きく表示されます。30 万画素の画像さ え大きすぎるため、リサイズが必要になります。
リサイズとは画像の絵柄はそのままで、構成する点の数を減らすことです。例えば 400 万 画素を30万画素に変換することができます。
画素数 点の数（横X縦の数） JPEGの標準的なファイル容量 ４００万画素 2272 x 1704ピクセル 約1 MB
３００万画素 2048 x 1536 ピクセル 約700 KB ２００万画素 1600 x 1200 ピクセル 約370 KB ３０万画素 640 x 480 ピクセル 約90 KB
インターネットで利用される主な画像フォーマット
インターネット上で主に利用される画像フォーマットは、GIF、JPEG, PNGの3種類です。
ページに画像を表示する場合、画質と画像が表示されるまでの時間とのバランスを考える ことが重要です。画像のフォーマットを上手に使い分けると、軽くて見やすいページを作 成することができます。
GIF(.gif) ファイル形式(拡張子)
GIF(Graphics Interchange Format) 形式は、256色まで使用できる画像形式です。表示サイ ズに比べファイルサイズが小さいのが特徴です。主にロゴやアイコン、バナーなど、色数の 少ない画像で使用されます。また、GIFは、特定の色を透明にしたり（透過GIF）、複数の画 像をパラパラ漫画のように連続表示したり（アニメーションGIF）することができます。
Webページプログラ
Lecture3 Oct. 2nd 2017
2 JPEG(.jpg) ファイル形式(拡張子)
JPEG(Joint Photographic Experts Group)形式は、フルカラー(1677万色)に対応しているた め、写真など色数の多い画像に利用されています。圧縮率をあげるとデータサイズを軽く することができます。しかし、その文画像は劣化します。また、ダウンロードしながら画 像を徐々に表示する「プログレッシィブJPEG」という形式もあります。
PNG(.png)
PNG (Portable Network Graphics)形式は、JPEG形式のようにフルカラー(1677万色)表示 ができ、またGIF 形式のように透過した画像を作成することも可能です。GIF 形式に代わ る画像形式として標準化が進められており、GIF形式に比べてファイルの圧縮率が高い割に、
画質が劣化しないのが特徴です。ただし、PNG形式に対応していないWebブラウザもあり ます。
GIF JPEG PNG
拡張子 .gif .jpg .png
表示色 256色 1677万色 1677万色
透過 できる できない できる（ただし一部ブラ ウザで対応していない）
用途 ロゴ／画像文字 写真 ロゴ／写真
画像の配置 画像を挿入する
画像をHTML文書に挿入するには、<img>タグを使用します。終了タグはありません。
<img>タグの必須属性は、src属性とalt属性です。
<img src=”./photo/picture1.jpg” alt=”京都で撮った写真です”> photoフォルダ
alt属性
alt 属性には「画像に代わって表示する文字列」を記述します。これは、画像を表示でき ないLynxなどのブラウザのためだけのものではありません。Internet ExplorerやFirefoxな どでも、画像の読み込みに失敗した時、画像を表示しない設定にしている時などは、alt 属 性の情報ブラウザ上に表示されます。
画像の大きさを指定する
画像の大きさを指定するには、<img>タグにwidth属性とheight属性を追加します。
width属性は幅を、height属性は高さを px（ピクセル）、もしくは％（ブラウザ・ウインド
ウとの割合）で表示サイズを指定します。必須属性ではありませんが、この 2 つを指定し ておくことで、ブラウザが画像を読み込む最中も画像サイズのスペースを空けて表示する ので、ページレイアウトが崩れません。
画像の種類：
http://www.geocities.co.jp/Technopolis/7948/lernejo2/pict/color00.htm
Webページプログラ
Lecture3 Oct. 2nd 2017
3 Good page for learning HTML, CSS & JS.
http://www.codecademy.com/
