ネット画像の必要不可欠な基礎知識

Web ページプログラミング
Lecture3
Oct. 3rd 2016
ネット画像の必要不可欠な基礎知識
画像にはそれぞれファイル形式があり、すべての画像がホームページで使えるわけでは
ありません。同じ絵柄の画像であっても、ブラウザが表示できない形式もあります。また、
ファイル形式によってはデータの容量が大きすぎて、インターネットでは表示に時間がか
かり、不適切なものもあります。
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）することができます。
1
Web ページプログラミング
Lecture3
Oct. 3rd 2016
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
2
Web ページプログラミング
Lecture3
Oct. 3rd 2016
Good page for learning HTML, CSS & JS.
http://www.codecademy.com/
3

Download Report