画像の軽量化が重要って聞くけどなんで？
具体的な基準や方法も知りたいな。
このような疑問を解消します。
- ブログ用の画像を圧縮する理由
- 適切な画像サイズ
- 画像をリサイズ・圧縮する方法
「漠然と圧縮した方が良いのは知っているけど、理由・基準がわからない」
このような人も多いですよね。
本記事では、ブログに最適な画像サイズ・容量を解説した上で、最適化する方法も具体的に紹介します。
紹介した内容を実施すると、画像を30kb~80kb程度に圧縮可能です。
具体的なサイズ基準も解説します。
ブログ用の画像をリサイズ・圧縮する理由は？
サイズが大きい画像を使用するとページの表示速度が下がり、結果的にGoogleからの評価が下がります。
「え、表示速度が遅いだけで評価が下がるの？」とあなたは思うかもしれません。
しかし、「Google search consoleヘルプ 」に以下のように記述されています。
速度が重要な理由
ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には:
ページの読み込み時間が 1 秒から 3 秒に増加すると、直帰率は 32% 増加します。
ページの読み込み時間が 1 秒から 6 秒に増加すると、直帰率は 106% 増加する。
遅いと判断されたページは、Google 検索での順位が下がる可能性がある。
ケーススタディをご覧ください。
出典：ウェブに関する主な指標レポート｜Google search consoleヘルプ
表示速度が遅いとユーザーにストレスを与えた結果、直帰率が上がりGoogle検索での順位が下がる可能性があるということ。
さらにGoogleは2021年6月中旬からCore Web Vitalsがランキング要因になるとも発表しており、表示速度に対する比重は今後加速していきます。
この記事を読んでいるあなたも、ページの表示速度が遅くてページバックしたことがありますよね。
そのようにならないためにも、画像をリサイズ・圧縮する必要があります。
「もっと表示速度を上げたい」という方は画像圧縮だけでなく、表示速度が早い有料テーマを導入するのも良いでしょう。
おすすめは当サイトでも利用している『SWELL』です。
ブログ用の画像はリサイズ・圧縮のどちらも必要
「圧縮してるけど、容量が小さくならない」という方も多いですよね。
画像は圧縮だけでなく、リサイズもしなければ容量を小さくするのは難しいです。
知らなくて2年近く圧縮だけしてました…
圧縮率をあげれば不可能ではありませんが、画像の品質が保てなくなってしまいます。
なので画像を圧縮する際は、以下の3手順で行いましょう。
- Webツールでリサイズ
- Webツールで圧縮
- プラグインで圧縮
この通りの手順を踏むと、ほとんどの画像を品質を保ったまま50kb以下にできます。
ブログ用の画像サイズ基準は2つ
画像のサイズ基準は以下の2つです。
- ブログ毎の最適サイズ
- Google砲を狙ったサイズ
それぞれ解説します。
サイズ基準１：ブログ毎の最適サイズ
最適なサイズは、ブログの横幅と同じ大きさです。
無駄に大きい画像は重たくなるので、最適なサイズにしましょう。
たまに「画像の横幅は○○px」と断言しているサイトもありますが、それぞれブログの横幅は異なるので一概には言えません。
ここでいう横幅とは、記事コンテンツエリアの幅を指します。
- Google Chrome（無料）を起動
- 測定したいブログにアクセス
- 画面上で右クリック→検証
- ツール中央付近「computed」をクリック
- 青い部分の数字を確認
上の方法で進めると色分けされた図形が出てくるので、記事コンテンツエリアと同じ色（今回は青色）の部分を確認しましょう。
※スマホの方は画像を拡大できます
当ブログの場合、横幅が667pxとなります。
以上がWordPressブログの横幅を確認する方法です。
また、その横幅があなたのブログの最適な画像サイズになります。
サイズ基準２：Google砲を狙ったサイズ
Google砲を狙う場合、横幅1,200pxが良いとされています。
Google砲（Googleアプリ砲）とは、Googleアプリ、Google Chromeにておすすめの記事として掲載されるほか、Googleアプリ内のGoogle Discoverに掲載されることにより急激なアクセスが集まる状態を意味します。
出典：Google砲(Googleアプリ砲)とは-確認方法とDiscover掲載条件｜medifund
1,200pxの根拠は、Google検索セントラルに以下の記載があるためです。
魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、
出典：Discover とウェブサイト｜Google検索セントラルmax-image-preview:largeの設定または AMP を使用して有効にする必要があります。サイトのロゴを画像として使用しないでください。
なのでGoogle砲を狙う場合は、少し画像容量が大きくなってしまいますが、横幅1,200pxに設定すると良いでしょう。
これは運営スタイルや取り扱うカテゴリにもよるため、一概に”どちらの基準が良い”とはいえません。
リターンの大きいGoogle砲を目指すか、最適な画像サイズで手堅く運営するかは自分次第です。
僕が運営するサイトは全て1,200pxで統一しています。（貪欲）
ブログ用の画像をリサイズする方法
リサイズする方法はいくつかありますが、無料ツールのBULK Resize Photosがおすすめです。
BULK Resize Photosは数あるツールの中でも軽量でUIも見やすいので直感的かつストレスなく利用できます。
『画像を選択』をクリックするか、ドラッグ＆ドロップで対象画像を選びます。
複数選択も可能です
- メニューから幅をクリック
- px数を入力
- 開始をクリック
完了と同時にリサイズされた画像がダウンロードされます。
以上でリサイズが完了です。
リサイズ前後のファイルサイズを見ると1/10以下になっていますね。
ブログ用の画像を圧縮する方法
画像の圧縮はWebツールとプラグインの両方で行います。
Webツールで大きく圧縮した後に、プラグインでさらに小さくするイメージ。
ツール・プラグインともに色々ありますが、以下の2つがおすすめです。
- ツール：Optimizilla
- プラグイン：EWWW Image Optimizer
それぞれ解説します。
圧縮方法：ツール
『アップロード』をクリックするか、ドラッグ＆ドロップで対象画像を選びます。
複数選択も可能です
『全てをダウンロード』をクリックすると圧縮された画像をダウンロードできます。
もし、個別にダウンロードしたい場合は、画像下にある『ダウンロード』をクリックすればOK。
ツールでの圧縮は以上です。
圧縮方法：プラグイン
WordPressテーマ「SWELL」お使いの方は、テーマ自体に同等の機能が備わっているのでプラグイン不要です。
次はプラグインEWWW Image Optimizerでの圧縮方法を紹介します。
EWWW Image Optimizerは、WordPressに画像をアップロード時、自動で画像を圧縮してくれるプラグインです。
さらに、すでにアップロード済みの画像も一括で圧縮してくれます。
表示速度を意識する前にアップロードしていた重たい画像も、ワンボタンで一括圧縮可能なのは嬉しいですよね
- WordPress管理画面のプラグインをクリック
- 「EWWW Image Optimizer」で検索
- 『今すぐインストール』をクリック
「EWWW Image Optimizer」の他に「EWWW Image Optimizer cloud」もありますが、設定画面に日本語があるため、「EWWW Image Optimizer 」を利用しましょう。
メタデータを削除のチェックマークにチェックを入れて、画面下部の『変更を保存』をクリックすれば完了です。
最後にアップロード済みの画像を一括圧縮しましょう。
WordPress管理画面で【メディア】>【一括最適化】と遷移します。
EWWW Image Optimizerをインストールすると出てくる項目です
上の画像のような画面が表示されたら、『最適化されていない画像をスキャンする』をクリック。
圧縮可能な画像数が表示されたら、『○○点の画像を最適化』というボタンが現れるため、クリックすれば完了です。
以上でアップロード済みの画像は一括で圧縮され、次回からアップロードされる画像も自動で圧縮されます。
リサイズ・圧縮に関するよくある質問
- 圧縮するファイルサイズの目安は？
-
ファイルサイズは30kb〜80kb程度がおすすめです。
画像サイズにもよりますが、ファイルサイズが30kb〜80kb程度なら画像の美しさを担保できます。
使用している画像の画素や色彩にもよって誤差はあります
- 画像のファイル形式は？
-
画像の属性によって異なります。
- 写真：JPEG
- イラスト：PNG
一番ファイルサイズが軽いのはJPEGですが、イラストの場合JPEGだと劣化してしまう可能性あるため、「とりあえず軽いからJPEG」というのはおすすめできません。
画像属性毎に適切な形式を採用しつつ、WebP対応を行うのが最良です。
- 圧縮したら画像が劣化しない？
-
圧縮率が高すぎると劣化してしまいます。
前述した通り、ファイルサイズが30kb〜80kb程度あれば美しさを担保できますが、画像サイズ・圧縮率によって差があります。
オリジナル画像は残しておき、劣化したら圧縮率を変えて様子を見てみましょう。
まとめ：ブログ用の画像は必ず圧縮・リサイズしましょう
本音をいうと圧縮・リサイズは手間がかかり面倒です。
しかし、ブログ運営はこういった細かい積み重ねで差がつきます。
「今日は疲れていて記事書けない」「なぜか集中できない」など、執筆ができない日にまとめて圧縮・リサイズするのがおすすめです。
お酒を飲んでしまった日にまとめて圧縮作業をしてます（笑）
慣れないうちは面倒かもしれませんが、上位表示する大事な要素だと受け入れ、コツコツがんばっていきましょう。
