- ベストアンサー
web制作で画像がぼやける問題について
- web制作において、画像がぼやける問題に悩んでいます。
- イラストレーターで作成した地図画像が保存する度にぼやける箇所が変わるため、混乱しています。
- 写真画像もjpegで保存すると少しぼけてしまうため、どのような処理をすれば画像のクオリティーを保つことができるか知りたいです。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
勝手に減色されるために起きている と推測されます。 Web用PNGで保存すると 使用色数は256色に抑えられます。 そのためそれ以上の色数を使っていると 勝手に色数が減らされるのでこの現象が発生しているはずです。 ではどうすればいいか ・最初から256色の画像を用意すればいい のです。 http://help.adobe.com/ja_JP/Illustrator/14.0/WSEFB85FE0-1C50-4b02-8392-D30DF1962EF5.html このへんの ・GIF および PNG-8 最適化オプション ・GIF および PNG-8 画像のカラーテーブルのカスタマイズ 辺りを参考にしてください。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ディスプレイでの表示と印刷は分けて考えること。 地図など淡色ないし色数が少ないものは、そのままの色数で保存すること。 ディスプレイでは、Windowなら96dpiで計算してそれを表示します。(Macは72dpi) 印刷を想定されるなら、通常は200dpiから300dpiを想定すれば良いでしょう。(写真並みに高解像度なら600dpiとか)そのため、ディスプレイで表示されるサイズの２,３倍、もしくは６倍程度で作成して、HTML上でサイズを指定します。<img src="[URL]" width="300" height="200">なら、900×600ピクセルあたりで作成する。 ただし、ブラウザが破壊的に縮小するため、ぼやけます。それを防ぐためには画像を背景にし、スタイルシートで変更すると良いですが、印刷時に背景を伊刷する設定をしなければならない。スタイルシートで画像を置き換える方法もありまずが、古いブラウザは対応していない。
お礼
web用画像は表示させたいサイズで作っておくのがいいという曖昧な知識で作業していましたが、目的や用途によって工夫が必要なのですね… 色々ためしてみます。大変勉強になりました。 どうもありがとうございました！
２種類のスタイルシートの活用という手段もあります． １．普段のブラウジングでは， 閲覧用スタイルシートを使って， 閲覧用の軽い画像が表示されるように設定します． ２．印刷用スタイルシートを併用すると， プリントアウト時には，プリントアウトされる様に， 印刷しても綺麗なファイルサイズが若干大きめの画像に置き換わるように指定すればいいのではないでしょうか．
お礼
なるほど…！ まだまだ勉強中で分からない事だらけですが、試してみます。 ありがとうございました！
- qualheart
- ベストアンサー率41% (1451/3486)
Web用に作成した画像をプリントアウトでもきれいに見えるクオリティーに保つのは不可能ですよ。 pngでもjpegでも、画像は必ず画面サイズにあわせて解像度が72dpiの画像で保存されます。 つまり、原寸で印刷すれば解像度が72dpiの画質で必ず印刷されるので、ぼけて当然です。 これは、画面上の解像度が72dpiになっている以上仕方のないことです。 もし印刷でも品質良くしたければ、画像そのものを大きく作って、HTML上では縮小して貼り付けることです。 この場合、元々大きな72dpiの画像を縮小していることになりますから、HTMLをそのまま印刷すると画像が綺麗に出る可能性があります。（縮小していることで、解像度が高くなりますから） ご参考まで。
お礼
正直PNGやGIF形式に関して全く知識がなかったのでとても参考になりました。 教えていただいたサイトは今後も役立ちそうです。 ありがとうございました！