フォトショで作成したＣＧをＨＰに綺麗な画像で載せたい。

質問

こんばんは。
今回はフォトショの事でご質問があります。

最近下手ながらもフォトショでイラストを描いています。
それをＨＰに載せようと思うのですが、
解像度が大きいとＨＰに載らないのでしょうか？

フォトショＥＬで３６０dpi作成して
Ｗｅｂ用に保存をクリックすると
かなり大きい画像が出ます。
よく聞くＨＰ用には７５dpi程度でいいと
ありますが、７５dpiにするとかなり画像が荒れて
質が落ちます。
よくＣＧサイトさんでは綺麗な画像のまま
ＨＰに載せられています。
そのように画像を綺麗なまま載せるにはどうしたら
いいのでしょうか？

●また、フォトショで作成した色と
Ｗｅｂ用に保存で保存した色とが異なる（くすむ）のは
なぜでしょうか？
くすまない方法などあるのでしょうか？

回答No.7

KenKen_SP

基本的には、PhotoShopで

1.　解像度は72～96に落とし、WEB表示の原寸ピクセルサイズにリサイズ
2.　ベタ塗りのイラストのように、グラデーション等の色階調に大きな変化がない物はGIF、階調が大きく、写真などはJPEG形式で保存
3.　JPEG保存の際には、圧縮率を高め（7～8）ぐらい

のような操作を行います。

モニタの表示解像度は72～96dpiが多いですから、WEB用途ですと、それ以上の解像度は無意味です。
仰るように、確かに解像度を落とすことで画像は荒れますが、モニタ表示の原寸までピクセルサイズを落とすことで、それほど目立たなくなるはずです。
また、HTMLのIMGタグにおいて、画像が本来もつサイズと異なるサイズで表示させると非常に荒れて見えます。この意味からも、実際に表示する原寸サイズに予めリサイズしてやると吉です。

＞Ｗｅｂ用に保存で保存した色とが異なる（くすむ）のはなぜでしょうか？

機種間（WinやMac）やブラウザの違いによって、表現できる色が異なります。そのため、色の表現がある程度近くなるよう互換性を保つために、WEBセーフカラーというカラーパレットがあります。これは、JPEGで発色できる色数には全然及びません。「WEB用に保存」の際に、使用するカラーパレットがWEBセーフカラーになっているためではないでしょうか？

回答No.6

shunten

画像を綺麗なままでHPにUPする為に、私は下の方法をとります。

一つは「イメージ」→「画像解像度」の中でピクセル寸法（あるいはドキュメントサイズ）を落としすぎない事。

もう一つは同じ場所で調整する事ですが、解像度をあまり落とさないで保存する事。

以上は「web用に保存」を使わないで単に「保存」をクリックする場合です。

HPの為に簡単な方法は「web用に保存」を使う事ですが、「web用に保存」の画面で画質のスライダーを高め（60%以上）に設定する。

HPに繊細な画像をUPすると言う目的に沿って言うなら、フォトショ以外で出来る事ですが、ホームページのその場所に貼り付けたい大きさよりは大きめの画像サイズのまま貼りつけた上でソース（HTML)を開いて編集します。
例えば大きいままで貼りつけたA画像のソースが
<IMG src="A.jpg" width="600" height="400　border="0">とするなら
<IMG src="A.jpg" width="300" height="200　border="0">と言うように幅と高さを
小さくしてやりますと画像の質を保ったままで絵は小さくなります。これは丁度原画をコピー機に掛ける時に使う拡大縮小と同じ意味です。一般的なPCの画面は1024ピクセル＊768ピクセルですから数字で打ち込む時の大きさはそれを基準にして考えれば良いと思います。なお、一部にはまだ800*600の画面を使われる人もいるようですから、それらの人にもちゃんと見える画像にするかどうかは考えて決める必要があります。

どの方法を取るにしても余り画質を上げると表示に時間が掛かりますから閲覧者に嫌われます。私はこれだけは是非、という画像を100kb程度に設定してそれ以外は20～40kbくらいで作っています。なお、画像はほとんどが表示幅500ピクセル、高さは300ピクセル程度です。

