情報科学Ａ 「グラフィックデータを使ったホームページ」参考資料
２つの画像フォーマットを正しく使い分けよう！
| GIF (8bit, 256色) |
JPEG (24bit, 1600万色以上) |
| 結果： 色深度(＝1ピクセルが表現できる色数)の少ないGIFでは微妙な色の違いが表せない。 | |
GIF (25.1KB) |
JPEG (1.7KB) |
| 結果： GIFは色が微妙に変換する画像の表示には向かない。 | |
GIF |
JPEG |
| 結果： GIFは直線が線が正確に保たれるが，JPEGは色の境界付近で発色が濁る。 | |
GIF |
JPEG (圧縮率を高めて違いを強調してある) |
| 結果： GIFは文字がくっきりと出るが，JPEGは文字の周りににじみが発生する。 | |
GIF画像は256色しか表現できないため，BMP形式等，256色以上の画像からGIF画像を書き出すと色にムラ (ディザ dither という) が出ることがある。
「256色 ビットマップ」から作成 |
|
GIF (これが一番きれいな出力になる) |
JPEG (色の濁りがでる) |
「24ビット ビットマップ」から作成 | |
GIF (発色がおかしくなる！) |
JPEG (色の濁りがでる) |
書き出し保存した画像はチェックする習慣をつけよう。大学PCにはPhotoshop Elementsという画像編集ソフトが入っている。このソフトには，画像フォーマットによる減色を美しく処理してくれる高度な機能を持っており，「ペイント」やPhotoShopでJPEGやGIFを保存するよりも美しい画像が作成できる。
JPEGは，一度変更を加えると元の画質には戻らない「非可逆圧縮」というしくみでファイルサイズを小さく抑えている。そのため，JPEGは編集保存のたびに元の画像よりも画質が悪くなっていく。
JPEGの圧縮率を高くして画像の荒れを強調してあります。線画だけでなく，イラストでもこのような傾向がありますが，スナップ写真などでは汚れは目立ちにくいです。 | |
| GIF (元の画像) |
JPEGで保存 |
保存したJPEGを左へ90度ずつ回転して保存 | |
1回目 |
2回目 |
3回目 |
4回目 (保存直後との差に注目！) |
書き出し保存した画像はチェックする習慣をつけよう。Photoshop Elements には，あらかじめ出来上がりの画像の様子をチェックできる「Web用に保存」というメニューがあり便利。
GIFは，1色を選んで透明にすることができる。以下は，PowerPoint で作成した BMP 画像を，Photoshop Elements で GIF に加工した。一方は透過なし，一方は透過あり。透過GIFを作る手順はこちら。
| GIF (透過なし) |  |
GIF (透過あり) |  |
GIFとPNG以外では透過効果は出ない。JPGで同様の効果を出すには，画像の背景色をWebページの背景色と予め合わせておくとよいだろう。
スキャナは図書館4Fで利用できる (情報教育センターのマニュアルを参照しよう)。解像度に注意！Webページで利用するには，解像度は低めで十分。あまり高解像度にすると，縦横のサイズがむやみに大きくなるばかりか，ファイルサイズもかなり大きくなり，file_serverの保存容量を圧迫する可能性がある。
| 75dpi でとったスナップ写真 |
同じ写真を 300 dpi で取り込むと，こんなに大きくなってしまう。 補足： Internet Explore の場合，大きな画像は縮小表示されるので，マウスを画像の上に置いて出てきた「プラス」ボタンをクリックすると元のサイズで表示される。(「マイナス」ボタンで元の縮小表示に戻る。) |
大きな画像データを見てほしい場合には，小さい画像を作っておいて小さい画像をWebページ中にリンクつきで表示させ，リンクをクリックすると大きな画像を開くようにするとよい。このような小さい画像を「サムネイル」(thumbnail, 親指の爪くらい小さいモノ，という意味)という。
Photoshop の機能を利用した画像の例を紹介する。大学PCではPhotoshop Elementsが利用できる。Photoshopは専門家用の本格的な画像処理ソフトで，Elements はその中の比較的よく使われる機能を搭載している。必要に応じ参考書などを参照しながら作業するとよい。
| アンチ・エイリアス |
|
||||||||||||
| レイヤー (PowerPointの図形の重なり順序の調整機能と似ている) |
|
||||||||||||
| ぼかし |
|
||||||||||||
画像の特定部分の切り抜き
|
|
||||||||||||
