ウェブアートデザイナーを使って画像処理

質問

ウェブアートデザイナーを使って画像や文字を自己流で編集してホームページにアップしたんですが、ホームページに載せたときにドットが目立ってしまいます。編集時にはきれいなのに・・・。jpgでやったからですかね？きれいにアップできる方法を教えてください。

回答No.2

ORUKA1951

JPEG ( http://ja.wikipedia.org/wiki/JPEG )は、写真など色数が多い画像に適したフォーマットです。
　簡単に言うと、色や明度の変化が少ない部分はデータ量を少なくして、そうでない緻密な部分はデータ量を増やしてデータとして保存します。
　そのため青空などの一様な部分は島状になったり、俊敏な境界線部分の周囲にモスキートノイズと呼ばれる汚れた部分ができます。圧縮率を下げて保存すればこれらはある程度改善されますが、完全ではなく、またデータ量が大きくなります。
　一方のGIF ( http://ja.wikipedia.org/wiki/Graphics_Interchange_Format )やPNG ( http://ja.wikipedia.org/wiki/Portable_Network_Graphics )は、イラストやロゴなど均一な色が多い場合に適しています。

　まず、あなたの処理した画像が「写真」なのか「イラスト」なのかで、画像形式を決めてください。たとえJPEGでも圧縮率を高くしすぎるとブロック状になります。

　次に画像サイズですが、ブラウザで表示させる場合は、実際の幅(ピクセル)幅と同じか、それより小さくする必要があります。(印刷を想定される場合は数倍のサイズで作成して、width,heightで小さく表示させます。--画像のファイルサイズが大きくなるので多用は禁物です)
　640px×480pxで作成された画像を<img src="" width="240" height="180" alt="">と表示させる。

　イラストデータでかつ、新しいブラウザだけを対象にするなら、SVG ( http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics )という拡大縮小で一切、ギザの現れないフォーマットもありますが、SVG 編集ソフト ( http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics#SVG_.E7.B7.A8.E9.9B.86.E3.82.BD.E3.83.95.E3.83.88 )にあるように、限られています。私はinkscapeを使います。

1) 画像フォーマットの見直し
2) 圧縮率の見直し
3) サイズの見直し

回答No.1

naokita

サイズ違いかな？
実際の保存サイズ：表示サイズを同じに。　100px×200pxとかの大きさを検証しましょう。

１、保存した画像ファイルをローカルでWクリックして見てみる。
　　（ファイルの大きさを確認。現物大100％で見る）
２、ローカルでHTMLファイルからの画像はどうなのか？
　　（このHTML IMGのwidth,heightの指定pxで大きさが変わっているのかも）
３、アップロードした画像URLだけを表示してみる。
　　（HTMLと画像が違うとか、間違ってURLを指定している。キャッシュを参照しているとか※スーパーリロード）

写真は.jpgの方が色彩豊かで軽い。　文字は.gifやpngの方がベタ色でシャキっと映える。
ケースバイケース。