白黒のイラストを小さく綺麗にホームページに

質問

白黒のイラストを知り合いにスキャナーで取り込んでもらいました。ホームページにしたいのですが、どうしてもイラストのピントが少しぼやけます。友人のスキャナーは１２００dpiなのでそんなに問題は無いと思うんですが．．．。

それでフォトショップ５でぼやけたピントを直すためにシャープをかけるのですが、そうすると画像のサイズが大きくなってしまいます。ただシャープをかけてるだけなんですが、大きくなってしまうのはホームページとしてはあんまり良くないですよね？やっぱり少しでもサイズは小さくないと．．．。

それで質問なんですが、スキャナーで取り込んだイラストをハッキリクッキリさせた上に、画像のサイズも少しでも小さくするコツみたいなものを教えて貰えませんでしょうか！自分でもかなり試行錯誤したんですがどーしてもうまくいかないんです．．．。
今は１０００×７００のグレースケールの画像が１５０ｋｂくらいの大きさになっています。

回答No.6

michito_193 · ベストアンサー

またまた書きこみます。

当方、勘違いしていました。
シャープをかけると、ファイル容量が増えるということだったのですね。画像自体の大きさが変るかと思ってました。
失礼しました。

ＪＰＥＧなどは、同じピクセルの画像で同じ圧縮度でも画像によってファイル容量が変ってきます。
単調な部分が多ければ多いほど高く圧縮されるためでしょう。

それで、解決策ですが、シャープは輪郭以外は試されましたか？グレースケールの場合結構強めにかけても良いと思います。足りなければ２、３回やることも。かけすぎたと思えば、[フィルター]の上から２番目に[シャープをフェード]で効力を弱めれます。
後は字が読める程度に画像の大きさを小さくしていくしかないでしょう。

ＨＰの配置の仕方ですが、１ページに全ページを貼りつけるのでなければ、グレースケールなのでそんなに気にするレベルではないのでしょうか。
ファイル容量を気にしすぎてせっかくの作品が見にくくなってもしょうがないと思います。

お礼

ごめんなさい私の説明も足りませんでした。^^；）
シャープはかけるとやっぱり大きくなってしまうものなんですね。勉強になりました。シャープのかけ方も色々あるみたいですね。フェードで調整してみます。

１ページにイラスト１枚のつもりです。１４０KB程度ならば問題ないですか？色々他のホームページを参考にしたのですが、画像１枚が１００KB超えている人は結構少なかったので「よくないのかな」と思っていました。
色々コツを教えて頂いたので、これをやってみて限界のようだったら１４０前後で手を打とうかと思います。ありがとうございます。

回答No.8

takanyanyanya

お返事が遅くなってすみません。
>個人のホームページで画像を分割している人はすごく少ない
イメージスライサーで分割した画像というのは、テーブルの中に入れて表示させます。そのテーブルのタグ自体はImageReadyが自動で書き出してくれますが、HTMLタグをある程度理解していないと思い通りの場所に入れられないかも知れません。普段ホームページ制作ツールで作っていて、タグの知識はほとんどない、というかたには敷居が高いのか・・・な？photoshopや他のイメージスライス機能のあるソフトも、お値段が張る上に「初心者でも簡単！」という訳にはいかないものが多いですから、そのへんも理由かも知れません。企業ページなどは、たいていプロが作ってますから、見かけることも多くなるのでしょう。

>画像を分割することのデメリット
上記の事に加えて、上から順番に表示してくれる、とも限らないようです、自分の経験上では。ブラウザについては、書き出されたタグ自体に変更をくわえなければ心配ないかと思います。（自分も全てのOS、種類、バージョンで確認出来た訳ではありませんが、ある程度のところまでは確認しています。）また、あまり細かくスライスしても、表示が遅くなる場合がありますので、おおきめにスライスしましょう。

お礼

ありがとうございました！！私はＡＤＳＬですので表示する順番とかあまり関係なしに一気に表示されていましたが、ダイヤル回線の人には分割された絵が順に出るわけですねー。そういえばそうかー。よくわかりました！

個人のホームページで綺麗なＣＧを描いている人とかよく見かけるんですが、ああいう人はやっぱりフォトショとか使っていますし、それなら色んな知識もあるだろうしImageReadyもあるんだから分割すればいいのにーと思ったんですが、順番に表示させるとかデザイン的にどうとか色々あるんでしょうね。なんとなく面倒なのが大きいような風にも思えました。ｗ

回答No.7

takanyanyanya

JPEGは圧縮の関係で、ぼかしをかけるとファイルサイズがちいさくなり、シャープなどをかけるとファイルサイズが大きくなってしまいます。
逆にGIFはぼかしをかけるとファイルサイズが大きくなります。
文字を含む画像の場合、GIFで保存するのが一般的です。(文字がJPEGに比べてはっきりでますので。)モノクロなら、8色や4色でもいいかもしれません。ディザをかけないほうが軽くなります。尤も、実物を見ないとなんともいえませんが。漫画という事ですので、スクリーントーンのグラデーションなどがあるなら、あまり色数はおとせませんし・・・。
イメージスライサーなどを使える環境があれば、一枚画像ではなく何枚かのGIF画像にスライスして表示させる、という方法もありますが。150KB一枚の表示を待つより、50KB画像が一枚づつ、三枚表示されるほうが閲覧者のストレスが少ない、という理屈ですね。（あまり細かくスライスしても、表示が遅くなりますので注意です）フォトショップ５にImageReadyが付属していたかどうかはちょっとわからないのですが・・・。

お礼

ｊｐｇってそういう性質だったんですか！しりませんでした。ということはスキャナーで取り込んだ時に白黒２階調などでやっていたらGIFの方が画像の大きさは小さくなるかもしれないということですね。スクリーントーンなどもありますのでやはり１６色ぐらいは要るかもしれませんが。

