ＨＰに画像をアップすると粗くなりぼやける。

質問

お世話になります。
ＨＰ作成初心者です。

【使用ソフトなど】
イラストレーターVer9・フォトショップVer6・Win XP

【手順】
イラストレーターで絵を描いて、
文字等を入れ（アウトラインやアンチエイリアス加工をしています）
完成した画像をフォトショップで解像度を調節してから
「WEB用で保存（jpg/高画質）」を選択して保存し画像をアップ
しています。

HTMLでの画像サイズのタグは、小さな画像を大きく設定している訳ではないのですが（大きなサイズを小さくする事はあります）、画像がぼやけたり粗くなってしまいます。

初心者で、このサイトを見て色んな保存形式に変えてみました。
png形式でもダメでした。

手順は間違っているでしょうか？
宜しくお願いします。

回答No.1

dezimac · ベストアンサー

> 「WEB用で保存（jpg/高画質）」を選択して保存し
この時点ではぼけとかは気にならないですか？
Jpegは最高画質で保存しても少しはぼけます。
色数が少ない、ハッキリしたものならGIFで保存。
写真のような色数多いのはJpegで。

> 小さな画像を大きく設定している訳ではないのですが（大きなサイズを小さくする事はあります）
ブラウザにもよるけど、本来のサイズ以外で表示すると汚くなります。
小さいのを大きく見せるのはもちろん、逆に大きいのを小さくしてもです。
1/2や2倍のようなきっちりとしたサイズではなく、中途半端な拡大／縮小では特に顕著です。

Photoshopの画像解像度の【バイキュービック法】での拡大縮小するような高度な処理は行われていません。
ブラウザでは【ニアレストネイバー法】のような単純な方式で行われます。

面倒でも適切なサイズの画像を用意することをお勧めします。

補足

ご回答ありがとうございます。

＞この時点ではぼけとかは気にならないですか？
気にならないです。
アップすると一気に劣化というか。
粗くぼやけてしまいます。

＞Photoshopの画像解像度の【バイキュービック法】での拡大縮小
まだPhotoshopは慣れていませんが、上記の処理方法は
試していませんでした。

出社して再度上記アドバイスで試してみます！

ありがとうございます。

回答No.2

noname#235092

「WEB用に保存」をなぜPhotoshopでやっているのですか？
【手順】を拝見する限り、Photoshopは必要ないような気がします。

完成作品をIllustratorの表示倍率「100％」で表示させたときが、ブラウザで見える大きさです。
大きすぎたり小さすぎたりしたときはこの段階で希望の大きさに調整しておきます。
そしてその状態で「WEB用に保存」すればOKです。（PhotoshopではなくてIllustratorで。）
保存する直前に仕上がりが確認できます。

※【手順】にはありませんが、もし画像が配置してありそれがepsなら埋め込んでおきます。
（画像は解像度が不足しないように）
※周囲に不要なオブジェクトがあるときは「トンボ（トリムエリア）」を作成しておきます。

お礼

ご回答ありがとうございます。

色々やり方があるので、難しいです；；
こういうやり方もあるんですね！

勉強になりました。