ノウハウ

【即解決】ブログ画像の最適サイズと容量!圧縮方法も紹介

2021年12月25日

キーちゃん
ブログって画像サイズと容量に注意した方が良いって聞いたんだけど

キーちゃん
最適な画像と容量がわからない

キーちゃん
圧縮方法も分からない

キーちゃん
どうすればいいの、、

それ全部解決するよ
エヌ

こんにちは!ブログ歴2年のエヌ(SEO検定取得・ウェブ解析士)です
ブログ運営に必要な知識や注意するべきことを発信しています

Twitter( @enublog )でもブログに関する様々な知識をたくさん発信していますのでフォローしてください

この記事でわかること

  • 最適な画像サイズ
  • 画像容量
  • 使用する画像ファイル
  • 画像圧縮方法
  • すでに画像を貼ったブログの改善方法

この記事1つでブログにおける画像について解決することができます。盛り込んだ内容になっているので最後まで読んでください。これからブログ画像サイズについて紹介するのですが、その前にブログの画像がなぜ重要なのかについて簡単に紹介しておきます

「画像を最適化することでSEOにプラス影響が働く」と聞いたことがあるでしょう。ブログの画像を最適化するメリットは主に2つあります

画像最適化メリット

・表示スピードが上がる→SEOに影響
・読みやすい→読者が見てくれる→SEOに影響

ブログ画像最適化は「読者のため自分のため」と覚えておけばOK!

それでは具体的に画像について紹介していきます。読むだけでなく実際に手を動かしながら確認すると覚えやすいので記事を見ながら同時に作業することをオススメします

ブログで必要な画像作業全て解決(画像圧縮・サイズ変更・フリー素材・デザイン・ファイル指定)はCanvaで可能7500万点の素材が無料

最適な画像サイズは自身のブログ横幅を確認

画像の最適なサイズはブログにより異なります。基本的に自身のブログの横幅サイズに合わせます。とは言えベースのサイズを知りたいことでしょう

画像サイズは横幅1000px以下で調整

もしもブログ横幅より大きなサイズでアップロードした場合、設定で調整されるので安心してください

大きなサイズで画像を貼った場合は調整されるのですが、逆に小さなサイズでアップロードしてしまうとそのまま表示されるため自身のブログ横幅を知っておかなければいけません

キーちゃん
おや、これは見にくい

ブログの横幅に合った画像サイズにしようね
エヌ

このようにブログの画像サイズを誤ってしまうと見にくくなります。解決策はブログの横幅を確認してサイズを知っておくこと。そうすれば自分のブログの横幅を確認することができるのか、それはとても簡単なので紹介します

「検証」でブログ横幅を確認

横幅の確認はとても簡単です。PCで自身のブログを管理画面ではなく検索エンジンから開きます。サイトを開けば「右クリック」

右クリックでサイト検証
GoogleChrome→右クリック「検証」
Bing→右クリック「開発者ツールで調査する」

上記の画像の説明をします。まず右クリックをして「検査」を選択するとツールが表示、ツール左上の「カーソルマーク」をクリックしてページに当てると色別でサイズを確認することが可能になります

記事の横幅を確認するためには青色部分を確認

当ブログ(エヌブログ)の横幅は700px←検査の青色部分で確認

このブログの場合は横幅が700pxなので画像サイズはそれに合わせる形になります。もし700pxを超えたサイズでアップロードした場合は調整が入り勝手に700pxとなります

キーちゃん
自分のブログの横幅を確認してね

画像容量は200K以下

画像の容量は200KB(キロバイト)以下にすると覚えておいてください

キーちゃん
200KBってどのくらい?

目安を紹介しておこう
エヌ

・スマホの撮影 1000KB~2000KB
・パソコンスクリーンショット500KB~1500KB
・フリー素材サイトからダウンロード500KB~10MB

