こんばんは。
今回はフォトショの事でご質問があります。
最近下手ながらもフォトショでイラストを描いています。
それをHPに載せようと思うのですが、
解像度が大きいとHPに載らないのでしょうか?
フォトショELで360dpi作成して
Web用に保存をクリックすると
かなり大きい画像が出ます。
よく聞くHP用には75dpi程度でいいと
ありますが、75dpiにするとかなり画像が荒れて
質が落ちます。
よくCGサイトさんでは綺麗な画像のまま
HPに載せられています。
そのように画像を綺麗なまま載せるにはどうしたら
いいのでしょうか?
●また、フォトショで作成した色と
Web用に保存で保存した色とが異なる(くすむ)のは
なぜでしょうか?
くすまない方法などあるのでしょうか?
A 回答 (7件)
- 最新から表示
- 回答順に表示
No.7
- 回答日時:
基本的には、PhotoShopで
1. 解像度は72~96に落とし、WEB表示の原寸ピクセルサイズにリサイズ
2. ベタ塗りのイラストのように、グラデーション等の色階調に大きな変化がない物はGIF、階調が大きく、写真などはJPEG形式で保存
3. JPEG保存の際には、圧縮率を高め(7~8)ぐらい
のような操作を行います。
モニタの表示解像度は72~96dpiが多いですから、WEB用途ですと、それ以上の解像度は無意味です。
仰るように、確かに解像度を落とすことで画像は荒れますが、モニタ表示の原寸までピクセルサイズを落とすことで、それほど目立たなくなるはずです。
また、HTMLのIMGタグにおいて、画像が本来もつサイズと異なるサイズで表示させると非常に荒れて見えます。この意味からも、実際に表示する原寸サイズに予めリサイズしてやると吉です。
>Web用に保存で保存した色とが異なる(くすむ)のはなぜでしょうか?
機種間(WinやMac)やブラウザの違いによって、表現できる色が異なります。そのため、色の表現がある程度近くなるよう互換性を保つために、WEBセーフカラーというカラーパレットがあります。これは、JPEGで発色できる色数には全然及びません。「WEB用に保存」の際に、使用するカラーパレットがWEBセーフカラーになっているためではないでしょうか?
No.6
- 回答日時:
画像を綺麗なままで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
- 回答日時:
jpegの方が色がきれいだというのいは嘘です。
いちばんきれいな色は、作成した時の画面上の色か、またはbmp形式の画像ファイルです。
さて、画面上で作ったCGをjpeg,gif,bmp,tiff,png等の形式で保存するとき、それぞれのファイル形式の特徴がモロに反映されて、再生したときに色が変わって見えることがあります(たいてい変わります)。
gifは256色の制限があるので、グラデーションカラーを無制限に使用したりすると、256色以上の色は他の似たような色で近似される結果、再生したときに汚くみえることがあります。
jpegは色の変化を関数近似し、人間の視覚を騙しているので、実際は色の誤差を含んでいるにもかかわらずちゃんと見えているだけです。騙すからには沢山の色を使用したほうが良いわけで、少ない色数の画像をjpeg形式で保存したりすると、再生したときにとても汚くなります。
bmp形式の画像は作ったとおりに色を再現してくれますが、ファイルサイズがべらぼうに大きくなるのが難点です。
256色以下のCGクラスならgif、それ以上の写真クラスならjpegを使い分けられたほうがよろしいでしょう。
画像をWebに上げたとき、色くすみするのは宿命です。あるていどの妥協はして下さい。
画像をきれいにする手法はいろいろあり、モノによって使い分けているのでなんとも回答できませんが、グラフィックスのギザギザ表示部分(ジャギーといいます)を消し去ってスムーズにするだけでもきれいに見えるから不思議です。
もう少し具体的に、どのように「きれい」なのかを述べられるとより良い回答が集まると思います。
No.4
- 回答日時:
フォトショって何ですか?
Web用に保存したらWinなら96dpi、Macなら72dpiに自動的にピクセル解像度を合わせてくれますが、決して大きくなることはありません。
大きくなるようでしたら操作方法を間違っています(Web用に保存にはサイズ変更を設定する部分がありませんので、それ以前に間違っているのでしょう)
Web用に保存は、JPEG、GIF、PNGそれぞれの圧縮率の違いを見ながら確認しながら絵が汚くならない範囲を確認できますので、その中から最適な保存形式や圧縮率を選らんでください。
色の違い
普通のモニターはフルカラーですが、Web用ということでどんなモニターでも見れるように、減色しています。保存時の設定でどのようなモニター環境向けにするか設定できますので、調節してみてください。
Web用に保存時に右クリックすれば、項目が色々出てきます。ちなみに自分でOKでも、他人には自分が見ているようには見えないですから設定には注意してください。
No.3
- 回答日時:
表示の倍率を100%にして見ても荒れて見えますか?
Photoshopでの拡大縮小も50%、25%といった具合に行うと荒れが出にくいです。
Web向けで考えるなら、解像度はdpiでがなく、ピクセルで考えた方がいいかもしれません。
ピクセル数は大きくても1280×1024~800×600前後に抑えておくと見やすいはずです。
HPに貼り付けた際に、元の画像よりも拡大縮小して配置するとあれて見えるので、JPEGで保存したその解像度のまま変更せずに使用するのがBestです。
GIFは256色、JPEGはフルカラーなので、サムネイルなどで使用するのでない限りJPEGがいいと思います。
JPEGをWeb用に保存で保存する際に画質の値を高く取ると元の画質に近く、綺麗に保存できます。画質が高いとデータ量がも大きくなるので、荒れが目立たない程度の画質で保存するのがいいと思います。
No.2
- 回答日時:
基本的にはJPGの方が綺麗です。
(GIFは256色)ちなみに360dpiとのことですがピクセル(解像度)はどのくらいでしょうか?
(例えば1024*768とか)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 写真・ビデオ 画像を合成すると片方がぼやけてしまいます 1 2022/09/21 20:42
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- Excel(エクセル) iphonからone driveに保存してあるExcelを閲覧すると表示の仕方がちがうデータ 2 2022/12/21 13:51
- Photoshop(フォトショップ) Photoshopの画像が重すぎるので軽くしたいです 7 2022/05/13 20:13
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- その他(プログラミング・Web制作) ホームページビルダー16で画像を保存したら画像がトップページ上に沢山出てきてしまいます 1 2022/12/06 14:50
- Web・クリエイティブ フリーランスでフードライターを目指している者です。 色々なお店に取材に行って、写真を撮り、サイトに少 4 2023/06/23 06:59
- 画像編集・動画編集・音楽編集 画像ファイル作成について 2 2023/06/27 22:28
- その他(メイク・美容) 鼻の形 名称、綺麗にする方法 1 2023/08/12 08:38
- Windows 10 explorerをedgeで開く方法 2 2022/06/05 14:59
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
イラストレータの画像をJPG形式...
-
Bitmapの256色と24ビットの違い
-
イラストレータ→JPEGに→ピ...
-
jpgよりpdfの方が軽い?
-
フォトショップエレメントで作...
-
画像形式のGIFについて教えてく...
-
.jpg画像をなるべく劣化させず...
-
クリップボード上で画像圧縮で...
-
フォトショで作成したCGをH...
-
スキャンした画像(モノクロ)を...
-
jpg→bmp変換時に、容量を取...
-
pdfを劣化させずにjpegに変換す...
-
jpg画像の再保存する方法をお教...
-
フォトショグレー形式にイラレ...
-
Photoshopで写真のpngをjpgに変...
-
アナログ画像をGifにしてリサイズ
-
PDFファイルの文字色を調節する...
-
イラストレーターに取り込んだ...
-
保存した画像の余白カットしたい
-
【アイコンの背景色が黒塗りに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Bitmapの256色と24ビットの違い
-
jpgよりpdfの方が軽い?
-
Photoshopで写真のpngをjpgに変...
-
イラストレータの画像をJPG形式...
-
pdfを劣化させずにjpegに変換す...
-
jpg→bmp変換時に、容量を取...
-
画像形式のGIFについて教えてく...
-
イラストレータ→JPEGに→ピ...
-
複数のJPEG画像を劣化なしで連...
-
JPEGの編集(文字入れなど)を...
-
photoshopで切り取った画像の保...
-
スクリーンショット画像の画質...
-
epsで保存されている画像を高画...
-
JPEG画像を加工後保存する...
-
JPGの背景をうまく透明にできな...
-
.jpg画像をなるべく劣化させず...
-
画像加工すると画像が粗くなります
-
photoshopで作成した画像文字(j...
-
イラストの保存時 GIFにすると...
-
EPSファイルを軽くする方法は?
おすすめ情報