HP Guide for Beginners(タイトルロゴ)

PC・タブレットなどでブラウザーの横幅が大体960px以上の時:リンクをクリックすると、画面左下に"タグ解説ページ"が"別窓で並行表示"されます

横幅が960px未満の時:リンクをクリックすると、"タグ解説ページ"が新規ウインドウで表示されます

"pictures" 

・・・もちろん、テキストのみでHPを作ってもかまわないわけですが、"美しいレイアウト"のページを作るには、やはりイメージ(画像)は不可欠でしょう。

イメージをブラウズさせるには、当然、(HTMLファイル以外に)イメージファイルが必要イメージファイルが必要ですが、HPで使えるファイル形式は"jpeg(ジェイペグ)"、"gif(ジフ、またはギフ)"、および"png"だけ、つまり、"ペイント"で扱っているBMPファイルや、Macで使われているPICTファイルは使えません。

(pngは新しい画像形式で、多くの利点を持っていますが、NC, IEとも、最新のバージョンでも表示を完全にはサポートしていません。

そこで、最低限、ファイルコンバータ(形式変換)ソフトが必要なわけですが(フリーウエアシェアウエアであります)、できれば、jpegとgifを扱えるグラフィックソフトを手に入れた方がいいでしょう(リッチでアートは大の得意という方は"Photo Shop"、リーズナブルなものなら"Paint Shop Pro"などが一般的です。
また、こちらも、フリーウエアやシェアウエアがいろいろあるようなので、探してみて下さい)。
あるいは、デジカメデジカメを持っている方なら、接続キットにファイルコンバータの機能が付いているはずですので、そちらを使うことも可能です。

〔jpegファイルとgifファイルの特徴〕

この二つのファイル形式は、元々、インターネットやパソコン通信で効率良くイメージデータを転送するために考え出されたものなので、ファイルの容量が(BMPファイルなどより)小さい反面、いろいろ欠点(というか"制約")があります。

それぞれのファイル形式の特徴を挙げると、

   (jpeg)
  • 色数はフルカラー(1600万色)
  • 圧縮率が高い(品質が低い)ほどファイルの容量が小さい
  • 輪郭のはっきりした"イラストらしいイラスト(?)"だと、輪郭がにじんで汚く見えることがある
   (gif)
  • 色数は最大256色
  • 色数が少ないほどファイルの容量が小さい
  • 色数が(特に)多い写真の場合、似た色で置き換わるため、汚く見える
  • 輪郭ははっきりしている

(ちなみに、jpegとgifのファイル容量の関係は(イメージによっても変わってきますが、写真の場合だと)、

gif256色 = jpeg品質約98.5% ("平均"で)

となります)

以上から、jpegは写真、gifはロゴロゴやイラスト(グラフィックソフトにもよるのでしょうが、最初から256色で描くより、フルカラーで作ったイメージを減色した方が"きれい"にできるようです。各自試してみて下さい)に向いていそうだと推測できると思います。

gifの場合、これくらい減色するとどんな見え方になるだろうか、とだいだい予測できるし、また、当たるのですが、jpegの場合は、"品質が50%だから、ファイルの容量は半分、'見栄え'も半分"とはなりません。

写真によってかなりバラツキがありますが、中には、70%くらいにしても見た目はほとんど変わらないものもあります(ファイルの容量は100%の(同じ)画像の1/5~1/7くらい)。

・・・でも、印刷すると一目瞭然なので、"ぜひ印刷してもらいたい"という人は、サムネイルサムネイルにして品質100%の写真を使って下さい。

NYの夕景の写真(jpeg品質100%(34.3K))
jpeg品質100%(34.3K)
NYの夕景の写真(jpeg品質75%(7.73K))
   jpeg品質75%(7.73K)
NYの夕景の写真(jpeg品質50%(5.05K))
      jpeg品質50%(5.05K)
NYの夕景の写真(gifファイル(20.2K)
     gif256色(20.2K)
〔jpeg & gifの"オプション"〕
   (プログレッシブjpeg)

ネットスケープでは、ふつう、イメージは上から表示されていきますが、このオプションでjpegファイルを保存すると、最初にモザイクがかったようなイメージがブラウズされた後、次第に鮮明になってくるので、見に来てくれている人のイライラを軽減することができます。
(NN6とIEでは、データが全部読み込まれるまで全く画像が表示されないようです)

   (インタレースgif)

プログレッシブjpegの"gif版"です(こちらは、NN, IE共有効)

   (透過gif)(透過gif)

このオプションで保存すると、ブラウザ上で背景が透けて見えます。(例えば、タイトルロゴとか、四角形以外のリンクボタンなどによく使われます)

   (アニメーションgif)

文字通り"動くイメージ"ですが、うまく描くには"絵心と努力"が必要です(・・・私は挫折しました)。
グラフィックソフトのいくつかはこの機能をサポートしています。