大すぎる画像を使うとブログの表示速度が遅くなるってホント？
本当です。小さすぎる画像は見づらいし、必要以上に大きな画像はブログが重くなりますよ。画像は最適なサイズのものを使いましょう。
最適な画像サイズってどのくらい？
あなたのブログの横幅にピッタリハマるサイズがいいですね。だから、最適なサイズは人によって違うのよ。
ブログの横幅の測り方なんてわからない〜！
画像サイズをどうやって変えればいいのかわからない〜！
どちらもとても簡単です。この記事でわかりやすく説明しますね。
- あなたのブログに最適な画像サイズの測り方
- はてなフォトライフにアップロードされる画像サイズ
- 画像サイズの変更の仕方
この記事を読んであなたもブログの画像サイズを最適化してね！
ブログに最適な画像サイズ
以前ワードプレスで運営している別サイトの表示速度をエンジニアさんに相談したことがあります。
エンジニアさんは私のブログの横幅が約800pxなのに対して、使用している画像に1500px以上のものがあることを指摘して
「画像サイズの改善がページスピードに大きく影響を及ぼします。」
と教えてくれました。
たしかに、大きな画像の方が綺麗に表示できますが、ブログの横幅以上のものは必要ありませんね。
あなたのブログの横幅のサイズはどのくらいかな？
簡単なのでいっしょに測ってみましょう。
ブログの横幅の測り方
ブログの横幅はGoogle Chromのデベロッパーツールを使えばあっという間にわかります。
デベロツパーツールとはサイトのHTML構成や表示速度、リンク切れなどのエラーを確認できるツールです。
ブログの横幅を測ってみよう
①あなたのブログを表示して「右クリック→検証」またはパソコンの「F12キー」を押してデベロッパーツールを開きます。
＊デベロッパーツールが画面の横に表示される場合は正しいサイズが測れません。下記の＜補足＞を参考にして、画面下に表示させてください！
②右上のアイコンをクリック
③ブログの本文の部分が青くなったらクリック
④画面右側「Computed」をクリック
⑤すると表示される枠の中のこの数字「682×20015.200」が私の本文のサイズです。横幅は682pxですね。
私のブログの最適な画像サイズは682pxとわかりました。
＜補足＞
デベロッパーツールがこのように画面の横に表示される場合があります↓↓
このままではブログの横幅を正しく測ることができませんから、画面下に表示されるようにしましょう！
①デベロッパーツール画面の右上にあるアイコンをクリック
②このアイコンをクリック
③すると、ブログ画面の下にデベロッパーツールが表示されます↓↓
はてなフォトライフの画像サイズ
ワードプレスでは自分でプラグインを入れて画像サイズを最適化しなければならないのですが、我らがはてなブログはとても優秀です。
アップロードした段階で自動的に800pxにリサイズしてくれています。
もちろんファイルサイズも小さくなっていますよ。
はてなフォトのデフォルトは800px
試しにこの巨大な写真をはてなフォトライフにアップロードしてみます。
サイズ：3456×5184px
ファイルサイズ：6.6MB
すると・・・ほら見て！
サイズ：800px(長辺)
ファイルサイズ：163KB
とてつもなく軽量化しています。
さらに、はてなフォトライフでは自分のブログに最適なサイズでアップロードするように設定できます。すごく便利！
はてなフォトライフに画像を最適なサイズでアップロードする設定
①画面右上の「設定」をクリック
②画像サイズを変更すればOK！
③忘れずに「この内容に変更する」をクリックしてね。
直接はてなブログにアップロードした画像は1200pxにリサイズされる
しかしはてなフォトにアップロードしないで、直接はてなブログにアップロードしちゃうと、長辺サイズは1200pxになっちゃうので要注意です。
サイズ：1200px(長辺)
ファイルサイズ：359KB
ファイルサイズも結構大きいですね。
記事を公開する前にサイズを変更しましょう。
画像サイズを変更する方法
画像サイズを変更する方法はとても簡単です。
①はてなブログ記事作成画面右側の「編集サイドバー」で写真のアイコンをクリック。
②このアイコンをクリックしてはてなフォトライフをひらきます。
③画面右上の「フォルダを編集」をクリック
④編集したい画像を選択して「編集」をクリック
⑤画像サイズを書き変えて
⑥「この内容に変更する」をクリックすれば完了です。
画像は最適なサイズを使おう
画像は最適なサイズを設定しましょう。
小さい画像は軽いけれどみにくいです。
サイズ：200px
ファイルサイズ： 19KB
横幅ピッタリの画像はきれいで見やすいでしょう？
サイズ：690px
ファイルサイズ：154㎅
※ファイルサイズは200㎅以下なら問題なしです！
まとめ
最適な画像サイズはサイトによって違います。
大きすぎる画像はブログの表示速度を遅くします。小さすぎる画像は見づらく綺麗ではありません。あなたのブログの横幅ピッタリのサイズに設定しましょう。
ブログの横幅はGoogle Chromのデベロッパーツールを使えば簡単にわかります。
はてなフォトライフはデフォルトでは800pxにリサイズされてアップロードされます。自分のブログに最適なサイズに設定することもできます。
はてなブログに直接アップロードした画像は1200pxにリサイズされます。
やや大きめなので、最適なサイズに直してから公開しましょう。
画像サイズを最適化はだれでも簡単にできます。
ぜひやってみてくださいね。
「キラッとはてログ」では、初心者がはてなブログで月5万円ほどの収入を得るまでに必要な情報を発信しています。
興味のある方はぜひ読者登録やTwitterフォローをお願いいたします。
ごいっしょにはてなブログを楽しみましょう！
Follow @poyaran
