ホームページ用画像の保存形式

質問

現在、趣味の音楽バンドのホームページを作ろうと試行錯誤をしている者です。ホームページに関しては全く知識がないド素人状態からのスタートなので混乱しています、諸先輩方のご意見・アドバイスをお待ちしています。

自分は仕事でDTPをやっているのでパソコンはmacG4クイックシルバーを使用しています。
書籍やホームページを参考に試行錯誤を繰り返し、Dreamweaver8とFlash8にて大体の形は作成しました。
macのFirefoxとSafariではDreamweaver8で作った通りに（正しく作れているかはさておきw）ブラウザでもきれいに表示されるようできました。

ですが、友達の家に遊びにいった時、windowsのInternet Exprolarで見たら画像を貼付けたところが変な風になっててガッカリしてしまいました。

で、今まさにまた試行錯誤を繰り返しているところなのですが、どうやら画像保存形式を全部PNGで保存した事が原因な気がします。

自分が作ったホームページは背景にパターン用画像を敷き詰め、その上に自分でPhotoshopで作ったゼリーっぽい角アールのボタンや立体の白色タイトル文字画像を背景が透けた状態で置きたかったのですが、PNG保存で置いたら透けると思い、そうしたんですが、IEでは透けて表示されないみたいなんです。

で、多分GIF保存の画像に変えれば良いんじゃないかと思っているんですが、GIF保存はなんか角アールのボタンがフチがギザギザになったり、タイトル画像もなんか汚い気がするんです。
またGIF保存では白色の文字を表現できなかったりしませんか？
もう、プチパニックですwどうしたら良いんでしょうか？

そもそも、作り方間違ってるんでしょうか？
なんか自分は文章が下手なので、この説明でちゃんと伝わるか分かりませんが、どなたかお分かりになる方は教えてください。
よろしくお願いします。

回答No.1

dezimac · ベストアンサー

Windows版IEは、w3m推奨の標準よりも優れた独自仕様満載の素晴らしいブラウザです。
他のブラウザではレイアウト崩れたり、表示出来ないような滅茶苦茶なのでもちゃんとそれっぽく表示してくれます。
その証拠に多くの人が使っていますね（単にWindowsに標準付属しているからだけだが）
反面、w3m推奨の作りにするとレイアウト崩れるとか、アルファチャンネルを含む（半透明）PNGを正しく表示出来なかったりします。

冗談はこれくらいにして、
IEは半透明なPNG（PNG-24形式）には対応していません。
GIF同様の1色のみ透過させるPNG-8には対応してます。

GIFは256色までしか扱えず、かつ透明に出来るのは任意の1色のみです。
背景を透過させるとどうしてもアンチエイリアス処理された曲線部分がガタガタになります。
背景が単調なら楽なのですが、Photoshop等でWeb保存するときにのオプションでマットカラーにページの背景画像と近い色をしてして下さい。
http://web.kyoto-inet.or.jp/people/hikeda/justnet/smu/smu06A/smu06A.html
http://www1.linkclub.or.jp/~nobuki/tips/matcolor.html
http://piro.sakura.ne.jp/pics/tips/p0006.html

> GIF保存では白色の文字を表現できなかったりしませんか？
何の問題もなく表現できます。
ソフトを使いこなせてないだけです。
Photoshopで普通に背景透明（無し）、白文字の画像でも作ってWeb用に保存でGIF保存してみて下さい。

↓でWindows版IE等様々なブラウザでどう表示されるか知る事で来ます。
http://browsershots.org/

お礼

超わかりやすい説明ありがとうございます。
すっごく参考になりました。
おっしゃる通りにマットカラーを背景に近い色に設定したら、
ガタガタだった角アールのボタンもすっごくきれいに表示出来ました。
白色の文字も立体表現できました。
WEB完全にド素人なので勉強になります。
アドバイスホントにありがとうございました。