イラストをスキャナーで取り込んでHPに載せたい。でも粗くなってしまいます。

Question

ペンで描いたイラスト（白黒）をホームページに載せようとしていますが、どうしても画像が粗くなってしまいます。方法が間違っているのでしょうか？ちなみに今まで自分でやった方法ではこんな感じです。私のやってる手順を書きます。
●スキャナーでイラスト（B5より少し小さめ）を取り込む。●ソフトはPhoto　sutudio 2000 というフリーのソフトです（ウィンドウズXPに入ってたと思います）●解像度を７５dpiでスキャンすると、イメージのサイズはだいたい６００×４００くらいのサイズになり、重さは７０ｋｂ～くらいです。●これだと大きいのでイメージサイズの変更をします。希望のサイズは４８０×３２０くらいに小さくしたいのです。だいたい７５％くらい縮小します。●するとここで画像が粗くなります。●そしてこのままだと重い（７０ｋｂ）ので、３０ｋｂくらいに減らすために、ホームページビルダーのウェブアートデザイナーを立ちあげます。●画像を開き、WEB保存のボタンを押して、画像を見ながら数値を７５から下げていきます。●だいたい４０くらいの値で保存してホームページの載せます。●重さは３０ｋｂくらいになって軽くなるのですが、イメージのサイズを変更した時点で小さくなって＆粗くなります。●保存形式はJPEGにしています。何か間違っていますでしょうか？最初のスキャナーで取り込む際の解像度をもっと上げればようのでしょうか？たいへん初心者ですので、どうぞよろしくお願いします。

fab76 · Accepted Answer

ペンで描いたモノクロのイラストで塗りつぶしはあってもハーフトーン（グラデュエーション）が無いもの、と仮定してポイントを書き出します

【データ作成時】

・スキャンした原寸でWebにアップするのであれば72～96ppiでかまわないのですが、縮小、減色をするのであればもう少し解像度を上げてください。Web用なので150～200ppiあればよいと思います、カラーデータでなければグレースケール（256階調）を利用してください。保存形式はソフトのオリジナル形式、またはBMPにします（Jpegでは加工→保存ごとデータの劣化が起こります）

【解像度の変更時】

・GIMPでもPhoto sutudio 2000 でもいいので狙ったサイズまで画像解像度を下げます、"再サンプル"、"リサンプル"といった項目があればチェックを入れてください。もちろん縦・横比は保った状態です。

【減色時】

・グレースケールでも256階調あるのでペン画といってもかすれた部分などにそれぞれを割り当ててしまうので使用する色数（この場合は階調数）を少なくしていきます。ウェブアートデザイナーでそれらの設定（WEB保存）があるのかはこちらでは判りませんが16階調もあれば充分だと思います。"使用色"、"パレット"などの表記はないでしょうか？

【保存時】

・ハーフトーンなどで階調の表現をしないものならGIFを、階調があればJpegを選んでください。


＃ こちらでも下絵として取り込んでおいた単純なペン画（モノクロ）でテストしました、下絵なので取り込みは何も考えずRGB/300ppiという巨大なファイルです。
（1196*1624　Windows上で222kb）

解像度を300*407→RGBからグレースケール→色数を6色に（ディザなし）でGIF画像とすると4.14kbまでサイズを下げられます、汚くはないですよ。試してみてください

jdash · Answer

すみません、No.8の回答を書き間違えました…。

です。申し訳ないです。

jdash · Answer

大きい解像度のもの（Ａ）と、小さい解像度のものを用意しておいて、ブログの本文には

というように書けばあんまり解像度を気にしなくても良いのかも。

phobos · Answer

