はてなブログに画像を貼る時の注意点と落とし穴

画像を貼る時の注意点です。
つい最近までやり方を間違っていたせいで、
無駄に重い記事を作ってしまいました。

見直したところ読み込み速度が改善したので、以下にまとめます。

当ブログでは以下の記事が一番読まれていますが、
この記事、画像だけで2.8MBありました。
sakini-itteyo.hatenablog.com

「ちょwなんでこんなでかいww」
土曜の朝早くから一人でワイワイ調査&修正作業です。

そもそもの動機

たまに自分でもページを開いて読み返したりしているのですが、
画像については一旦PC上で圧縮してからブログに上げていたので、大丈夫だろうと思っていました。

自分でアクセスしてみて気になったので、以下のサイトで分析しました。
PageSpeed Insights

分析結果…

これは、あかんやつや…

画像サイズを小さくしよう

画像サイズが大きいと読み込みに時間がかかります。

重いと読者さんを待たせてしまいますし、
ついでにSEO的にも悪影響があるようです。

一応画像のサイズを小さくしようとはしていて、ローカルPC上ではjpgの画質設定を落として、
1枚100KB前後にしていました。

なぜサイズが大きくなったのか

はてなフォトライフにアップロードする際に、
フォトライフ側の設定に応じて画像のサイズが変更されているようです。

初期設定だとこうなってました。

これだとせっかくJPGにしていても、かなり大きなサイズになってしまいます。
大体1枚500KBくらいになっていました。
元々、なんか画像でっかい気がするなぁとは思ってましたが…

そこで、ひとまず以下のように変更しました。

サイズと圧縮率は、適度な値に調整してください。
圧縮率をあまり下げすぎると、画質が悪くなります。
かといって高すぎると、やたらと大きいファイルになるので、多分70〜80くらいが適正かと思います。

※ちょっと画質を下げすぎたかもしれません。

アップロード時の注意

ただこの設定をしていても、記事編集画面から直接画像をアップロードすると設定が効いてないようです。
面倒でも一度はてなフォトライフにアップロードしてから、記事を編集するようにした方が無難です。

アップロードしたら、画像を選んで「画像の編集」を行うと

アップロード後のサイズを確認することができます。

まとめ

特に画像を多用しているページがある場合は一度見直しをおすすめします。

ちなみに件の記事の画像を貼り直したところ、やはり前よりスムーズに読み込まれるようになりました。
点数もだいぶ改善してますね！

※検索順位は変わってないようです。残念…