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

広告

新着記事
Newニンテンドー2DS LLの評価とレビュー。早くて軽くて可愛いけど、気になるところも。
ミニスーファミは絶対予約したい。ストライク世代が収録ソフトについて語ります。
【PS4】モンハン新作「モンスターハンターワールド」の新要素・変更点まとめ。
モンハン新作?「モンスターハンターワールド」でオープンワールド化に高まる期待。E3で発表か。
ドラクエ11体験会の感想と、実機でわかったことまとめ。期待と少しの不満あり。
人気記事セレクション ︎ニンテンドースイッチにモンハンダブルクロス発売決定。モンハン5はどうなる?
「ニンテンドースイッチ ミニ」の情報まとめ。性能やサイズ、値段と期待すること。
Newニンテンドー2DS LLは買うべきか?他3DSシリーズと性能や価格の比較、互換性など。
ゼルダの伝説 ブレスオブザワイルドの評価とレビュー。これは、人生で一番面白いゲーム。
ニンテンドースイッチの評価とレビュー。携帯機を超えたグラフィックと面白い体験が融合。
ニンテンドースイッチとPS4はどっちを買うべきか?本気で比較してみた
フリーゲーム おすすめの名作RPGを紹介!スマホゲームの期待作も。


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

見直したところ読み込み速度が改善したので、以下にまとめます。
f:id:sakini_itteyo:20170115224309j:plain



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


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

そもそもの動機

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

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

分析結果…
f:id:sakini_itteyo:20170115204101j:plain

これは、あかんやつや…

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

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

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

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

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

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

初期設定だとこうなってました。
f:id:sakini_itteyo:20170115225826j:plain

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

そこで、ひとまず以下のように変更しました。
f:id:sakini_itteyo:20170115225821j:plain

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

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

アップロード時の注意

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

アップロードしたら、画像を選んで「画像の編集」を行うと
f:id:sakini_itteyo:20170115232719j:plain

アップロード後のサイズを確認することができます。
f:id:sakini_itteyo:20170115232714j:plain

まとめ

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

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

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