私は画像ビューアや画像形式変換やサイズ変更にはフリーソフトのマルチメディアビューア「IrfanView32」を使っています。けっこう高速・高機能で簡単に行えます。gifファイルが扱えるのが助かります。
( IrfanView日本語版 http://www8.plala.or.jp/kusutaku/iview/ )

参考までに、いま手元にある白黒イラストの256色グレースケールスキャン画像(GIF形式)をこのソフトで縮小してみましょう。（色数や階調によって違ってくるので、ひとつのサンプルです）

元ファイル＝907×756ピクセル、グレースケール256色、275KB
(1)リサイズ：72dpiで「今の半分」(=453×378ピクセル）、にすると→62KB
(2)減色：16色→34KB、８色→25KB、４色→16KB、２色→10KB 
　になります。この画像の場合は８色まではＯＫでしたが４色にすると明らかに階調が粗くなりました。

なお、原画をスキャンするときは
(1)解像度を上げて(300～600dpi）取り込むべきです。そうしておけば後で縮小処理するときに、よりきれいな画像が作れます。Web表示用に縮小するときに72dpiに落とします。
(2)グレースケールで取り込めば元画像ファイルは不必要に大きくならずにすみます。

以上、参考になれば幸いです。

参考URL：http://www8.plala.or.jp/kusutaku/iview/

tokpy · Answer

#4です。

> ●画像メニューから画像拡大縮小を選んで画像のサイズを指定（だいたい３００×３００くらい）
> ●ついでに下にある水平解像度と垂直解像度の値を７２から３０くらいにさげて、・・・

Web表示用の画像の場合は，ピクセル数で大きさを指定するようにします。解像度（dpi値）は使いません。dpi値は，「ドット（ピクセル）÷インチ」という意味です。詳しい話は省略しますが，普通はピクセル数かdpi値のどちらかのみを指定します。一方を指定すればもう一方の値は自動的に決まる（または，無意味な場合もある）からです。

> でも、気のせいか、GIMP2（とWEBアートデザイナーで低くしたもの）の方が画像がきれいでした。

JPEGは写真のような画像に向いている形式ですので，画像が劣化する（エッジがぼやける）のは避けられません。イラストのような画像の場合は，TIFFなどのほうが良いですが，４８０×３２０のサイズで30KB以下にするのは無理かもしれません。
ちなみに480×320ピクセルのビットマップ画像は，カラーで450KBあります。それを30KB以下にするというのは「データ量を15分の1以下にしたい」ということですから，それなりに画質が劣化するのは当たり前です。
http://www.asahi-net.or.jp/~ax2s-kmtn/ref/jpeg.html

> GIMP２をインストールした時の２つのフォルダは捨ててはいけないんでしょうか・・・？

昔のことなので忘れました。f(^^;
解凍に用いた一時的なフォルダであれば消しても良いですが，インストール先であればダメですね。ゴミ箱に入れてGIMPを起動してエラーがなければ消しても問題ないと思います。

tokpy · Answer

＃2です。

サイズを変えるだけなら，GIMP2などフリーソフトで十分できます。

縮小専用
http://i-section.net/software/shukusen/

GIMP2
http://www.vector.co.jp/soft/win95/art/se352400.html
http://www.geocities.jp/gimproject/gimp2.0.html

turbo27 · Answer

私はＷｅｂのほうが詳しく、イラストは専門ではありませんが…

イラストならJPEGではなくGIFで保存したほうがいいでしょう。もともとGIFのイラストをJPEGで保存しただけで、絵は完全につぶれるし容量は大きくなります。
これはどちらが優れていると言う事ではなく、保存形式の問題。JPEGは写真に向いていますし、GIFはイラストに向いています。
JPEGは不可逆圧縮で上書き保存するたびに画像の情報を削りますし、最終的に４０くらいで保存すると言う事ですから、それではかなりつぶれるでしょう。

実際拝見した所、Webではこれくらいでも十分だとおもいますが、やはり作者としてもっと綺麗に載せたいと言う事なら最初の段階でGIFにしてしまう事です。
私はOSがWin2kでIllustratorとPhotoshopを使っている形なので、そちらがもとからGIFで保存できるのか・PhotoStudio2000でGIFにできるのかは分かりませんが、
できるのならもとから、できなければJPEGで読み込んだものを画像編集ソフトで好きな大きさに縮小し（ピクセル数のほう）、GIFでWeb用に書き出します。書き出す時、使用する色数を下げる事でサイズ（容量のほう）を小さくできます。
モノクロのイラストで４８０×３２０ピクセルで３０KBくらいなら、今より十分に綺麗に書き出せると思います。

tokpy · Answer

縮小モアレが出ているのかもしれません。また，JPEGは圧縮率を高めるとブロックノイズが出ます（画質が落ちます）。

http://arena.nikkeibp.co.jp/tec/camera/20020902/101713/

白黒の画像であれば，取り込む際に「グレースケール（8ビット）」で取り込むといいと思います。白黒2値でも良いですがジャギーが目立ちやすくなります。白黒2値の画像は色の境界のコントラスト比が高いため，縮小すると縮小モアレが出やすいです。

mekosuji · Answer

絵が良いかどうかは別にして.......^_^;
ブログに乗せるくらいならこれくらいで十分じゃないですかね～。
まぁ、やり方は相当面倒くさい方法ですがお持ちのソフトだけで作業するならしかたない気がします。また、B5サイズをこんだけ
小さくしているのですから細かいところはつぶれたりどうしようも
無いですし。とりあえず原画を見てないのでどれくらいひどいのか
わかりませんしね。^_^;
出来ればAdobe Photoshop Elementsでも
ご購入されれば一連の作業がこれだけで出来ますので便利ですよ。

参考URL：http://www.adobe.com/jp/products/photoshopelwin/

イラストをスキャナーで取り込んでHPに載せたい。でも粗くなってしまいます。

ペンで描いたモノクロのイラストで塗りつぶしはあってもハーフトーン（グラデュエーション）が無いもの、と仮定してポイントを書き出します

すみません、No.8の回答を書き間違えました…。

大きい解像度のもの（Ａ）と、小さい解像度のものを用意しておいて、ブログの本文には

私は画像ビューアや画像形式変換やサイズ変更にはフリーソフトのマルチメディアビューア「IrfanView32」を使っています。

#4です。

＃2です。

私はＷｅｂのほうが詳しく、イラストは専門ではありませんが…

縮小モアレが出ているのかもしれません。

絵が良いかどうかは別にして.......^_^;

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング