今までは、文字のみでホームページを作ってきましたが、やはり画像がないと寂しいホームページになってしまいます。この章では、画像をホームページに掲載する方法を学んでいきます。         1. 挿入バーのイメージコンボボックスをクリックします。         2. イメージメニューの中からイメージを選択します。         3. イメージソースの選択ダイアログが表示されますので、挿入する写真データを選択し、『ＯＫ』ボタンをクリックします。 選択した画像は右側に『イメージプレビュー』が表示されますので、どんな画像だったかを確認することが可能です。         4. イメージタグのアクセシビリティ属性ダイアログボックスが表示されます。 代替テキスト：に選択した画像を現すようなテキストを入力します。 ※代替テキストの意味は後ほど説明します。 ※また、代替テキストはイメージタグのアクセシビリティ属性ダイアログボックスで設定しなくても、後からでも設定は可能です。 代替テキストを入力したら『ＯＫ』ボタンをクリックします。         5. 画像が掲載されました。   画像の種類 さまざまなグラフィックファイル形式がありますがインターネットのホームページでは、一般に JPEG（ジェーペグ）、GIF（ジフ）、および PNG（ピング）の3種類のファイル形式が使用されます。 現状では、JPEGとGIF形式が最もサポートされており、大半のブラウザで表示できます。 PNG ファイルは、柔軟性があり、ファイルサイズも小さいため、ホームページで使用するのに適していますが、PNGファイルは古いバージョンのブラウザでは対応していないものがあります。 その為、より多くのユーザーに見てもらう場合には、JPEGかGIFを使用したほうが良いと言えます。 下記は、3種類のファイル形式を比べたものです。例では、比較画像が小さいため、それほど顕著な差は出ていませんが、画像が大きくなるにつれその差は顕著になります。   画質100　[27.7KB]   画質50　[6.06KB]   画質100　[13.0KB]   画質50　[5.06KB]   JPEG (Joint Photographic Experts Group)　[拡張子：.jpg　.jpe] 約100万色のカラー情報を保持できるため、写真やグラデーションの画像などに適したファイル形式です。画質が高いほど、ファイルサイズは大きくなり、表示に時間が掛かってしまいます。イメージの画質とファイルサイズのバランスを調整するには、JPEGファイルを圧縮します。 ※JPEGの画質100は、画質を全く落としていませんので、ファイルサイズが大きくなっています。しかし、画質を半分に落としても、さほど画質の差は無いですが、ファイルサイズが格段に小さくなっています。 ※JPEGは色数の少ないイラスト系の画像より、写真画像の方が表示に適しています。         色数256　[20.5KB]   色数64　[13.0KB]   色数110　[3.49KB]   色数8　[2.10KB]   GIF (Graphic Interchange Format) 　[拡張子：.gif] 最大256色を使用し、グラデーションではないイメージや、イラスト、ボタン、アイコン、ロゴなどのカラーや階調を均一的に使用したイメージ、平板なカラーの領域を多く含むイメージの表示に最適です。 使用する色数を少なくするとファイルサイズも小さくなります。 また、透過GIF（画像の任意の個所を透明化させ、背景など画像の背面隠れた部分を見えるようにする）やアニメーションGIF（動きのあるGIFファイル）の作成が可能です。 ※画像の色数によってファイルサイズが大きく異なります。 ※色数の少ないイラスト画像などの表示に適しています。         色数256　[18.5KB]   色数64　[12.1KB]   色数110　[3.02KB]   色数8　[1.82KB]   PNG (Portable Network Graphics) 　[拡張子：.png] GIF ファイルのパテント（特許）フリーな代替ファイル形式で、インデックスカラー、グレースケール、および True Color イメージや、透明度のアルファチャネルをサポートしています。 GIF形式よりも圧縮率が高く高機能ですが、全てのブラウザで表示で出来る訳ではありません。 ※GIF形式に似ていますが、同じ色数で表示してもGIFよりファイルサイズが小さくなります。 代替テキストについて 画像掲載に関して、注意すべき点があります。それは、画像を表示できない環境が少なからずある事と、画像を見ることが出来ない人（視覚障害者）がいる事を認識しなければならない事です。 そのような場合に対応するために、画像のプロパティインスペクタには『代替テキスト』が用意されています。これは画像を表示できない場合この代替値が表示され、音声発声ブラウザの場合は代替テキストが読まれます。 ですので、代替テキストには、その画像の変わりになる情報を設定します。決してファイル名などを指定するものではありません。ファイル名が表示されたり、読まれたりしても、何の役にも立たないからです。代替テキストの値には日本語も使用可能ですので、その画像を分かりやすく説明したテキストを入力しましょう。   イメージタグのアクセシビリティ属性ダイアログボックス以外にも、画像のプロパティインスペクタの　『代替』で設定する方法もあります。   画像が表示されないブラウザでも、『代替テキスト』が表示されるので、なんの画像かが分かります。また、音声ブラウザなどはこの『代替テキスト』を読み上げます。