はじめに。
今回の記事は、はてなブログを運営しており、且つ、画像を使用している方向けに書いています。そのため、一切画像を使用せず、テキストオンリーという方は、そっと「戻る」ボタンを押して、もっと有意義なお時間をお過ごしくださいませm(_ _)m
まず、私の中でずっと分からなかったのが、画像のサイズです（アイキャッチ画像とかヘッダー画像とか）。色々調べてみるんですが、人によって適正サイズは違うらしく、要するに、自分で適正サイズを探せってことが分かりました（笑）
以下、自分なりに「これが適正なんじゃないか」と思うサイズが決まりましたので、その理由と合わせて書いてみます。
アイキャッチ画像の適正サイズ
200×140、512×234、448×252…。
色々意見があります。その中でも私が重視したのは、
という２点です。
そのうえで、Twitterのスマホ版の表示比率16:9をひとつの基準として考えると、
560×315
これがアイキャッチ画像の適正サイズであると結論付けるに至りました。ただし、16:9だと、はてなブログのアイキャッチアイコン内には収まらず、左右はほとんど切れちゃうので、アピールしたい部分は中央に寄せておく必要があります。
ヘッダー画像の適正サイズ
PC版のヘッダー画像のサイズは、1000×200が推奨されていますが、私は、1000×150にしています。んで、PC版は別にいいんです。問題はスマホ。
私は、レスポンシブルデザインを採用していないため、スマホのヘッダー画像を別途作る必要があるんですが、全然サイズが分かりませんでした…。350×200が適正という意見を信じて作ってみるんですが、なんか合わないんです。
んで、最近ようやく分かりました。
こちらのごごさんの記事曰く、スマホ用のヘッダー画像のサイズは、
640×128！
本当にありがとうございました。非常に助かりました。。
画像圧縮の重要性
私は、特に何も考えずに、そのまま画像をペタペタ貼り付けてたんですが、ある日、Googleアナリティクスで、サイトのページ速度を見てみると…
読み込みの平均時間が15.72秒！？(・0・;)
試しに PageSpeed Insights で計測してみると、スマホ版は、40/100という低スコアを叩き出しました（気になる方は、URLを打ち込んで、ご自身のブログのページ表示速度を計測してみてください）。
いやいや、それはいかんでしょってことで原因を考えるに、画像を圧縮してなかったのが原因ではないかと推測し、アイキャッチ画像やら何やらを全て圧縮しました。
その際、利用したのは Optimizilla というサイトです。一度に20個まで同時に圧縮できるという非常に便利なサイトでして、画像1枚あたり、70％ぐらい圧縮できました。例えば、300kbの画像が、80〜90kbぐらいになります（もっと圧縮することも可能です）。
んで、これを再度手動で貼り直していくんですが、めちゃ地味＆骨折れ。もっと早く気づけばよかったと猛烈に後悔しています。もし、まだ記事数が少なく、画像を多用されている方は、早いうちに圧縮して貼り直すことをオススメします。
貼り直してから改めて計測してみると…
40→54まで改善。Poorとなっていますが、たぶんこんなもんだと思います。
おわりに
こういった画像のサイズとか、ページ表示速度って、結構軽視されがちですが、ユーザーの方に心地よく記事を読んでもらうためには検討が必要な部分だと思いますし、早めに対応した方が良いんじゃないかと思います。ではでは。
