この記事は、はてなブログで使っている画像についての説明になります。
検索や本で調べても、どれも難しい説明ばかり。
ここでは、ブログに使う画像（主に写真）のフォーマット、画像サイズ、圧縮率を、とにかく簡単に書いておきたいと思います。
＜目次＞
- 長辺960ピクセル、Jpeg、100KB〜200KB以内
- ピクセルについて。
- 長辺のピクセルは960で。
- Webに使う画像（主に写真）はJpeg
- 圧縮率は85で。
- ファイルサイズを200KB以下にする。
- Retinaディスプレイ対応はいずれ。
- ppiは気にしないでいい。
- ブログ、Webページは重くしてはいけない。
- 実際に見て確認する。
- 個人差もあると思うので参考程度にお読みください。
- 変更履歴
長辺960ピクセル、Jpeg、100KB〜200KB以内
最初に書いてしまうと、Webに使う画像は、
長辺960ピクセル、Jpeg、ファイルサイズを200KB以内。
現像ソフトでの圧縮率は85にしていますが、その後グーグルが提供している圧縮ツール Squoosh で再度、圧縮しています。
追記 1：圧縮率はなるべく85にしていますが、画像によっては70くらいまで圧縮します。圧縮後のファイルサイズを見ながら調整しています。圧縮しすぎると画像がジャギジャギしてしまうのでやりすぎ注意です。
追記 2：記事内の写真が多くなるときは、150KB以下まで圧縮します。100KB以下にすると画像の内容によってはジャギジャギで出てくるので加減します。平均的には130KBくらいにしています。写真が少ない時は150KB〜200KBくらいにしています。
で、今のところ当ブログの記事を作成しています。
もちろん用途によって使い分けしたいです。
でも、僕を含め初心者にはざっくりとこんな感じでいいと思います。
現像ソフト（Capture One）での設定。
この他、Photoshopなど写真用のソフトを使うと簡単に設定できます。
無料アプリなどでもできるようです。
こちらの画像は、キャプチャーワンで現像したときのファイルサイズは365KB。あえてこのまま、はてなブログに写真を投稿します。はてなブログでは、アップロードされた画像は、デフォルトの設定で幅もしく高さのいずれか長い方のサイズが 1200px になるように縮小されます（1200px 以下の場合はそのままです）。
なので、はてなブログの場合、グーグルアドセンスなどを意識しないのであれば、ある程度はてな側がファイルサイズを自動でブログ用に調整してくれると思っていいのではないでしょうか。
ファイルサイズは写真の内容（絵柄）によって変わります。Jpegの圧縮の仕様によるもので一定にはなりません。200KB以内にするには、Googleがweb上で提供している画像圧縮ツール Squoosh を使うのが便利です。
この圧縮ツールの便利なところは、圧縮効果の効き具合を、画面で見ながら確認できることです。画像の劣化と圧縮率はトレードオフなので、確認しながら調整できるのはありがたいですね。
Squooshへのリンク
ピクセルについて。
スマートフォンやパソコンなどのディスプレイは、小さな点を左右、上下に並べた集まりで画像を作っています。その点の１つ１つをピクセル（画素）と言います。
乱暴な言い方になりますが、ピクセル、画素、ドットは同じと考えてしまいましょう。
長辺のピクセルは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の範囲でなるべく軽くしています。
こちらのカモの写真は現像時（JPEG 8bit、sRGB、72px/in、長辺960px）でファイルサイズは193KB。そのあとSquooshを使い、圧縮率85、92.1KBまで落とした画像を投稿しています。
ファイルサイズを200KB以下にする。
Googleアドセンスなどの解説ページは、300KB以下や、最近では厳しくなったので200KB以下、もっといくと100KB以下というのも見かけます。
ガチの写真ブログの場合は、画像をクリックでファイルサイズの大きいデータが見れるような仕様にした方がいいでしょう。ただ記事中で見られる写真については、画質を気にしながらもファイルサイズを下げる努力をするしかないと思います。
僕は2021年4月くらいから圧縮率よりも、ファイルサイズを200KB以下にしています。
2022年くらいより105KB〜150KBくらいで使うことが多いです。
こちらの写真は試しに思いっきりサイズダウンしてみました。
先ほどと同じ条件で現像、231KBあります。そのあとSquooshを使い、Quality:15、20.9KBまで落としてみました。
画像の右上の暗いがカクカクしています。さすがにここまで圧縮すると見えが悪いですね。
Retinaディスプレイ対応はいずれ。
RetinaディスプレイはApple製品に使われている高解像度のディスプレイです。
簡単にいえば、Retinaディスプレイは今までの１ピクセルのエリアに2×2の細かさで表示しています。
ということで、単純に考えると通常の2倍ピクセル数が必要になります。
Retinaディスプレイや、Apple製品以外の高解像度のディスプレイがもっと普及したら、ピクセル数は変更する可能性があると思います。
ppiは気にしないでいい。
ppiの数値は、Web上では使う画像においてほとんど意味はありません。慣習として72ppiとしておけばよいでしょう。
印刷物などではppi（dpi）は画質に大きく影響する重要な数値になります。
注意してほしいのはWebと印刷物の考え方は違うということ。雑誌、新聞、プリントなど用途によっては違ってきますが、必要とされる画素数はディスプレイよりも大きくなる傾向にあります。
ブログ、Webページは重くしてはいけない。
読み手になって考えれば、当然です。
なかなか表示されないWebページだと、イラッとしませんか？
僕だったら、すぐに他のページに移動してしまうでしょう。
SEOでも同じことが言えます。
なので、画像の数が多くて重くなるようなら、ページを分けるなどして表示が遅くならないようにした方がいいでしょう。
僕は格安SIMを使っているので、スマホでみるにデータサイズが大きいと読み込むのに時間がかかります。電車利用のときなど重いページは見るのを断念して離脱してしまいます。
実際に見て確認する。
できるなら、大きさの違うディスプレイで確認しましょう。スマホの画面でも。
そのとき表示された画像がモヤっとしていたり、ジャギジャギしていたら、それは画像サイズが小さいか圧縮率が低すぎます。
また、綺麗に見えるけど表示されるのが遅い場合は、ピクセル数や圧縮率を調整して軽いデータにしたいところです。ただし通信環境にも左右されるので、そのあたりも考慮してください。
修正して自分が納得できる設定を探してみてください。
個人差もあると思うので参考程度にお読みください。
詳細な説明や裏付けを書くと、難しく長文になってしまうので割愛しております。また用途によって数値は変わってしまいます。参考程度にしていただけると幸いです。
変更履歴
2021年4月、ファイルサイズに関して200KB以下にするように文章を追加、編集しました。
2022年5月、ファイルサイズに関して100KB〜150KBくらいのファイルサイズにしている旨の文章を追加、そのほかを編集しました。
2022年10月、使用写真を変更、関係する文章などを調整しました。
そろそろ全て書き直そうかと思っていますが、経過も含めて何かのお役に立てれば幸いです。