これらは個人的に調べたものです。しかし基本的に容量は200KBより大きくなると考えておいてほしい。200KBを目安にした場合上記の方法で画像をそのままブログにアップロードするとどうなるかは理解してもらえるはず

キーちゃん
そのまま貼ると超絶重くなるね

画像は小さい容量であればあるほど良い!容量を気にせずバンバン画像を貼っているとあなたのブログはいずれ鉛のように重くなってしまう

画像容量を小さくすることでブログ全体が軽くなりページ速度が上がります。速さの重要性についてはGoogleが掲げる10の真実で、「遅いよりも速いほうがいい。」と紹介されています

ページ速度を上げSEO対策するために画像容量は200KB以下を念頭に置いておく

キーちゃん
画像容量を小さくすると画質が悪くなって見づらいってサイトで見たんだけど

キーちゃん
それについてはどうなの?

画像の種類はPNGもしくはJPGにするといいよ
エヌ

画像の種類はPNGまたはJPGを使い分けろ

画像の種類はPNGまたはJPGを使用するようにしてください。理由は両者ともメリットがあるからです

場合によってはPNGがいいし、また別のところではJPGが良かったりします。そんなこと言って結局どちらにすればいいんだよと思ったあなたにどちらを優先的に利用するべきかお教えしよう

結論、ブログ画像はJPGを使う。場合によりPNGを利用

キーちゃん
なぜJPG?

理由は簡単でJPGの方が軽いからです

画像の綺麗さは両者にあまり差は無く少しだけJPGの方が軽い。ブログの画像は極力画像を軽くすることが望ましいためJPGが良し

ぶっちゃけブログにおいて画質は重要ではない。軽さが命

軽い画像を用いればページ速度が向上して読者が読みやすい、そして多くの読者が読んでくれることであなたのブログが評価される、まさにWinWin

とはいえブロガーさんによって画質をこだわる人もいるでしょう。そんな方のためにPNGとJPEGの特徴を紹介しておきます。下記を参考にしてそれぞれ使いわけしてみるといいでしょう

JPG

・画像にテキストを入れる場合は少し不向き
・テキストを入れないならJPG
・保存を繰り返すと劣化する

PNG

・画像にテキストを入れるならPNG
・透明、半透明に使える
・JPGより重い
・保存を繰り返しても劣化なし

ブログに用いる場合、テキストを入れるかどうかで悩むことが多いはず。画像を入れるならPNGで入れないならJPGを使うと知っておくと今後便利でしょう

ここまでのおさらい
1‘ 画像サイズは自身のブログ幅を確認
2 画像容量は200KB以下
3 基本JPG使用
3‘ 画像にテキストを入れるならPNG

キーちゃん
画像の扱いがわかった!ありがとう!

キーちゃん
そろそろ画像圧縮方法教えて

わかったよ
エヌ

ここまででブログ画像の知識を習得できました。次に画像の圧縮方法について紹介します

ブログに載せる画像は至るところから引っ張ってきますよね。スマホで撮影・スクリーンショット、フリー素材サイトからダウンロード、PCでスクリーンショットなどなど

画像容量のところで説明した通り画像を引っ張て来た時点だと容量が大きいです。そのまま画像をアップロードするのではなく圧縮作業を挟んでからブログに貼り付けます

次に画像圧縮法について教えます

画像圧縮におすすめな方法

画像を様々なところからダウンロードすると思います。ダウンロードした際の画像容量は大きいためそのままブログに貼ると重たくなってしまいます。ですから圧縮作業が必要

圧縮におすすめなのはTinyPNG(タイニーピング)!画像を綺麗に圧縮できるサイトです←無料

⇨ タイニーピングはここから

使い方はとても簡単。上のマークに画像をアップロードした後ダウンロードするだけ

1.8MBもあった画像が約90%圧縮され173KBになりました

キーちゃん
超圧縮された

