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

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

このサイトで使う画像は、50KBに縮小したものを使っています。画像の幅は570pxにしています。

ところで、同じ50KBの画像でも加工の仕方によっては、ＨＰ上の表示に大きな違いがあることを知っておく必要があります。

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

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

（１）IrfanViewにより加工

　表示の違い：irfanで加工

（２）JTrimにより加工

　表示の違い：jtrimで加工

二枚の画像を見比べると違いは明らかです。

では、もう一枚、画像をご覧下さい。ファイルサイズはやはり同じ50KBです。

（３）IrfanViewによるファイルサイズダウン

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

画像縮小の方法
ソフトの違い
わずかの差とは？
IrfanViewで画像縮小する方法
JTrimによる画像縮小方法
サムネイルをきれいに作る

画像縮小の方法

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

（１）では、IrfanView使って、画像の幅を570pxに縮小し、その後、画質を落として50KBにしています。

（２）では、JTrimを使って、画像の縦横は変更せず、画質だけを落として50KBにしています。

（３）では、IrfanViewを使って、（２）と同じように画像の縦横は変更せず、画質だけを落として50KBにしています。元画像の縦横のサイズは 1350px x 638px　なので、画像の貼り付けタグで、［height=”269″ width=”570″］　と指定して、小さく表示しています。

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

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

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

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

ソフトの違い

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

その結果は、上の（２）と（３）で示したとおりです。

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

わずかの差とは？

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

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

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

①　IrfanView

②　JTrim

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

IrfanViewで画像縮小する方法

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

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

１．画像サイズの縮小
①　メニューバーの［画像］⇒［リサイズ/リサンプル］

②　［リサイズ/リサンプルの設定］ウインドウが開くので、［サイズの指定］で、縮小したい幅を入力（［アスペクト比を保存］にチェックマークが入っていることを確認）。

③　［ＯＫ］をクリック

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

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

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

２．ファイルサイズの縮小
①　メニューバーの［ファイル］⇒［WEB用に保存］

②　開いたウインドウで、左上の［Optimized Image］（下画像の青枠）を見ながら、(ア)のファイル形式を選択。対象ファイルの色数によっては、GIFやPNGの方がJPGより小さなファイルサイズになることもある。