Webサイト上できれいな画像とかなり粗い画像とありますよね。
それもパソコンで見たときと、スマートフォンで見たときと同じ画像なのに、「なぜ画像が荒くなるの？」と思ったことありませんか？
そのような現象がどうして起こってしまうのか、またどうしたらいいのか、その謎と謎解きを行っていきますので、ぜひ最後までお読みくださいね。

画像の解像度ってなに？

解像度とは、画像の密度のことです。
写真を拡大すると小さな小さな点が見えてきます。この点を「ドット」というのですが、1インチ（2.54㎝）の中にドットが多くあるときれいな写真になります。1インチの中に10個のドットよりも、20個のドットの方がより細かい表現ができるということになります。

解像度ってどのくらいあればいいの？

では、解像度が高ければ高いほどいいの？と思いますよね。
しかしそれは使う用途によって違ってきます。
では、どのくらいあればいいのでしょうか。
例えば、Webなどで使用する場合は、一般的に72dpiでいいといわれています。
ちなみに印刷などは、カラーで300～350dpi、モノクロで600～650dpiと言われています。

Webの画像はピクセル数

画像の解像度についてお話してきましたが、実はwebの画像において必要なのは横と縦が何ピクセル（px）の大きさなのかということです。
だから、「横幅600pxで表示します。」という場合に、横幅が1,000pxの写真も300pxの写真も同じ600pxで表示されます。
写真幅が大きい場合は縮小されますので、画質の粗さは特に影響をうけませんが、反対に小さい画像の場合は引き伸ばされるため、モザイク状の低画像度な画像で表示されます。

では、大きい写真ならいいんじゃないの？となりますが、反対に重くなってしまい表示するまでに時間がかかってしまうということになります。

スマホ画像とPC画像の見え方の違い

パソコンで見るよりもスマートフォンで見る人が増えてきましたね。
ホームページで掲載している写真をスマホで見たときに、画像が荒くなっているサイトを見る時があります。
スマホは画面サイズが小さいのになぜ？と思ったことないですか？

スマホが主流となってきて、よりきれいに表示されるようになってきました。それは画面解像度を”ぎゅっ”と圧縮して、きれいに表示できるようにしているからです。

そのため、例えばスマホで375pxで表示したい場合は、その2倍の750pxの画像幅が必要になるのです。もし写真が380pxだったら、どうなるかはわかりますよね。もしわからなかったら、「Webの画像はピクセル数」をもう一度読んでくださいね。

Webにアップするときの画像注意点

では最後に、Webにアップするときの画像注意点をお伝えします。

1、大きすぎる画像を使うのは避ける。
2、スマホに対応できるように、画像サイズに気を付ける。
3、画像でなくても表現できるところは、なるべく画像化しない。
4、「JPG」だけではなく、Web画像で使われる形式を使用

他にもいろいろな方法がありますので、まずは弊社までお問合せくださいね。