サイトが遅くてユーザーが記事を読む前に離脱してるかもですがダイジョブですか？
初心者ブロガー
なんかサイトが重いから少しでも改善できたら良いんだけど〜
ご覧頂きありがとうございます。そんな悩みを解決します。
画像の容量を最小限にする方法を一時期ずっと考えてました。
- ワードプレスブログの最適な画像サイズ
- 画像サイズを正確に測る方法（拡張機能）
- 画像サイズや圧縮率を変更して軽くする方法
- おすすめツールの紹介と操作方法の手順
ブログの画像サイズや容量はSEOに直接的な影響はないけど超重要です。
なぜなら、ユーザーがストレスを感じるかどうかが決まるから。
ストレスを感じれば、記事を読む以前に離脱する可能性もあるので、いくら良い記事を書いても意味が無くなります。
今回は最適な画像サイズの測り方と変更・圧縮方法を解説します。
おけこ
ちなみにワードプレスでブログをまだ開設してない場合は【小学生でも出来る】WordPress(ワードプレス)ブログ始め方の手順【図解】からどうぞ。
【小学生でも出来る】WordPress(ワードプレス)ブログ始め方の手順【図解】
もくじ
ワードプレスブログのおすすめ画像サイズとは？【結論、テーマによる】
ワードプレスブログの画像サイズって何ピクセルがベストなのか知りたいですよね？
ただ結論から言うと、使ってるテーマによってバラバラです。
なので、最適化したいなら、まず自分のブログの画像サイズを測る必要がありますね。
画像サイズを最適化するメリット【容量が軽くなる】
ちなみに、ワードプレスブログの画像サイズを最適化するメリットを簡単に言っておくと容量が軽くなることです。
画像サイズの大きさを変えず圧縮もしていないと、1枚で数百キロバイトの場合もあります。
しかし、サイズ変更と圧縮をすると90％以上容量が軽くなることも。
おけこ
容量の大きい画像を多用してるとページ読み込み速度が遅くなり読者のストレスに繋がります。
逆に容量が軽くなりサイトスピードが早くなると、ユーザー満足度が上がって滞在時間が伸びたりするので間接的にSEOにも効きます。
軽視しない方が良いですよ！
ブログの画像サイズを測定する方法
ではここからサイズの測定方法をお伝えします。
ひとことでブログ画像といっても色んな種類があるしサイズも色々ですよね？
- アイキャッチ（サムネイル）画像
- ヘッダー・フッター画像
- ウィジェット用
- 記事内画像
しかし実は、Chrome拡張機能『Page Rular Redux』を使うと1発で分かるんです！
もちろん無料で使えるので是非入れておきましょう。
Page Rular Reduxの使い方
まずはChromeストアで拡張機能の追加をします。
>> Chromeに『Page Rular Redux』を追加する
追加すると定規みたいなマークが出るので、画像サイズを測りたい画面でクリック。
左側の< >をクリック。
測りたい画像にカーソルを合わせると、Width（横幅）とHeight（高さ）が表示されるのでメモしておく。
こんな感じで変えたい部分の画像サイズをあらかじめ把握しておけば準備OKです。
変えるべきピクセルサイズがピンポイントで分かるのは便利ですよ！
ワードプレスブログの画像サイズを変更や圧縮する方法
続いてワードプレスブログの画像をリサイズしたり圧縮するやり方は下記になります。
- ワードプレスのプラグイン『EWWW Image Optimizer』を使う
- サイズ変更＆圧縮の最強ツール『Squoosh』を使う
ワードプレスのプラグイン『EWWW Image Optimizer』を使う
まずはワードプレスのプラグイン『EWWW Image Optimizer』を使う方法です。
このプラグインは、画像をアップロードすると設定したサイズに自動で変更・圧縮をしてくれるので面倒くさがりの方にはピッタリ。
ただ、記事内画像などサイズが決まってる場合は使えるんですが、色んなサイズに変更したい場合は設定がちょっと面倒なんですよね。
あと画像によっては圧縮率が微妙だったりもする。
そこで今回僕が紹介したいイチオシは別サービスになるので、このプラグインの設定方法はバズ部さんにお任せしますw
ではここから今回のメインをご紹介します！
サイズ変更＆圧縮の最強ツール『Squoosh』
SquooshはGoogleが提供している無料サービスで、画像のサイズと圧縮率を自分で自由に調整できるのが特徴です。
僕自身、色んなツールを使って最終的に行き着いたのがSquooshなので最高のツールを探してる人は是非ご覧下さい。詳しく説明しますね！
画像サイズ変更＆圧縮ツールSquooshのメリット
簡単にSquooshのメリットについてお伝えしますね。
- それぞれの場所で最適なサイズに１ピクセル単位で調整可能
- 画像の圧縮率が一番高く容量を最も軽くできる
ちなみにデメリットを挙げるとすれば1枚ずつしか処理ができないところです。
しかし、慣れれば全然時間はかからないので気にするほどではありませんよ〜
それぞれの場所で最適なサイズに調整可能
冒頭でChrome拡張機能を使って画像サイズを測ったと思いますが、Squooshならその全ての大きさに対応できます。
プラグインだと設定をちゃんとしないと不要なサイズが生成されたりして逆にめんどくさいんですよね。
なので場所ごとに最適なサイズで設定したいときはSquooshがベストです。
好きなサイズに変更ができるのでGoogle Discover（通称Google砲）にも備えられます。
Google砲はアイキャッチ画像サイズを横1200ピクセル以上にするなど被弾するコツがあるので、サイズ調整が自由にできるのはメリット。
ブログをやってる以上Google砲は誰でも狙いたいと思うので、サイズを自由に変更できるSquooshはかなり使えますよ。
画像の圧縮率が一番高く容量を軽くできる
Squooshは前述したEWWW Image OptimizerやTinypngなどよりも圧縮率が高いのが特徴です。
なので、少しでも容量を軽くしてサイトスピードを速くしたい人はおすすめ。
おけこ
画像サイズ変更＆圧縮ツールSquooshの使い方
Squooshの使い方は簡単。まずはSquooshを開きます。
開いたら『Select an image』をクリックして、サイズ変更と圧縮をしたい画像を選びます。
左下に元画像の容量が出ており、右側の『Resize』と『Quality』でサイズと圧縮率を変えていきます。
ちなみにこの画像で言うと、サイズを変えないで圧縮率を75％にすると『236KB』になるようですね。
『Resize』にチェックを入れて、『Width（横幅）』をChrome拡張機能で測ったサイズに合わせます。
＊横幅を変えると高さは自動で変わります。縮尺は変更不可
僕のアイキャッチ画像の横幅699ピクセルに変更すると、90％圧縮されて42.1KBになりました。お好きなサイズに変えて試してみて下さい。
右の編集項目を下にスクロールすると圧縮率を変えられるので、画像が粗くなりすぎず容量的に良い感じのポイントを探ります。
80％前後なら問題ないと思いますよ！
問題なければ右下のダウンロードをクリックします。元画像から85％圧縮することが出来ました。
あとはワードプレスにアップロードして使用すればOKです。お疲れ様でした！
まとめ：画像サイズ変更と圧縮をして、ユーザーストレスのないブログを目指そう
今回は『画像サイズの変更と圧縮方法』についてお伝えしました。
- 画像サイズはテーマによって違うので測定から始める
- プラグインかSquooshを使ってサイズ変更と圧縮をする
- 少しでも軽くしたい人はSquooshがおすすめ
画像サイズや圧縮は直接的にSEOなどへの影響はありません。
しかし、僕たちのブログを読むのは機械ではなく人間なので、ちょっとの気遣いが大きな差になる可能性があります。
ユーザーにとって使いやすくストレスのないブログ運営を目指していきましょう。
ちなみにワードプレスのテーマも高速化にめちゃくちゃ影響するので、まだテーマに悩んでる人は下記の記事も参考にしてみてくださいね！
WordPressのおすすめテーマBEST5【おしゃれで稼げる】
【ブロガークエスト】初心者が成功を掴むためのロードマップ
【結論】ブログで月1万円稼ぐのは誰でも可能【7つの攻略法】
おけこ
理解できない場合やもっと実戦で使えるようにしたい人はココナラでブログコンサルもやってます。
本質から具体的なアドバイスまでしっかり教えますよ！
