初めてHPの制作をしています。
今まで画像はフォトショップやイラストレーターで.jpeg保存していたのですが、単色のロゴや文字、地図などは.png形式の方がきれいに表示されることに気付き変更しました。
ですが、イラストレーターで作った地図(主に線と文字、モノクロ)はイラレ→web用に保存→.pngで保存しても一部ぼやけてしまったり、保存する度にぼやける箇所が変わり、混乱しています。サイズも掲載するサイズで作ってwidthとheightを指定し100%で使っています。
.jpegで保存すると全体にぼんやりしてしまうので.pngの方がいいと思ったのですが…
さらに、それをプリントアウトしてみると結局は全体にぼやけてしまっている事が判明しました。
web上でもきれいに見えて、プリントアウトなどをした時にも画面に見えているクオリティーを保つには、どんな処理をすればいいんでしょうか…?
ちなみに、.jpegで保存した写真画像はweb上ではきれいに見えていますが、プリントアウトするとやっぱり少しぼけて見えます。
HP制作初心者で初歩的な質問ですが、どうぞよろしくお願いします!
No.1ベストアンサー
- 回答日時:
勝手に減色されるために起きている
と推測されます。
Web用PNGで保存すると
使用色数は256色に抑えられます。
そのためそれ以上の色数を使っていると
勝手に色数が減らされるのでこの現象が発生しているはずです。
ではどうすればいいか
・最初から256色の画像を用意すればいい
のです。
http://help.adobe.com/ja_JP/Illustrator/14.0/WSE …
このへんの
・GIF および PNG-8 最適化オプション
・GIF および PNG-8 画像のカラーテーブルのカスタマイズ
辺りを参考にしてください。
正直PNGやGIF形式に関して全く知識がなかったのでとても参考になりました。
教えていただいたサイトは今後も役立ちそうです。
ありがとうございました!
No.4
- 回答日時:
ディスプレイでの表示と印刷は分けて考えること。
地図など淡色ないし色数が少ないものは、そのままの色数で保存すること。
ディスプレイでは、Windowなら96dpiで計算してそれを表示します。(Macは72dpi)
印刷を想定されるなら、通常は200dpiから300dpiを想定すれば良いでしょう。(写真並みに高解像度なら600dpiとか)そのため、ディスプレイで表示されるサイズの2,3倍、もしくは6倍程度で作成して、HTML上でサイズを指定します。<img src="[URL]" width="300" height="200">なら、900×600ピクセルあたりで作成する。
ただし、ブラウザが破壊的に縮小するため、ぼやけます。それを防ぐためには画像を背景にし、スタイルシートで変更すると良いですが、印刷時に背景を伊刷する設定をしなければならない。スタイルシートで画像を置き換える方法もありまずが、古いブラウザは対応していない。
web用画像は表示させたいサイズで作っておくのがいいという曖昧な知識で作業していましたが、目的や用途によって工夫が必要なのですね…
色々ためしてみます。大変勉強になりました。
どうもありがとうございました!
No.2
- 回答日時:
Web用に作成した画像をプリントアウトでもきれいに見えるクオリティーに保つのは不可能ですよ。
pngでもjpegでも、画像は必ず画面サイズにあわせて解像度が72dpiの画像で保存されます。
つまり、原寸で印刷すれば解像度が72dpiの画質で必ず印刷されるので、ぼけて当然です。
これは、画面上の解像度が72dpiになっている以上仕方のないことです。
もし印刷でも品質良くしたければ、画像そのものを大きく作って、HTML上では縮小して貼り付けることです。
この場合、元々大きな72dpiの画像を縮小していることになりますから、HTMLをそのまま印刷すると画像が綺麗に出る可能性があります。(縮小していることで、解像度が高くなりますから)
ご参考まで。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PDF 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 1 2022/03/31 19:09
- その他(IT・Webサービス) 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 3 2022/03/31 19:11
- PDF 画像調整してスクショし保存した画像を印刷する方法 1 2022/03/31 18:42
- Visual Basic(VBA) 【VBA】Excelの特定範囲のセルを画像で保存したい 2 2023/01/25 13:06
- 写真・ビデオ 画像を合成すると片方がぼやけてしまいます 1 2022/09/21 20:42
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- 教えて!goo 「教えて!goo」や「Yahoo知恵袋」に投稿する際の画像についてお聞きします。 2 2023/05/23 12:53
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- Android(アンドロイド) 画像に透かしのウォーターマークを追加する方法について 1 2023/06/09 16:43
- Word(ワード) wordで画像&文書作成→pdf→pngに変換するにはどうすれば良いですか?有料ソフトを使いません。 3 2022/08/07 09:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スキャナーで取り込んだ画像を1...
-
既存画像(gif または png)の背...
-
黒文字のロゴを白抜きで使いた...
-
JW CAD の 挿入した画像への...
-
discordで画像保存できない
-
エクセルで、特定の画像へリン...
-
自作アイコンの背景が透明にな...
-
LibreOffice Calcで背景画像の...
-
写真を交互に複数枚切り替え表...
-
GIMPで回転について
-
GIFやJPGの画像が保存できない
-
画像生成AIで作成したTシャツを...
-
背景透明保持、ライブトレース
-
エクスプローラー サムネイル表...
-
InDesignスプレッドに含まれる...
-
PHPが絡んだサイトを編集する際...
-
フォトショップのモザイクって...
-
背景を動かないようにするには?
-
ディザとはなんですか?
-
JTrimでスキャンした画像の背景...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
2136×2848の画像を50...
-
フォトショップエレメント7 画...
-
ホームページビルダーで画像サ...
-
pdfファイルのサイズ縮小
-
HPに画像をアップすると粗く...
-
Jpegをテレビで見るときのサイズ
-
エクセルに画面のハードコピー...
-
・画像写真の貼り付け・・・
-
くるくる
-
イラストレータ jpeg 書き出...
-
web制作 画像がぼやける
-
イラレで作成したものをGIFに変...
-
写真の有効解像度を知る方法
-
ホームページに載せる写真のサ...
-
HPビルダーで写真を挿入すると
-
Word2002に貼り付けた後の画像...
-
フォトショ・最適な縮小方法とは?
-
ホームページビルダー表巾の固定
-
いいペイントソフトを教えてく...
-
HP掲載用写真データサイズにつ...
おすすめ情報