猫ノ目わたるブログ

写真と散歩と猫が好き。日々の写真をもとに情報を発信するブログです。

ブログに使う画像サイズとフォーマット、圧縮率はどうするの?

この記事は、はてなブログで使っている画像についての説明になります。

検索や本で調べても、どれも難しい説明ばかり。

ここでは、ブログに使う画像(主に写真)のフォーマット、画像サイズ、圧縮率を、とにかく簡単に書いておきたいと思います。

目次

 

長辺960ピクセルJpeg、100KB〜200KB以内

最初に書いてしまうと、Webに使う画像は、

長辺960ピクセルJpeg、ファイルサイズを200KB以内。

現像ソフトでの圧縮率は85にしていますが、その後グーグルが提供している圧縮ツール Squoosh で再度、圧縮しています。

追記 1:圧縮率はなるべく85にしていますが、画像によっては70くらいまで圧縮します。圧縮後のファイルサイズを見ながら調整しています。圧縮しすぎると画像がジャギジャギしてしまうのでやりすぎ注意です。

追記 2:記事内の写真が多くなるときは、150KB以下まで圧縮します。100KB以下にすると画像の内容によってはジャギジャギで出てくるので加減します。平均的には130KBくらいにしています。写真が少ない時は150KB〜200KBくらいにしています。

 

で、今のところ当ブログの記事を作成しています。

もちろん用途によって使い分けしたいです。

でも、僕を含め初心者にはざっくりとこんな感じでいいと思います。

 

f:id:snowvalley:20210305232554j:plain

こちらの画像サイズは上記の設定で85KBになります。

 

f:id:snowvalley:20210425054131p:plain



写真の現像ソフト(Capture One)での設定。

この他、Photoshopなど写真用のソフトを使うと簡単に設定できます。

無料アプリなどでもできるようです。

 

ファイルサイズは写真の内容(絵柄)によって変わります。Jpegの圧縮の仕様によるもので一定にはなりません。200KB以内にするには、Googleがweb上で提供している画像圧縮ツール Squoosh を使うのが便利です。

この圧縮ツールの便利なところは、圧縮効果の効き具合を、画面で見ながら確認できることです。画像の劣化と圧縮率はトレードオフなので、確認しながら調整できるのはありがたいですね。

 

Squooshへのリンク

https://squoosh.app/

 

ピクセルについて。

スマートフォンやパソコンなどのディスプレイは、小さな点を左右、上下に並べた集まりで画像を作っています。その点の1つ1つをピクセル(画素)と言います。

乱暴な言い方になりますが、ピクセル、画素、ドットは同じと考えてしまいましょう。

 

長辺のピクセルは960で。

標準的なディスプレイの幅いっぱいにWebページを広げても、実際に表示されている画像の幅は960ピクセルぐらいだと思われます。ということで、960ピクセルを基準に考えて用途に合わせて調整すればいいと思います。

 

長辺のピクセル数の設定。(横が基準ではある。)

  • 1200、僕が調べた中では一番大きい。
  • 1024、普及率の高いディスプレイの長辺のサイズ。
  • 1080、某雑誌のWeb用に使う設定。
  • 960、フォトヨドバシの写真サイズがこれです。
  • 800、多少の差はあるけど、このぐらい。
  • 640、小さく使うならこれで十分。

 

ヘッダなどでWebサイトの画面幅いっぱいまで表示する場合はディスプレイの左右幅で考えるのがいいでしょう。つまり960よりは大きめにしておいた方がいい。

フルHDなら横幅が1920ドットです。4Kや8KになるとフルHDよりも高解像度になります。

単純にディスプレイの解像度で考えると横幅(長辺)のドット数は大きくなります。

ただ、本当にそれだけのドットが必要なのか?そこまでして忠実に合わせる必要があるのかと疑問になります。

写真ブログなどで、詳細に画像を見せたいときは大きくてもいいかもしれません。

ただ、視覚的に問題なく、重要度が低いのであれば、ファイルサイズは小さくしておいたほうがいいと僕は考えます。

 

Webに使う画像(主に写真)はJpeg

Jpegの他にもファイルのフォーマットはいろいろありますが、写真の場合、汎用性の高さ、圧縮したときのファイルサイズでの優位性を考えればJpegが良いと思います。

 

圧縮率は85で。

googleの推奨は圧縮率85です。

