キラッとはてログ

ポヤポヤの主婦ポヤラが本気で取り組むブログ運営

【はてなブログ画像最適化】サイトに合った画像サイズの測定方法と設定

f:id:poyara:20210718183015j:plain

大すぎる画像を使うとブログの表示速度が遅くなるってホント?

本当です。小さすぎる画像は見づらいし、必要以上に大きな画像はブログが重くなりますよ。画像は最適なサイズのものを使いましょう。

最適な画像サイズってどのくらい?

あなたのブログの横幅にピッタリハマるサイズがいいですね。だから、最適なサイズは人によって違うのよ。

ブログの横幅の測り方なんてわからない〜!

画像サイズをどうやって変えればいいのかわからない〜!

どちらもとても簡単です。この記事でわかりやすく説明しますね。

 

■この記事でわかること■
  • あなたのブログに最適な画像サイズの測り方
  • はてなフォトライフにアップロードされる画像サイズ
  • 画像サイズの変更の仕方

 

この記事を読んであなたもブログの画像サイズを最適化してね!

   

 

ブログに最適な画像サイズ

以前ワードプレスで運営している別サイトの表示速度をエンジニアさんに相談したことがあります。

エンジニアさんは私のブログの横幅が約800pxなのに対して、使用している画像に1500px以上のものがあることを指摘して
「画像サイズの改善がページスピードに大きく影響を及ぼします。」
と教えてくれました。

たしかに、大きな画像の方が綺麗に表示できますが、ブログの横幅以上のものは必要ありませんね。

 

 

あなたのブログの横幅のサイズはどのくらいかな?
簡単なのでいっしょに測ってみましょう。

 

ブログの横幅の測り方

ブログの横幅はGoogle Chromのデベロッパーツールを使えばあっという間にわかります。

デベロツパーツールとはサイトのHTML構成や表示速度、リンク切れなどのエラーを確認できるツールです。

 

■Google Chrom■
Google Chromを使っていない方はこちらからダウンロードしてくださいね。
※もちろん無料です。
↓↓

Google Chrome - Google の高速で安全なブラウザをダウンロード

 

 ブログの横幅を測ってみよう

①あなたのブログを表示して「右クリック→検証」またはパソコンの「F12キー」を押してデベロッパーツールを開きます。

*デベロッパーツールが画面の横に表示される場合は正しいサイズが測れません。下記の<補足>を参考にして、画面下に表示させてください!

f:id:poyara:20210718174740j:plain

 

②右上のアイコンをクリック

f:id:poyara:20210718174849j:plain

 

③ブログの本文の部分が青くなったらクリック

④画面右側「Computed」をクリック

f:id:poyara:20210718174959j:plain

 

⑤すると表示される枠の中のこの数字「682×20015.200」が私の本文のサイズです。横幅は682pxですね。

f:id:poyara:20210718175052j:plain

 

私のブログの最適な画像サイズは682pxとわかりました。

 
<補足>
デベロッパーツールがこのように画面の横に表示される場合があります↓↓

f:id:poyara:20210719162521j:plain

このままではブログの横幅を正しく測ることができませんから、画面下に表示されるようにしましょう!

①デベロッパーツール画面の右上にあるアイコンをクリック
②このアイコンをクリック

f:id:poyara:20210719162953j:plain


③すると、ブログ画面の下にデベロッパーツールが表示されます↓↓

f:id:poyara:20210719163117j:plain

 

はてなフォトライフの画像サイズ

ワードプレスでは自分でプラグインを入れて画像サイズを最適化しなければならないのですが、我らがはてなブログはとても優秀です。

アップロードした段階で自動的に800pxにリサイズしてくれています。
もちろんファイルサイズも小さくなっていますよ。

 


はてなフォトのデフォルトは800px

試しにこの巨大な写真をはてなフォトライフにアップロードしてみます。

サイズ:3456×5184px
ファイルサイズ:6.6MB

f:id:poyara:20210718175523j:plain

 

すると・・・ほら見て!

サイズ:800px(長辺)
ファイルサイズ:163KB

f:id:poyara:20210718175639j:plain

 とてつもなく軽量化しています。

 

さらに、はてなフォトライフでは自分のブログに最適なサイズでアップロードするように設定できます。すごく便利!

はてなフォトライフに画像を最適なサイズでアップロードする設定

①画面右上の「設定」をクリック

②画像サイズを変更すればOK!

f:id:poyara:20210718175951j:plain

 

③忘れずに「この内容に変更する」をクリックしてね。

f:id:poyara:20210718180022j:plain

 

直接はてなブログにアップロードした画像は1200pxにリサイズされる

しかしはてなフォトにアップロードしないで、直接はてなブログにアップロードしちゃうと、長辺サイズは1200pxになっちゃうので要注意です。

サイズ:1200px(長辺)
ファイルサイズ:359KB

f:id:poyara:20210718180439j:plain

ファイルサイズも結構大きいですね。

記事を公開する前にサイズを変更しましょう。

 

画像サイズを変更する方法

画像サイズを変更する方法はとても簡単です。

①はてなブログ記事作成画面右側の「編集サイドバー」で写真のアイコンをクリック。

②このアイコンをクリックしてはてなフォトライフをひらきます。

f:id:poyara:20210718180635j:plain

 

③画面右上の「フォルダを編集」をクリック

f:id:poyara:20210718180717j:plain

 

④編集したい画像を選択して「編集」をクリック

f:id:poyara:20210718180749j:plain

 

⑤画像サイズを書き変えて

⑥「この内容に変更する」をクリックすれば完了です。

f:id:poyara:20210718180824j:plain

 

 

画像は最適なサイズを使おう

画像は最適なサイズを設定しましょう。

小さい画像は軽いけれどみにくいです。

サイズ:200px
ファイルサイズ: 19KB

f:id:poyara:20210718181032j:plain

 

横幅ピッタリの画像はきれいで見やすいでしょう?

サイズ:690px
ファイルサイズ:154㎅
※ファイルサイズは200㎅以下なら問題なしです!

f:id:poyara:20210718171248j:plain

 

 

まとめ

最適な画像サイズはサイトによって違います。

大きすぎる画像はブログの表示速度を遅くします。小さすぎる画像は見づらく綺麗ではありません。あなたのブログの横幅ピッタリのサイズに設定しましょう。

ブログの横幅はGoogle Chromのデベロッパーツールを使えば簡単にわかります。

はてなフォトライフはデフォルトでは800pxにリサイズされてアップロードされます。自分のブログに最適なサイズに設定することもできます。

はてなブログに直接アップロードした画像は1200pxにリサイズされます。

やや大きめなので、最適なサイズに直してから公開しましょう。

画像サイズを最適化はだれでも簡単にできます。
ぜひやってみてくださいね。

 

最後までお読みいただきありがとうございます!
「キラッとはてログ」では、初心者がはてなブログで月5万円ほどの収入を得るまでに必要な情報を発信しています。
興味のある方はぜひ読者登録やTwitterフォローをお願いいたします。

ごいっしょにはてなブログを楽しみましょう!