リファレンス Web画像形式

[記事公開日]2013/09/02
[最終更新日]2013/09/20

リファレンス Web画像形式

 点(ドット:ビートマップ形式)で絵を描く「JPEG」「GIF」「PNG」、線(ライン:ベクター形式)で絵を描く「Flash」「SVG」が有名です。ホームページを見るということは、ページの表示に必要なデータを読み込む必要があるので、ファイル容量が大きくなりがちな画像データは、容量が小さくなるように(ファイル転送量が少なくてすむように)、ぎゅっと小さく圧縮した画像形式を使います。このため、非圧縮形式である「BMP(ビーマップ)」ファイルを使うことがご法度なんです。

※「.bmp」ファイルを使っても表示はされますが、ファイル容量は圧縮されてないので、めちゃくちゃ大きなファイルを読み込むことになり、はた迷惑なだけです。絶対、使わないで下さい。

 JPEG(ジェイペグ) 

 拡張子は「.jpg」。フルカラー(1,670万色)対応。おもに写真などを載せたいときに使います。非可逆圧縮(一度圧縮すると、元の状態に戻らない)という特徴があり、ファイルサイズを小さくできるかわりに、画像の劣化が生じます。圧縮率を任意に変更できますので、ファイル容量と劣化具合のバランスをとって、最適な状態にして使用ください。圧縮率を下げればされるだけ、劣化がひどくなる特徴があります。

 参考までに圧縮率の目安ですが、ホームページ上で写真を使うなら、30%くらいがいいといわれています。イラストとか、いろいろ写真に加工を加えた後だと、60%くらいですかね? 生の写真ならそんなに劣化しないんですが、いろいろ機能を使った後だと、ものすごく劣化するときがあるので。ただあくまでこれは目安です。ご自分の目で、ファイルサイズと劣化状態を見極めて、ちょうどよいバランスで保存してください。

 圧縮オプション 

 「ベースライン(画像を上部から表示)」「プログレッシブ(全体を粗く表示し、次第にきれな画像へと変化)」の二種類が選べます。もちろん、凝ったことをしているプログレッシブのほうが、画像ファイルが大きくなります。

 ソフトと圧縮傾向  

 Windows付属の「ペイント」でも、OSのバージョンによっては、JPEGファイルがサポートされていているんですが、圧縮率の変更まではできません。なので、保存時に圧縮時の変更ができる画像専用ソフトがあったほうがいいと思います。

 フリーソフトの「Pixia」を使うとか、Officeモデルのパソコンを買った方なら、「Microsoft Photo Editor」というソフトがプレインストールされているのでそれを使うとか、お金をかけずに使えるソフトもあります。ただ画像ソフトはちょっとクセがあるので、自分が使いやすいソフトを探して、扱い方に慣れておいたほうが無難です。

 GIF(ジフ) 

 拡張子は「.gif」。最大256色対応。おもにイラストやナビゲーションアイコンなどを載せたいときに使います。可逆圧縮(圧縮しても元に戻る)という特徴があります。拡張仕様として、背景色を透過できる(透過GIF)、イラストを動かせる(アニメーションGIF)などがあります。

 ※GIFの圧縮技術に特許が絡む関係で、ライセンス料を支払っていないソフトで作成したGIFファイルは、後々問題が生じる可能性があるので、作成時には気をつけてください。特許の関係で、フリーソフトでGIFが扱えるソフトも少ないし、扱えたとしてもライセンス料を支払っているかどうか確認しないといけないので、ソフトを選ぶときは慎重に。

 圧縮オプション 

 JPEGの「プログレッシブ」と同じく、「インターレース形式(全体を粗く表示し、次第にきれな画像へと変化)」が用意されています。これも画像ファイルが大きくなるデメリットがあります。

 ソフトと圧縮傾向 

 Windows付属の「ペイント」でも、OSのバージョンによっては、GIFファイルがサポートされていているんですが、透過GIF・アニメーションGIFには対応していないし、カラーパレットの問題で、無理やり保存すると色が変色する危険性があります。「Microsoft
Photo Editor」で、透過GIFは作成できました。「Animation GIF Maker」で、アニメーションGIFも作成できました。――ただ、不必要な色数を削除してファイル容量を減らして保存できたりたり、市販ソフトのほうが、何かと便利なのも事実です。

 PNG(ピング/ピーエヌジー) 

 拡張子は「.png」。フルカラー、および、インデックスカラー(最大256色)対応。早い話しが、「JPEG」と「GIF」のいいとこどりです。カラーモードは「グレースケール」「256インデックス」「フルカラー」の三つがあります。可逆圧縮(圧縮しても元に戻る)なので、JPEGと比べ、フルカラーでも画質の劣化が生じません。「フルカラー」だと、JPEGよりファイルが大きくなってしまうんですが、「インデックスカラー」だと、GIFよりファイルが小さくなる特徴があります。

 もともとは「GIF」の特許問題なんかもあり、ホームページ上で使うために開発された形式ですが、現時点ではまだサポートが行き届いていないため、次世代のための規格といった感じです。徐々に使われ始めてはいますが、普及率は、「JPEG」「GIF」には及びません。なんか、携帯コンテンツのほうで普及しはじめてるらしいです。

 ソフトと圧縮傾向  

 Windows付属の「ペイント」では扱えません。でも、フリーソフトの「Pixia」は使えます。他にも扱えるソフトがあると思うので、探してみるといいでしょう。ただ、全体的な性能(圧縮率や機能面で)からいくと、市販ソフトのほうが、何かと便利かなっと思います。

HTML文法的には?

ALT指定のサンプル。 img
タグを使います。作成ソフトを使っている場合は、そのソフトの指示通りに処理すれば、画像を挿入できます。タグの知識がなくても大丈夫です。でも、できれば、次に説明する意味だけは抑えておいてください。

 Ex, 右の絵の表示タグ <img src="http://www.causu.com/98_trouble.jpg" alt="ALT指定のサンプル。"
width="174" height="183alt="ALT指定のサンプル。">

ALT指定(代替テキストの設定) 

 右にある絵の上にマウスを乗せてみると、文字が表示れます。こういうのを「代替テキスト」といいます。テキストブラウザ・音声ブラウザをはじめ、画像なしでも内容がわかるように、代替テキストで「絵で表示されている情報を説明する文」を用意するのが最低限の礼儀といえます。(HTML文法的には必須)

読み込みを早くさせる設定  

 「width」と「height」指定で、絵の大きさを指定しておくと、画像の読み込みが速くなります。是非、指定しましょう。

 ※サイズの合わない絵を、無理やり数値設定することにより、任意の大きさとして表示することができますが、画像が粗くなるので、私はおすすめしません。挿入する絵や写真は、表示したい大きさに加工してから使うようにしましょう。



Copyright © 2000-2018 Makiko HOSOKAWA. All rights reserved.