画像を最適化する  |  PageSpeed Insights  |  Google Developers

スタンダードな検索ツールといえばgoogleさんです。そのgoogleさんが85と言っているのですから85がいいでしょう。

ただ、個人的には圧縮率とファイルサイズ、画質を見ていくと以下のような関係性を確認しています。

Jpegの圧縮は画像の内容によって圧縮後のファイスサイズが変化するので、こんな感じという曖昧な目安になります。

 

  • 100は非効率でファイルサイズは大きい。
  • 90で画像に関係なく実際の画質が安定する。
  • 85以上だとファイルサイズが急に大きくなる。
  • 85が基準。
  • 85未満ついては画像内容によってバラつきがでてくる。
  • 80が画質を保てる限界だと思える。
  • 80以下では、ファイルサイズの減少に対して画像の劣化の方が大きい。
  • 75,70など、プレビューなどで確認してジャギがでていなければ使える。

 

写真を綺麗に見せたいのであれば圧縮率を90にする、文章の補足説明に画像を使いたい程度であれば80にしてしまう、など使い分けてもいいと思います。

ファイルサイズで統一するようにしました。

この処理の後、さらに Squooshを使い、画像サイズを200KB以下にします。

画像の内容によっては、100KBくらいまで落とせるので、100KBから200KBの範囲でなるべく軽くしています。

 

ファイルサイズを200KB以下にする。

 Googleアドセンスなどの解説ページは、300KB以下や、最近では厳しくなったので200KB以下、もっといくと100KB以下というのも見かけます。

ガチの写真ブログの場合は、画像をクリックでファイルサイズの大きいデータが見れるような仕様にした方がいいでしょう。ただ記事中で見られる写真については、画質を気にしながらもファイルサイズを下げる努力をするしかないと思います。

僕は2021年4月くらいから圧縮率よりも、ファイルサイズを200KB以下にしています。

2022年くらいより130KB〜150KBくらいで使うことが多いです。

 

Retinaディスプレイ対応はいずれ。

RetinaディスプレイApple製品に使われている高解像度のディスプレイです。

簡単にいえば、Retinaディスプレイは今までの1ピクセルのエリアに2×2の細かさで表示しています。

ということで、単純に考えると通常の2倍ピクセル数が必要になります。

Retinaディスプレイや、Apple製品以外の高解像度のディスプレイがもっと普及したら、ピクセル数は変更する可能性があると思います。

 

ppiは気にしないでいい。

ppiの数値は、Web上では使う画像においてほとんど意味はありません。慣習として72ppiとしておけばよいでしょう。

印刷物などではppi(dpi)は画質に大きく影響する重要な数値になります。

注意してほしいのはWebと印刷物の考え方は違うということ。雑誌、新聞、プリントなど用途によっては違ってきますが、必要とされる画素数はディスプレイよりも大きくなる傾向にあります。

 

ブログ、Webページは重くしてはいけない。

読み手になって考えれば、当然です。

なかなか表示されないWebページだと、イラッとしませんか?

僕だったら、すぐに他のページに移動してしまうでしょう。

SEOでも同じことが言えます。

なので、画像の数が多くて重くなるようなら、ページを分けるなどして表示が遅くならないようにした方がいいでしょう。

僕は格安SIMを使っているので、スマホでみるにデータサイズが大きいと読み込むのに時間がかかります。電車利用のときなど重いページは見るのを断念して離脱してしまいます。

 

実際に見て確認する。

できるなら、大きさの違うディスプレイで確認しましょう。スマホの画面でも。

そのとき表示された画像がモヤっとしていたり、ジャギジャギしていたら、それは画像サイズが小さいか圧縮率が低すぎます。

また、綺麗に見えるけど表示されるのが遅い場合は、ピクセル数や圧縮率を調整して軽いデータにしたいところです。ただし通信環境にも左右されるので、そのあたりも考慮してください。

修正して自分が納得できる設定を探してみてください。

 

今回はざっくりと書きました。

詳細な説明や裏付けを書くと、難しく長文になってしまうので割愛しております。また用途によって数値は変わってしまいます。参考程度にしていただけると幸いです。

 

変更履歴

2021年4月、ファイルサイズに関して200KB以下にするように文章を追加、編集しました。

2022年5月、ファイルサイズに関して100KB〜150KBくらいのファイルサイズにしている旨の文章を追加、そのほかを編集しました。