-PR-
  • 困ってます
  • 質問No.7085021
解決
済み

web制作 画像がぼやける

  • 閲覧数12945
  • ありがとう数6
  • 気になる数0
  • 回答数4
  • コメント数0

お礼率 94% (16/17)

初めてHPの制作をしています。

今まで画像はフォトショップやイラストレーターで.jpeg保存していたのですが、単色のロゴや文字、地図などは.png形式の方がきれいに表示されることに気付き変更しました。
ですが、イラストレーターで作った地図(主に線と文字、モノクロ)はイラレ→web用に保存→.pngで保存しても一部ぼやけてしまったり、保存する度にぼやける箇所が変わり、混乱しています。サイズも掲載するサイズで作ってwidthとheightを指定し100%で使っています。
.jpegで保存すると全体にぼんやりしてしまうので.pngの方がいいと思ったのですが…
さらに、それをプリントアウトしてみると結局は全体にぼやけてしまっている事が判明しました。

web上でもきれいに見えて、プリントアウトなどをした時にも画面に見えているクオリティーを保つには、どんな処理をすればいいんでしょうか…?
ちなみに、.jpegで保存した写真画像はweb上ではきれいに見えていますが、プリントアウトするとやっぱり少しぼけて見えます。

HP制作初心者で初歩的な質問ですが、どうぞよろしくお願いします!
  • 回答数4
  • 気になる数0

質問者が選んだベストアンサー

  • 回答No.1
レベル14

ベストアンサー率 34% (1450/4144)

勝手に減色されるために起きている
と推測されます。
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 画像のカラーテーブルのカスタマイズ
辺りを参考にしてください。
お礼コメント
szk04

お礼率 94% (16/17)

正直PNGやGIF形式に関して全く知識がなかったのでとても参考になりました。
教えていただいたサイトは今後も役立ちそうです。
ありがとうございました!
投稿日時 - 2011-10-21 17:17:30
  • ありがとう数0
-PR-
-PR-

その他の回答 (全3件)

  • 回答No.2
レベル14

ベストアンサー率 41% (1450/3485)

Web用に作成した画像をプリントアウトでもきれいに見えるクオリティーに保つのは不可能ですよ。 pngでもjpegでも、画像は必ず画面サイズにあわせて解像度が72dpiの画像で保存されます。 つまり、原寸で印刷すれば解像度が72dpiの画質で必ず印刷されるので、ぼけて当然です。 これは、画面上の解像度が72dpiになっている以上仕方のないことです。 もし印刷でも品質良くしたければ、画像そのものを大きく作 ...続きを読む
Web用に作成した画像をプリントアウトでもきれいに見えるクオリティーに保つのは不可能ですよ。

pngでもjpegでも、画像は必ず画面サイズにあわせて解像度が72dpiの画像で保存されます。
つまり、原寸で印刷すれば解像度が72dpiの画質で必ず印刷されるので、ぼけて当然です。
これは、画面上の解像度が72dpiになっている以上仕方のないことです。

もし印刷でも品質良くしたければ、画像そのものを大きく作って、HTML上では縮小して貼り付けることです。
この場合、元々大きな72dpiの画像を縮小していることになりますから、HTMLをそのまま印刷すると画像が綺麗に出る可能性があります。(縮小していることで、解像度が高くなりますから)

ご参考まで。
  • ありがとう数0
  • 回答No.3
レベル11

ベストアンサー率 56% (175/312)

2種類のスタイルシートの活用という手段もあります. 1.普段のブラウジングでは,  閲覧用スタイルシートを使って,  閲覧用の軽い画像が表示されるように設定します. 2.印刷用スタイルシートを併用すると, プリントアウト時には,プリントアウトされる様に, 印刷しても綺麗なファイルサイズが若干大きめの画像に置き換わるように指定すればいいのではないでしょうか. ...続きを読む
2種類のスタイルシートの活用という手段もあります.

1.普段のブラウジングでは,
 閲覧用スタイルシートを使って,
 閲覧用の軽い画像が表示されるように設定します.

2.印刷用スタイルシートを併用すると,
プリントアウト時には,プリントアウトされる様に,
印刷しても綺麗なファイルサイズが若干大きめの画像に置き換わるように指定すればいいのではないでしょうか.
お礼コメント
szk04

お礼率 94% (16/17)

なるほど…!
まだまだ勉強中で分からない事だらけですが、試してみます。
ありがとうございました!
投稿日時 - 2011-10-21 17:12:04
  • ありがとう数0
  • 回答No.4
レベル14

ベストアンサー率 45% (5060/11031)

ディスプレイでの表示と印刷は分けて考えること。 地図など淡色ないし色数が少ないものは、そのままの色数で保存すること。 ディスプレイでは、Windowなら96dpiで計算してそれを表示します。(Macは72dpi) 印刷を想定されるなら、通常は200dpiから300dpiを想定すれば良いでしょう。(写真並みに高解像度なら600dpiとか)そのため、ディスプレイで表示されるサイズの2,3倍、もしくは6倍程度で ...続きを読む
ディスプレイでの表示と印刷は分けて考えること。
地図など淡色ないし色数が少ないものは、そのままの色数で保存すること。
ディスプレイでは、Windowなら96dpiで計算してそれを表示します。(Macは72dpi)
印刷を想定されるなら、通常は200dpiから300dpiを想定すれば良いでしょう。(写真並みに高解像度なら600dpiとか)そのため、ディスプレイで表示されるサイズの2,3倍、もしくは6倍程度で作成して、HTML上でサイズを指定します。<img src="[URL]" width="300" height="200">なら、900×600ピクセルあたりで作成する。
 ただし、ブラウザが破壊的に縮小するため、ぼやけます。それを防ぐためには画像を背景にし、スタイルシートで変更すると良いですが、印刷時に背景を伊刷する設定をしなければならない。スタイルシートで画像を置き換える方法もありまずが、古いブラウザは対応していない。
お礼コメント
szk04

お礼率 94% (16/17)

web用画像は表示させたいサイズで作っておくのがいいという曖昧な知識で作業していましたが、目的や用途によって工夫が必要なのですね…
色々ためしてみます。大変勉強になりました。
どうもありがとうございました!
投稿日時 - 2011-10-21 17:10:30
  • ありがとう数0
  • 回答数4
  • 気になる数0
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


-PR-

ピックアップ

-PR-
ページ先頭へ