GIFアニメーションを使う前に
君のホームページにGIFアニメを使おうと思う前に、知っておいて欲しいことがあります。それは、GIFアニメのメリット・デメリットです。GIFアニメだと、画像が動いて楽しいのですが、作成者が気付かない落とし穴もあります。
他のGIF画像以外の画像形式(PNG,JPEG)の特性も知って、最適な選択をしましょう!
ホームページで使える画像形式
よくホームページで使われる画像形式には、「JPEG・GIF・PNG」の3形式があります。それぞれの特徴を知って、使用用途に応じた画像形式を選ぶことで、綺麗で快適な表示の早いホームページになります。
画質をキレイに保ちキレイな画像を見せられたり、ファイルサイズを小さくしてサーバ容量や訪問者の通信負担が少なくなるすることも出来るからです。
これを知らなければ、ファイルサイズの大きく汚い画像になり、表示の遅いホームページになってしまうこともあるんです。
- JPEG・・・主に写真などに利用
- GIF・・・透過画像やアニメーションに利用
- PNG・・・画質を落としたくない画像に利用
Format-1. [JPEG]を使用する場合
写真のような複雑な画像に使用する画像圧縮形式です。
写真の場合、画質の劣化が余り気にならないで、画像のファイルサイズが激減します。
Tips: デジカメ写真の保存形式に使われています。
Format-2. [GIF]を使用する場合
アニメ画像や、背景を透過させたい場合に使用する画像形式です。
主にウェブ素材(ボタン・アイコン等)に利用されています。単色で単調な画像(幾何学的模様など)に効果があります。
表現色が256色までなので、写真などのJPEG画像、色数の多い画像から変換すると汚くなります。
(※注) 当サイトは、アニメーションGIFを作成することを目的としています。
Format-3. [PNG]を使用する場合
画質劣化を好まない場合、透過させたい場合に使用する画像形式です。
GIF画像と同様な用途で使用しますが、アニメーションはできません。
しかし、GIFの上限256色とは違い、24bitフルカラーでも表現できる為、画質の劣化を好まない場合に使います。
最大64bit(RGB各16bit+アルファチャンネル16bit)の情報が扱えるが対応ソフトはあまりない。
(※注) PNGは、MNG形式とAPNG形式でアニメーション可能だが、ほとんどのブラウザは未対応です。
(※注) PNGは、半透明も使用可能だが、古いブラウザは未対応です。
画像形式「JPEG, GIF, PNG」比較表
ホームページで利用できる画像3形式の特性を下表にまとめてあります。使用用途に応じて最適な画像形式を選んで下さい。
画像形式 | JPEG | GIF | PNG |
---|---|---|---|
画質の劣化 | 不可逆圧縮 (画質劣化あり) | 可逆圧縮 (画質劣化なし) | 可逆圧縮 (画質劣化なし) |
最大色数 | 約1678万色(24bit) | 256色(8bit) | 約1678万色(24bit) 約280兆色(48bit) |
透過処理 | 透過不可 | 透過可能(1色) | 透過可能(1色・アルファチャンネル) |
アニメーション | アニメ不可 | アニメ可 | アニメ不可 (※アニメ形式はAPNG) |
徐々に表示 (インターレースなど) | 可能 | 可能 | 可能 |
(※注) PNGの最大色数は一般的な24bit(アルファチャンネルを含めると32bit)と特殊な48bit(アルファチャンネルを含めると64bit)を併記しています。
画像形式 | JPEG | GIF | PNG |
---|---|---|---|
フルカラー写真 | ◎ | × | △ |
モノクロ写真 | ◎ | △ | △ |
フルカラーCG | ◎ | × | ○ |
単色イラスト | △ | ◎ | ◎ |
ボタン画像 | △ | ◎ | ◎ |
バナー | ○ | ○ | ○ |
アイコン | ○ | ◎ | ◎ |
アニメーション | × | ◎ | × |
幾何学模様 | △ | ◎ | ◎ |
Posted By PONTA : 2004/11/14-00:02
ペイントは、画像形式を変更することはできないのでしょうか?
dolpyさんと質問が似ているかもしれませんけど、ペイントはGIFからPNGにすることはできないのでしょうか?
もらった絵などの画像形式は変更することができますか?
GIFからPNGにしたいのですが、方法がわかりません。
はじめました。アメーバでブログを開いています。もっぱら好きなゲームキャラのパロディ(エッチじゃないですよ)と漫才的掛け合いで展開しています。ファミコン的動くキャラがほしくて、ためしに反転2枚のgif画像でアニメーションをつくってみました。トップにリンクを貼りました。
わかりやすく、面白いサイトにめぐりあえたとよろこんでいます。ありがとうございました
>ルファーさん。
初めまして、ご指摘有難うございます。修正しました。
あまり使われていませんがPNGの仕様上の最大はRGBA各16bitなのでコレを機に48bitとしました。アルファチャンネルは色数ではなく情報なので補足として載せました。
PNG画像の最大色数は約43億色(32bit)です。半透明を含むなら。
あと1677万はピッタリじゃないし、しかも概数でもないので
「約1678万色」に修正したほうが良いと思います。
あと遅くなったけど初めまして。