こんにちは。

11月が今日で終わりますね。2020年もあと1ヶ月で終わりだなんて信じられません・・・！(°_°)

来月の今頃は年末なんですよね・・・（驚愕）

あと1ヶ月、やり残したことがないようにしていきたいです＾＾

では、本題に入っていきます！

Webにおける画像の解像度について

解像度を気にし始めたきっかけ

まず解像度を意識し始めたきっかけについて書きます＾＾

実は前まで画像の解像度なんて気にしたことがなかったです笑

というのも大体、デザインカンプから画像を書き出すとき「web用に保存」をすると解像度は72dpiというweb に最適なサイズになっていたようです。

ところがこの前、カンプから書き出すのではなくあらかじめ画像がフォルダに入っており提供された画像をそのまま使う機会がありました。サイズ感も合わせて下さっていたのでファイル名を変えただけでそのまま使いました。

そのあと、吉田さんから解像度が印刷向けの350dpiになっているから72dpiに直すようにと指示がありました(＞＜)

ファイルの情報欄を見ると確かに解像度がいつもの「72×72」ではなく「350×350」になっているファイルがちらほら・・・

結果を言うと、webではいくら解像度が高くても画面上で見る分には変わらないから意味がないとのこと。

それならば解像度を下げた方が多少容量も小さくなるので納得でした！

そもそも解像度とはなんぞや？と思ったので調べてみました！

画像は拡大していくと荒くなり正方形のドットの集まりで作られていることが分かります。

※このブログのバナーの一部を拡大してみました

画像解像度とは、「このドット数が1インチ（2.54センチ）あたりにどれくらいの密度で集まっているのかを数値化したもの」です。

また、単位は「dpi」で、「dot per inch」の略です。

webでは、72dpiあれば十分きれいに画面に表示させることができます！

逆に印刷向けだと72dpiだと荒く、350dpiが適しています。

なのでwebサイト向けに用意された画像を印刷するのはおすすめできないというわけですね(＞＜)

結論からいうと、モニターでは1ピクセルあたりのドット数が変わらないからです。

印刷だと機械の性能次第でドット数が大きいほど細かくきれいに印刷できます。

この点がwebと印刷の違いなんですね〜！

フォトショップでファイルを開き、web用に保存をすることでもできますが、もう一つの方法をあげます。

1.こちらもフォトショップで開き、「イメージ」→「画像解像度」をクリック

2.再サンプルのチェックを外し、解像度を72にする

※画像は目隠ししています

再サンプルにチェックを入れると、画像サイズが変わったりするので注意です！

これで完了です！

実際私はweb用に保存し直す方が簡単なのでその方法で直しました笑

webモニター向けの画像解像度は72で十分！

それ以上数値をあげても画面でのきれいさは変わらないということが分かりました＾＾

今まで気にしたことがなかった方は、気付くきっかけになれば幸いです♩

では今日はここまで〜〜