最後にjpgで保存するかgifにするかはその画像に求めたい画質とその重さ（表示に掛かる時間）を比較検討して決めています。他の回答者が仰っておられるようにgifは色数が減りますから絵の印象は変わるかもしれません。一方jpgの欠点は何度も加工をすると荒れることです。psdのままで作り上げ、決定稿になったときに初めてjpgに落とせばよいと思います。

回答No.5

koma1000nin

jpegの方が色がきれいだというのいは嘘です。
いちばんきれいな色は、作成した時の画面上の色か、またはbmp形式の画像ファイルです。
さて、画面上で作ったＣＧをjpeg，gif，bmp，tiff，png等の形式で保存するとき、それぞれのファイル形式の特徴がモロに反映されて、再生したときに色が変わって見えることがあります（たいてい変わります）。
gifは256色の制限があるので、グラデーションカラーを無制限に使用したりすると、256色以上の色は他の似たような色で近似される結果、再生したときに汚くみえることがあります。
jpegは色の変化を関数近似し、人間の視覚を騙しているので、実際は色の誤差を含んでいるにもかかわらずちゃんと見えているだけです。騙すからには沢山の色を使用したほうが良いわけで、少ない色数の画像をjpeg形式で保存したりすると、再生したときにとても汚くなります。
bmp形式の画像は作ったとおりに色を再現してくれますが、ファイルサイズがべらぼうに大きくなるのが難点です。
256色以下のＣＧクラスならgif、それ以上の写真クラスならjpegを使い分けられたほうがよろしいでしょう。
画像をＷebに上げたとき、色くすみするのは宿命です。あるていどの妥協はして下さい。
画像をきれいにする手法はいろいろあり、モノによって使い分けているのでなんとも回答できませんが、グラフィックスのギザギザ表示部分（ジャギーといいます）を消し去ってスムーズにするだけでもきれいに見えるから不思議です。
もう少し具体的に、どのように「きれい」なのかを述べられるとより良い回答が集まると思います。

回答No.4

beam-

フォトショって何ですか？

Web用に保存したらWinなら96dpi、Macなら72dpiに自動的にピクセル解像度を合わせてくれますが、決して大きくなることはありません。

大きくなるようでしたら操作方法を間違っています（Web用に保存にはサイズ変更を設定する部分がありませんので、それ以前に間違っているのでしょう）

Web用に保存は、JPEG、GIF、PNGそれぞれの圧縮率の違いを見ながら確認しながら絵が汚くならない範囲を確認できますので、その中から最適な保存形式や圧縮率を選らんでください。

色の違い
　普通のモニターはフルカラーですが、Web用ということでどんなモニターでも見れるように、減色しています。保存時の設定でどのようなモニター環境向けにするか設定できますので、調節してみてください。

Web用に保存時に右クリックすれば、項目が色々出てきます。ちなみに自分でＯＫでも、他人には自分が見ているようには見えないですから設定には注意してください。

回答No.3

renton

表示の倍率を100％にして見ても荒れて見えますか？

Photoshopでの拡大縮小も50％、25％といった具合に行うと荒れが出にくいです。

Web向けで考えるなら、解像度はdpiでがなく、ピクセルで考えた方がいいかもしれません。
ピクセル数は大きくても1280×1024～800×600前後に抑えておくと見やすいはずです。
HPに貼り付けた際に、元の画像よりも拡大縮小して配置するとあれて見えるので、JPEGで保存したその解像度のまま変更せずに使用するのがBestです。

GIFは256色、JPEGはフルカラーなので、サムネイルなどで使用するのでない限りJPEGがいいと思います。
JPEGをWeb用に保存で保存する際に画質の値を高く取ると元の画質に近く、綺麗に保存できます。画質が高いとデータ量がも大きくなるので、荒れが目立たない程度の画質で保存するのがいいと思います。

回答No.2

noname#8708

基本的にはJPGの方が綺麗です。（GIFは256色）
ちなみに360dpiとのことですがピクセル（解像度）はどのくらいでしょうか？
（例えば1024*768とか）

回答No.1

noname#8708

画像形式は「jpg」でしょうか？

補足

はいＨＰにＵＰ用なので
jpgかgifにしてます。
jpgとgifどちらが綺麗になるのでしょうか？？

大抵はjpgにしてしまうのですが・・。
初心者でスミマセン。。。