イメージスライサー？１枚の画像を分割して表示するものですか？たまに企業のホームページなどでそういう画像を見かけますが。ImageReadyはついていました！これでできるんですか？これからやり方を調べてみます。

補足

最後にもう一つだけお聞きしてもいいでしょうか。
イメージスライサーで分割して画像をアップすれば早めに表示されて良いことづくめだと思うのですが、実際に個人のホームページで画像を分割している人はすごく少ないように思えます。企業のページではよく見るんですが。

画像を分割することのデメリットというのはなにかあるんでしょうか？もしかして見る人のブラウザによって見え方が変わるとか？
それとも個人のページでやっていないのは、ただ面倒くさいからでしょうか？ｗ

回答No.5

noname#5598

ホームページ上に載せるのであれば、下のソフトを使ってサイズを落としてみてはいかがでしょうか。

参考URL：

http://www.vector.co.jp/soft/win95/art/se139930.html

お礼

こういうものもあるんですね。今試しました。ほんの少しだけ落ちているみたいです。やるだけやって最終手段として仕上げに使わせて頂きます！

回答No.4

noname#5841

こんにちは。
イラストがどういうものか、わからないので、微妙なんですが、GIFではだめですか？
モノクロの場合、GIFの方がシャープに見えたり、軽くなる場合もあります。
また、シャープかけるのと同時に、コントラストも少し強めにするとはっきりする場合があります（JPGですと、白の部分が滲んだ感じになって、曖昧に見える事も多いので）。

お礼

イラストは白黒の漫画の絵なんです。だからゴチャゴチャとちいさなセリフみたいな字がたくさん書いてあります。
今GIFでも保存を試してみました。同じサイズで私の見た感じ同じくらいの画質を選びｊｐｇ（画質４０）とGIF（１６色）で保存したところ、ｊｐｇは９２．７KB、GIFは１２７KBになりGIFのほうが大きくなってしまいました。

回答No.3

michito_193

＃１の者です。
訂正します。　１０００×７００ppi　→　１０００×７００ピクセル

７２ppiで８００ピクセルだと約２８ｃｍですよね。
そんなに細かく手書きで書いてあるのですか？

ちなみにフォトショップのナビゲーターウインドウの表示は１００％になっていますか？
実際に７２ppiで表示されるのが１００％です。
それでいてまだ余裕があればサイズを落とせますし、文字が見えなくなるのであれば、限界でしょう。

フィルタのシャープの件はどうでしょうか？
本当にサイズはかわりますか？

お礼

何度もすみません！ありがとうございます。

そうですね２８ｃｍです。イラストの内容は漫画の絵なんです。だから結構ちっちゃな字でゴチャゴチャ書いていたりしています。^^;)
ナビゲーターウィンドもピクセル等倍で１００にして確認しています。

シャープの件は補足にも書きましたが、もう一回念のために今試してみました。
元の画像が６７０×１０００で、それを５３６×８００まで解像度を落とし保存しました。そのままjpg画質４０で保存した物は８１．４KBに、同じくｊｐｇ４０のシャープ（輪郭のみ）をかけて保存した物は９２．７KBになりました。
物によっては２０KB増える物もありました。

回答No.2

yukky25

こんにちは。

白黒なんですよねえ・・・。スキャナで取り込むときに白黒ニ値、またはモノクロで取り込んでみてはどうでしょう・・・。
カラーの設定で取り込むと色情報を取りすぎて輪郭がぼやけると聞いたような気がします・・・。お試しください。

お礼

私はスキャナーを持っていませんで知人に頼んでスキャニングしてもらいました。それから知人はｊｐｇにして私に受け渡してくれました。
今後知人にまた頼むことがあれば白黒でやってもらうよう頼みます。でも今までやってもらった画像は３０枚以上あります。「もう一回やって」と言うのはちょっと悪いなーって思いますので、今ある画像をなんとかフォトショなどでクッキリさせたいと思っています。

回答No.1

michito_193

シャープをかけると画像サイズが大きくなる？
おかしいですねー。フィルターのシャープでしょうか？
その件は解からないですが、ファイルサイズの件でお答えします。

１０００×７００ppiだそうですが、どの位のサイズで画面に表示させようとしていますか？
一般にディスプレイに表示させるだけの目的であれば、７２ppiで十分です。
まず自分で表示させたいサイズを決めます。
そしてフォトショップで[イメージ]の[画像解像度]で解像度を７２にして、プリントサイズの縦・横を表示させたいサイズにします。
後は保存ですが、JPEGでいいと思います。
圧縮度は自分の好みで妥協できるレベルまで圧縮比を高めてください。

お礼

１０００×７００は幅×高さのピクセル単位なんですが、今フォトショの設定を見てみたら解像度は始めから７２になっていました。１０００×７００ピクセルって結構デカいんですが、白黒のイラストの中に手書きの説明文が入っていまして、あんまり小さい画像にするとその手書き文字が読めなくなってしまうんですよ．．．。それで１０００×７００位なら読めるかなーと思いまして。文字が読める限界まで頑張って小さくしたら８００×位までならなんとか小さくできると思うのですが。

補足

シャープのことなんですがフィルターのシャープ（輪郭のみ）を使うと、使わないでｊｐｇ保存したものと比べて１０から２０KB大きくなってしまいます。微妙とは思いますが１５０KBと１７０KBだとなんかやっぱり大きくなってしまった感が強いんですよー。
元画像は１０００×７００のｊｐｇで、それを８００×５５０位にピクセル寸法を小さくし、元のままとシャープをかけるを２種類試してみて差が出ています。