#blognavi
知っているひとは知ってるけれど、知らないひとは知らないWebグラフィックの基礎知識。
よく、写真画像の中にマンガの吹き出しやセリフを入れたりバナーのタイトルを入れたりしてるのを見かけるけれど、、あれをやっちゃうと、JPEG形式で保存するときに悩みます。
理由は、、吹き出しや文字の部分はGIF形式で保存したほうがファイル容量が少なくてすむし、見た目もキレイだけど、その他の写真部分は、JPEGで保存したほうがベターなんで!
結局、写真部分のほうがメインだからってJPEGで保存することになるんだけど、そのとき圧縮率を高くするとベタ塗りの吹き出し・文字などが滲んだりノイズがのったりするでしょ。
↓下の画像は左側がGIF形式で保存した吹き出し、右側がJPEG形式で保存した吹き出し。（JPEGのブロックノイズが目立つ）
といって、圧縮率を低く設定すると文字の滲みが目立たなくなって画像はキレイだけど、ダウンロードするのに重くなるしい。
うーんうーん、どうしようとか（笑）。
つまり、そういうイメージ、ベタ塗りのアニメ画像やエッジの立っているテキストやスクリーンショット（キャプチャーしたパソコンの画面）は、JPEG保存にゃむかんの。
水平方向に単色が多数回、出現する画像向きのGIFと、多色で連続的な階調が出現する画像向きのJPEGは、それぞれ圧縮方法が異なるから、ひとつの画像としては相容れないもの。
それでもどおしても出来れば、どうにかして画質もそんなに悪くなくて重たくもない、妥協できる重さで画像保存したいとなれば、マクロメディアから出ているFireWorksていうWebグラフィック用途の画像作成ソフトに画像内の範囲を指定して圧縮率を変えられるという機能が備わってるから、それを利用するか、
またはイメージスライスという手法を使う。
これは画像を文字通りスライスして、画像の部分ごとに適切な形式で保存しておき、その一つ一つをテーブルのセルにはめこんで表示させるというやり方。
この手法で作ったのが、過去記事の中にある、ViXの保存ダイアログの画像。↓
上の画像は、上下２枚にスライスしてあります。保存ダイアログの上部、文字や入力欄のある画面を最適化したGIF形式で保存し、下部のプレビュー画面はJPEG形式で保存しました。
だから、上も下もそれなりにキレイでしょ。
このイメージスライスという機能は市販の画像処理ソフトには付いていることが多いので、手持ちのソフトに、この機能がないか探してみまひょ。
フリーソフトでは
画文作文というツールが、簡易イメージスライサーとして利用できます。
またWeb用途としてPNG形式、可逆圧縮できるというJPEG2000という形式もあることはあるけど、、GIF,JPEGほどには使われてマセン。
- 専門的な事が こんなに有るんですね
あのもやもやは ノイズだったんだあ 自分で撮った画像で
ノイズが入った物があったんですが 成る程・・・
知ってるのと知らないのとでは 違ってきますよねえ
何時も 詳しい説明を有り難うございます。
-- ようち (2006-06-11 00:50:16)
- ようちさん→
こういう記事が少しでもみんなの役に立てばいいなあと思って書きました。
自分で描いた絵を保存するときも、どの形式を選べばいいかで、結果はかなり違ってきますんで。
画像のダイエット法は、だらだらあみぐるみ猫集会所のような画像掲示板に画像をアップするときにも、役に立つと思うんです～。
-- うらん (2006-06-11 11:59:11)
カテゴリ: [
インターネット] - &trackback() - 2006年06月10日 20:19:03
#blognavi
最終更新：2006年06月11日 11:59