ドロップできる画像はPNG・JPEG・WebPです。ブログに必要な画像はここで圧縮すればOK!まず使ってみると良いでしょう

キーちゃん
フリー素材画像をダウンロード→圧縮→ブログにアップってめんどくさくない?

Canvaを使えば作業1回で終わるよ
エヌ

Canvaはデザインで生産性を向上 だけでなく圧縮・ファイル指定・サイズ変更・素材使い放題ブログで必要な作業をココ1つに凝縮されたプラットフォーム

ブログ画像に関する知識と圧縮方法まで終わりました。これで今後ブログ運営をする時画像に困りません。でも中にはすでにブログを数か月以上運営していて重たい画像をそのまま貼って困っている人もいることでしょう

ブログ画像に関するQ&Aに答えていきます

ブログ画像Q&A

ブログ画像の質問に答えていきます

1⃣:すでにアップした画像を最適化したい
2⃣:どのページの画像が重たいか知りたい

それでは回答していきます

すでにアップロードした画像を最適化したい

すでにアップロードした画像を軽くするにはプラグイン「EWWW Image Optimizer」を使おう!

簡単な流れ

  • EWWW Image Optimizerをインストール→有効化
  • 「メディア」の一括最適化
  • 最適化をクリック

「画像を最適化」をクリックすれば過去にアップロードした画像を一括で最適化してくれます。処理がとても速いのが特徴なので活用あるべきです

キーちゃん
過去の画像を最適化してくれるなんて素敵

これまでに膨大な画像を貼っているのであればこれ1つでOK!まずはインストール

自動ですべての画像を最適化してくれて便利ですが、自分の目で数値として本当に自分のブログ記事速度が早いのか気になるという方もいるでしょう。そんな方は次で説明する方法で遅い記事を確認してください

どのページの画像が重たいか知りたい

すでに記事をたくさん作っていてどのページの画像が重たいか1から調べるのが面倒。そもそも画像サイズの調査方法がわからないといったところでしょう

新しくツールやプラグインを入れる必要はありません

使うのは、みんな大好きGoogleアナリティクス!これを使えば画像サイズが大きいページを発見することができます。まずGoogleアナリティクスを開きましょう

左サイドバー「行動」→「サイトの速度」→「ページ速度」の順で進むとサイト内スピードが表示されます。右のグラフで赤い部分が改善するべきページです

遅いページのURLが記載されているためその記事の画像を改善してください。 確認することは①画像幅②画像サイズ(200KB以下にする)⓷画像種類(PNG or JPG)

ここまで対策すればあなたのブログ速度は以前よりも大幅に解決されます。この記事で紹介したこと全てを試してください

デザイン・サイズ変更・圧縮・ファイル指定全てCanvaで解決!

当ブログはCanvaを使用しています。ブロガー・デザイナーに最高のパフォーマンスを提供してくれるため多くの人が利用しています

有料フリー素材サイトと違う点は「デザイン圧縮ファイル指定サイズ変更」ができる点。これって全部ブログでいる要素なんですよね

画像ダウンロードは素材サイトで圧縮は別サイト、サイズ変更はツールを使って、、、、ぶっちゃけめんどくさい。できることなら素材集め~画像最適化を全て1つにまとめたい、そんな方はCanva利用一択しかありません

素材が少ないんじゃない?と不安に感じるかもしれまんせんがCanvaには7500万点以上の写真素材があります。さすがに多すぎ

まずは無料から
エヌ
参考ブログ初心者のためのSEO講座【準備運動編】

続きを見る

参考ブログアフィリエイトするならASP登録必須【厳選6社紹介】

続きを見る

参考ブログ初心者のためにキーワードの選び方を解説

続きを見る

当ブログ使用テーマ

余談ですが、今回の記事で使用した画像サイズは620KB(13枚)

キーちゃん
1MB(1000KB)もいってないんだよ

-ノウハウ
-

© 2022 enublog  Powered by AFFINGER5