2014年12月11日

画像を縮小してHPにきれいに表示する方法


 ホームページにアップする画像をきれいに表示するには、サイズの大きな写真を使うというのが一般的でしょう。ところが、画像が大きいとファイルサイズも大きくなってしまいます。デジカメで撮影した写真だと2.5MB以上のファイルサイズになります。

 このサイトで使う画像は、50KBに縮小したものを使っています。画像の幅は570pxにしています。
 ところで、同じ50KBの画像でも加工の仕方によっては、HP上の表示に大きな違いがあることを知っておく必要があります。

 今日は、画像をHPにきれいに表示する方法をご紹介します。

 先ず、二枚の写真をご覧下さい。違いが分かるように文字の入った画像を使いました。
 どちらも画像ファイルのサイズは50KBです。

(1)IrfanViewにより加工
表示の違い:irfanで加工


(2)JTrimにより加工
表示の違い:jtrimで加工


 二枚の画像を見比べると違いは明らかです。
 では、もう一枚、画像をご覧下さい。ファイルサイズはやはり同じ50KBです。

(3)IrfanViewによるファイルサイズダウン
Irfan_Bigクリップボード02.jpg


 (2)と(3)の画像では、ほとんど差が見られません。
 さて、どうやってきれいに表示しているのか、種明かしをしましょう。


画像縮小の方法
  画像のサイズを小さくするには、画像の縦横の大きさを縮小する方法と、画質を落とすという方法の二つがあります。

(1)では、IrfanView使って、画像の幅を570pxに縮小し、その後、画質を落として50KBにしています。
(2)では、JTrimを使って、画像の縦横は変更せず、画質だけを落として50KBにしています。
(3)では、IrfanViewを使って、(2)と同じように画像の縦横は変更せず、画質だけを落として50KBにしています。元画像の縦横のサイズは 1350px x 638px なので、画像の貼り付けタグで、 [height="269" width="570"] と指定して、小さく表示しています。

 つまり、画像の縦横の大きさを変えずに画質を落とし、それを縮小表示することできれいに表示しているわけです。

 画像の縦横のサイズを縮小すると画素数が減るためボケてしまい、文字などは判別できなくなったりします。一方、画像の縦横のサイズを変更せずに画質だけ落とすと、色が飛んでしまい、極端な場合、白黒に近い画像になります。この二つの方法にはそれぞれデメリットがあるということです。このため、この二つの方法をうまく使い分けることで、きれいに表示することが可能になります。

 この画像の縦横の大きさは、文字の入った画像の場合、特に重要です。画像の縦横のサイズを、文字判読ができるオリジナルよりもかなり小さくすると、文字を判読するのは不可能になります。この場合には、画質を落とす方を優先して修正します。

 例えば、幅が3000pxもある画像ならば、一旦、1200px程度に画像サイズを縮小し、その上で画質を落としていきます。この方法はたくさんの色が使われている画像の場合に特に有効な方法です。

 
ソフトの違い
  今回、[IrfanView]と[JTrim]という二つのフリーソフトを使って比較しました。IrfanViewはいつも使っているビューワーですが、なぜ、JTrimなのか。 実は何でも良かったのですが、ネットで調べたら、9年くらい前の情報として、JTrimがきれいに縮小できるソフトであるというような内容が書かれてあったので、いつも使っているIrfanViewと比較してみようと思ったわけです。

 その結果は、上の(2)と(3)で示したとおりです。
 実際の所、両ソフトで加工した画像に大差はないのですが、厳密にはわずかな違いがあります。しかし、好みの問題という程度です。


わずかの差とは?
  「わずかな差しかありません」といわれても、どんだけ違うの? 気になるところです。
 早速比較してみましょう。

 今回使うサンプルは、下の画像です。以前撮影したスクレの踊り子の写真です。

iRFAN_v.jpg



 二つのソフトを使って、幅570px、サイズ50KBに縮小した画像を300%に拡大表示したもので比較します。
 ハンカチの先にいる男性をクローズアップしてみましょう。

@ IrfanView
closeupirfan.jpg

A JTrim
Closeup_JTrim.jpg


 違いは自分の目で確認して下さい。


IrfanViewで画像縮小する方法
  これまでに、画像縮小を得意とするさまざまなソフトを試して見たのですが、結局のところ、IrfanViewと大差がない、あるいは、IrfanViewの方がきれいに仕上がるということが分かりました。IrfanViewが本当に優れたソフトであることを実感しました。

 そこで、IrfanViewを使って画像を小さくする方法を具体的に説明します。

1.画像サイズの縮小
 @ メニューバーの[画像]⇒[リサイズ/リサンプル]
 A [リサイズ/リサンプルの設定]ウインドウが開くので、[サイズの指定]で、縮小したい幅を入力([アスペクト比を保存]にチェックマークが入っていることを確認)。
 B [OK]をクリック
Irfan Resize 2


 ここで、[DPI]を変更できます。[DPI]は印刷に関係する設定なので、この値を変えてもネット上の画面には変化は見られません。「なぁ〜んだ、印刷だけか」と思ったら大間違い。

 例えば、DPIの値が異なるが縦横のサイズが同じ2枚の画像があるとします。これをWordに貼り付ける場合、画像の縦横のサイズが同じでも、DPIの値が違うと、違った大きさに張り付きます。同じ大きさにしようと拡大するとボケた画像になります。このように、DPIの値は、画像をネット以外の用途で使う場合に大きく影響することになります。

 印刷に使用する場合は、DPIの値は350程度あれば良いようです。ネットにアップするのであれば、96もあれば十分でしょう。大きければ良いわけではないので、目的に合った適正な値に設定します。

2.ファイルサイズの縮小
 @ メニューバーの[ファイル]⇒[WEB用に保存]
 A 開いたウインドウで、左上の[Optimized Image](下画像の青枠)を見ながら、(ア)のファイル形式を選択。対象ファイルの色数によっては、GIFやPNGの方がJPGより小さなファイルサイズになることもある。
Irfan Resize1


 設定するファイルサイズが決まっている場合は、(イ)の[Compress to size]をクリックし、仕上がりのファイルサイズを入力する。別の方法として、(ウ)の[Quality]スライドバーを動かして、[Optimized Image](上画像の青枠)をみながら設定する。
 B [Save]アイコンをクリックして保存する。


JTrimによる画像縮小方法
 ついでですが、Jtrimでの縮小方法についても書きます。

  メニューバーの[イメージ]⇒[JPEG品質]
  メニューバーの[イメージ]⇒[リサイズ]

Jtrim画像リサイズ



サムネイルをきれいに作る
 最後に、上の方法で、サムネイルを作ったサンプルを紹介します。
 ここまでの説明で分かるのは、IrfanViewを使えば、高品質のサムネイルを作れるということ。

 見本として作ってみました。普段、あまり小さな画像は作らないのですが今回は特別。サンプルは、滝本美織の「みおりねこ」です。

みおりねこ


 この画像は、縦横のサイズが「120 x 133」、ファイルサイズが「12kb」しかありませんが、きれいに表示できていると思います。

 さらにもう一枚。息子の部屋にあったウサギ耳の姉ちゃんのフィギュアをもとに作ったサムネイルです。
 このような縮小処理をするときには、一度、元画像にボカシをいれてから縮小し、それにシャープをかけるときれいに仕上がるようです。
 
フィギュア サムネイル サンプル



posted by ネコ師 at 23:05 | Comment(0) | 役立つ知識(画像編1) | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
記事に関係ないコメント、宣伝的なコメントは削除させていただきます。
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

▲ このページのTOPに戻る