ブログに画像を投稿する時、ちゃんと「圧縮」してから投稿していますか？
もしそうでないなら、おそらく下記の悩みがあるはず。
- ブログの表示速度が遅い
- 良い記事を書いているのに、なかなか検索上位に行かない
- アナリティクスを見ると、離脱率の高さが目立つ
上記のような問題を最も簡単に解決できる方法が、「画像のデータを軽くする」ことです。
ブログに投稿する画像は、必ず圧縮しなければいけない。なぜか？
いまいち答えられない人は、ぜひ当記事を読んで勉強しましょう。
目次
ブログに挿入する画像は必ず圧縮をしよう
大前提として、ブログに投稿する画像は、必ず「圧縮」してから投稿してください。
圧縮とは、後で解説しますが「データサイズを小さくすること」です。
その理由は、以下の通り。
- サイトが重たくなり、SEO評価が下がる
- ユーザビリティが低下する
- サーバーの容量を圧迫してしまう
それでは、順番に見ていきます。
サイトが重たくなり、SEO評価が下がる
圧縮していない画像をブログに投稿しまくると、サイトが重たくなります。
つまり「ページの表示速度」が遅くなり、ページ表示速度を何より重視するGoogleからの評価がダウン⤵︎⤵︎⤵︎
Googleから低評価を受けると、「SEO」評価が下がり、上位表示が難しくなります。
そうなると、どれだけ良い記事を書いても、全く報われません。
なので、必ず画像の圧縮を行ってから、ブログに投稿するようにしましょう。
| 定義 | 検索エンジン最適化のこと。主に検索エンジンのシェア率No. 1である「Google」に評価されるために行う取り組み。 |
| 目的 | Googleの検索エンジンで上位表示を狙い、ブログへのアクセスを増やし、「自動収益化」の仕組みを作ること。 |
ユーザビリティ（読者の満足度）が低下する
ページ表示速度が遅いと、ユーザーは記事を読む気が失せます。
すると離脱率が増え、Googleからの評価が下がり、これもまたSEO評価がダウン。
Googleのデータによれば、モバイルページの読み込みが3秒以上になると、離脱率が53%に跳ね上がるそうです。
新しい分析によると、モバイルのランディングページを完全に読み込むのにかかる平均時間は22秒です。それでも、モバイルサイトの読み込みに3秒以上かかると、訪問の53%が放棄されます。これは大問題です。
デメリットが大きいので、必ず圧縮した画像を使いましょう。
画像を圧縮しない唯一のメリットは、「最高画質の画像をお届けできる」こと。しかし、それと引き換えに失うものがデカい。
サーバーの容量を圧迫してしまう
画像を圧縮しないとデータサイズが大きいままなので、サーバーの容量を無駄に食います。
容量が小さいブログサービスを使っている場合、早々に有料プランへの切り替えが必要になることも。
レンタルサーバーであっても、プランごとに容量の上限はあるので、無駄な課金を強いられてしまいます。
つまり、「画像を圧縮することで、お金を節約できる」ということですね。
容量無限のブログサービスでも、ページ表示速度が落ちるため、画像の圧縮は必須です。
画像サイズには「表示サイズ」と「データサイズ」がある
「画像サイズを小さくする」には、以下の2つの意味があります。
- 「表示サイズ」を小さくする
- 「データサイズ」を小さくする
当記事で説いているのは、後者ですね。
まずは表示サイズについて見ていきます。
表示サイズ
実際にブログで表示される画像の大きさが、表示サイズです。
基本、表示サイズを小さくするとデータサイズも小さくなります。
しかし、「表示サイズをそのままに、データサイズを小さくする」ことも可能。
それが「画像の圧縮」ですね。
データサイズ
Webサイト運営において、「なるべく画像のデータサイズを小さくする」ことは大切です。
なぜかと言えば、繰り返しですが「サイトを軽くするため」ですね。
ここを怠ると、ブログの成功は遠のきます…。
SEOの観点から特に重要
画像の圧縮（＝データサイズの軽量化）は、SEO成功の鍵を握る超重要な要素。
数あるSEO改善の取り組みの中でも、画像の圧縮はわりと簡単で、なおかつ費用対効果が高い対策です。
たとえSEOを意識しなくても、ユーザビリティが低下するので、避けては通れない道。
なので、ブログにアップする画像は、データサイズを軽量化しましょう。
100KB以下にする
ここまで読んで、「データサイズは、どれくらいまで軽量化すればいい？」と思ったかもしれません。
巷では「200KB以下」やら「50KB以下」やら言われていますが、個人的には「100KB以下」がおすすめです。
なぜかと言えば、ブログに最適な画像サイズにすれば、自ずと100KB以下になるから。
実際に、当ブログの画像はほとんどが100KB以下になっており、もっと言えば大半が「50KB以下」です。
画像を圧縮しつつ、画質を維持する方法
基礎知識ですが、画像を圧縮すると、画質は低下してしまいます。
画像の圧縮とは、画像の中の情報を削ることで、データサイズを小さくする技術。
そのため、削られたデータ分だけ「画質が荒くなる」のです。
ここで覚えておくと良いのは、「データ圧縮方式」であり、次で解説しますね。
「PNG」と「JPG」の違いを理解しよう
画像のデータ圧縮方式で、代表的なものに「PNG（ピング）」と「JPG（ジェーペグ）」があります。
細かく見ると難しい技術ですが、要は下記の理解だけでOK。
- PMG：シンプルなイラストやグラフなどの画像の保存に適している
- JPG：写真などグラデーションの多い画像の保存に適している
テキスト系の画像はPNG形式が最適
テキストが多めの画像や、簡単なイラスト画像は「PNG」での保存が向いています。
しかし、PNGの弱点は「データサイズが大きくなる」こと。
なので、テキスト系の画像であっても、場合によってはJPGで保存する選択もありですね。
ぶっちゃけ、テキスト系の画像以外であればJPGでいいと思います。
写真系の画像はJPG形式が最適
写真など色合いが多い画像の保存は「JPG」の出番です。
なぜなら、JPGは「表現できる色合いが多い（1677万色）」という特徴を備えているため。
反対に、写真系をPNGで保存すると、圧縮してもデータサイズが大きくなります。
JPGだとデータサイズを小さく抑えられるので、写真系はJPGでの保存がおすすめですね。
万能型の「WebP（ウェッピー）」
WebPは、2010年にGoogleが開発した次世代の画像フォーマットです。
PNGとJPGの両方のメリットを引き継いでいるので、両者の「完全上位互換」ですね。
つい最近までは「WebPを表示できるブラウザが少ない」という問題がありましたが、今では解消されました。
そのため、画像のフォーマットは全て「WebPでOK！」です。
WebPはGoogleがサポートしている形式なので、後述するツールを使えば、画像をWebP形式に変換できます。
ブログの画像を圧縮するおすすめの手順
ここまでで、画像の圧縮に関する基礎的な部分を書いてきました。
ということで次は、画像を圧縮する流れについて書いていきます。
基本的には下記の流れで圧縮するのがおすすめ。
表示サイズを変更する
画像を圧縮（データサイズを小さく）する
①表示サイズを変更する
まずは画像のピクセル（px）サイズを変更しましょう。
基本はパソコンの操作で行いますが、下記のツールを使ってもいいです。
I LOVE IMG：複数の画像を一括でサイズ変更できる便利ツール。誰でも簡単に使える。
また、表示サイズは「ブログ記事の表示幅」を目安にしましょう。
ブログ記事の表示幅を確認する方法
記事幅はデバイスによって異なりますが、最も大きい「PCサイズ」に合わせるのがおすすめです。
スマホの幅に合わせると、PCで見た時に画像が小さくなってしまいます。
スマホユーザーが増えたとは言え、PCユーザーのことも考慮して、PCサイズに合わせるのが無難ですね。
✔️表示幅の確認手順
適当なブログ記事を開き、余白のところで「右クリック→検証（またはF12キー）」をクリック
ツールの表示位置を切り替えるため、ツール右上の3点リーダーをクリック
ツールの表示位置を「下側」に設定する
ツール左上の矢印アイコンをクリックして、検証コマンドを実行する
記事エリアの幅が全体に青く選択される箇所でクリックする
少し探しづらいけど、ツール右下の部分を下にスクロールして、測定結果を確認する
青枠の中が測定結果となり、左側の数値が記事エリアの「幅」を示す
測定結果は「横幅✖️縦幅」で表示されますが、縦幅は無視して大丈夫です。
画像で見ると「728」となっているので、「728px」がブログ記事の表示幅ですね。
この表示幅に合わせて、画像の横幅を調整すれば無駄がありません。
記事幅より幅の大きい画像を使っても、記事幅で最適化されます。
自動で表示サイズが変えられた場合は、データサイズが小さくならないので、勿体無いですね。
②画像を圧縮する
表示サイズを変更したら、あとはツールなどを使って画像を圧縮するだけ。
画像の保存はGoogleの「WebP」がおすすめと書きましたよね。
ということで、下記のGoogleが開発した高性能の画像圧縮ツールを使いましょう。
Squoosh（スクーシュ）：あらゆる画像圧縮ツールの最高峰。最大の長所はWebPで保存できる点。ただし、一枚ずつしか圧縮できないのが唯一のデメリット。
複数のWebP画像を一括で圧縮したいなら、WEBP 圧縮を使いましょう。
Googleの高性能の画像圧縮ツール「Squoosh（スクーシュ）」の使い方
Squooshは、やや使い方が難しいです。
とは言え、基本を覚えれば誰でも使えるレベルなので、ご安心を。
✔️Squooshの使い方
Squooshに画像をアップロードする。
Resezeを「ON」に切り替え、Width（幅）またはHeight（高さ）を指定してリサイズする。
変換するフォーマットを選択する。
- JPG変換→MozJPEG
- PNG変換→OxiPNG
- WebP変換→WebP
圧縮率を「0（最大圧縮）〜100（最小圧縮）」の間で調整する。
作業が終わったら、右下のダウンロードボタンを押して、画像を保存する。
- ブログの表示幅に合わせて「Width（幅）」を指定
- フォーマットを「WebP」に指定
- 圧縮は「80」で指定
Google翻訳を「ON」にすると、ツールの表示レイアウトが崩れ、ダウンロードボタンが押せなくなります。翻訳は要らないので「OFF」にしておきましょう。
ワードプレスプラグイン「EWWW Image Optimizer」もおすすめ
圧縮系プラグインですが、画像に関する優秀な機能がいくつか搭載されており、便利です。
- すでにアップロードした画像の一括圧縮化
- 遅延読み込み（スクロールに合わせて、表示領域に入った画像を順に表示する）
- WebP変換（WebP対応ブラウザではWebPで表示する）
- 画像の自動リサイズ（画像アップ時、設定した表示サイズに自動変換する）
- 画像のメタデータ削除（位置情報などの個人情報を画像から排除する）
圧縮率に関しては、Squooshの方が高いので、圧縮はツールに任せましょう。
また、上記で挙げた機能は、チェックボックスにチェックを入れるだけで動作します。
インストールするだけですぐ使えるプラグインなので、ぜひ使ってみてください。
ブログにおける最適な画像の比率
ブログで画像を使う際は、比率（アスペクト比）にも気を配るといいです。
- 16:9
- 1.91:1
- 4:3
- 3:2
- 1:1
アイキャッチ画像の比率
アイキャッチ画像には、特に比率に気を配りましょう。
なぜなら、アイキャッチ画像は「記事の顔」となる重要な部分だから。
いつも比率を気にせず適当に設定していれば、統一感のないブログになりますよね。
使用しているブログやテーマによって比率の設定は変わるので、調べてみましょう。
Googleが推奨しているアイキャッチ画像サイズは「1200px✖️630px」であり、比率は「1.91:1」です。作り方は次で解説します。
Googleが推奨する「1.91:1」の画像の作り方
特殊な比率であり、作成できるツール等が見つからなかったので、僕はPowerPointで自作しています。
有料ソフトになりますが、念のためやり方をご紹介しておきますね。
やり方は一つではないので、あくまで参考例です。
アイキャッチ画像をPowerPointに貼り付け、「図形→正方形」を挿入する。
図形を透明化させるため、「図形の書式設定」を開く。
塗りつぶし（単色）にチェックを入れて、透明度を「100%」に指定する。
比率が崩れないように、「Shift」を押しながら図形の角を掴んで拡大・縮小させ、画像と図形の幅を合わせる。
「トリミング」をクリック。
画像を図形に合わせてトリミングする。
1.91:1のアイキャッチ画像の出来上がり。
完成したら画像を保存し、幅を1200pxに変更して、高さが630pxになるか確認しましょう。
1200px✖️633pxなど、多少の誤差は許容範囲です。
図形を拡大・縮小させるとき、比率が崩れてしまった可能性が考えられます。「Shift」を押しつつ拡大・縮小させ、図形を画像の幅に合わせましょう。
拡散されることを考慮して、アイキャッチ画像を最適化しよう
ブログの記事は、TwitterやFacebookなどのSNSでシェアされることもあります。
また、Google Discoverに掲載されることもありますね（巷で言う”Google砲”）
それぞれで比率の規格が微妙に異なりますが、おおむね「1.91:1」で対応可能です。
ただ、以下の場合においては、画像の左右がカットされるため注意が必要。
- 検索結果でアイキャッチ画像が表示される時
- Google Discoverに掲載される時
- アプリで掲載される時
そのため、「1,200px✖️630px（1.91:1）」で作成し、中心の「600px✖️600px」の部分に表示範囲を収めましょう。
これなら、1.91:1のアイキャッチ画像が正方形でカットされても問題ありません。
「600px✖️600px」が最適とされる。
記事内の画像の比率
記事内で使う画像においては、そこまで比率に気を遣う必要はありません。
なぜなら、グラフなどの説明画像の場合、比率を整えるためのトリミングが難しいことがあるため。
見出し下などに使う装飾画像は「16:9」で統一し、それ以外の画像はブログ表示幅にだけ合わせる形でいいでしょう。
トリミングしてもさほど影響のない画像は「16:9」。それ以外は「自由比率」でOK。
ブログの画像に関するQ&A
最後に、画像の圧縮・最適化についての質問をまとめました。
画像の大きさをPCとスマホ両方で最適化できる？
- PCユーザーにはPC用の画像を表示
- スマホユーザーにはスマホ用の画像を表示
上記のようなことも可能です。
使用しているテーマによって対応が分かれますが、当ブログで使っているSTORK19では、下記のように設定できます。
この機能を使えば、PC用の画像とスマホ用の画像の両方を設定できるため、最適化が可能。
今使っているテーマが対応しているかどうか、調べてみましょう。
画像を2枚用意しなければいけないので、手間がかかります。
結局、PNGとJPGどちらを使うのがおすすめ？
イラストやテキスト系などの色合いの少ない画像なら「PNG」、写真系など色合いの多い画像には「JPG」。
圧縮性能はJPGの方が優秀なので、画質は最低限キープして軽量化を重視するなら、全てJPGで保存してもいいです。
そして、圧縮の時にWebPに変換すればいいですね。
Squoosh（スクーシュ）を使えば、「画像圧縮＋WebP変換＋表示サイズ変更」が同時にできて、非常に便利。
すでにPNGやJPGの画像を使っている場合は、下記のプラグインでWebP変換しましょう。
おすすめのフリー画像サイトってある？
商用利用ができるフリー画像サイトをまとめました。
フリー素材の取り扱いは、サイトによって規約が異なるので、ダウンロード前に確認しておいてください。
ちなみに、有料画像サイトは下記にまとめました。
おすすめは「PIXTA（ピクスタ）」と「Shutterstoctk（シャッターストック）」の2強。
しかし値段が張るので、安価に抑えつつそこそこのクオリティを求めるなら「Freepik（フリーピック）」がおすすめですね。
各ページの表示速度を確認する方法ってある？
ページの表示速度は画像データの重さと関係していますが、具体的に調べたい場合は、PageSpeed Insightsを使ってください。
使い方は簡単、表示速度を測定したいページのURLを入れるだけ。
測定結果を細かく見ると難しすぎて嫌になるので、とりあえず下記の部分をチェックすればいいです。
画像の通り、「ウェブに関する主な指標の評価」が「合格」であれば、心配無用ですね。
小さい画像をキレイに大きくする方法ってある？
基本的に、画像を拡大すると画質は荒くなります。
なるべくなら「元サイズ→縮小」が理想ですが、元データのサイズが小さい場合もありますよね。
そんな時は、kakudaiACを使ってみましょう。
ツールに画像をアップロードして、拡大倍率を設定するだけでOKです。
まとめ
ブログで成功したいなら、絶対に画像の圧縮はやっておきましょう。
「画質を落としたくないから圧縮したくない」と思う人もいると思いますけど、画像の軽量化と画質は「トレードオフ」です。
とは言え、WebP（ウェッピー）ならば「なるべく高画質をキープしつつ、高圧縮する」ことが可能。
なので、下記の流れがおすすめ。
おすすめの流れ
- I LOVE IMG：複数の画像を一括でリサイズできる
- Squoosh（スクーシュ）：圧縮率を自由に設定可能
- WEBP 圧縮：複数のWebP画像を一括で圧縮
- kakudaiAC：小さい画像を綺麗に拡大
- EWWW Image Optimizer：万能の画像系プラグイン
それでは、以上です。
ありがとうございました。
当ブログでは、他にもブログ運営に役立つ記事を書いているので、良ければ覗いてみてください。
こんにちは、リュウセイです！
ワードプレスブログ歴は約3年で、過去に377日ほど毎日更新しました。