ブログの画像

ブログで成功したいなら、画像の圧縮は必ずやっておきましょう

リュウセイ

こんにちは、リュウセイです!

ワードプレスブログ歴は約3年で、過去に377日ほど毎日更新しました。

ブログに画像を投稿する時、ちゃんと「圧縮」してから投稿していますか?

もしそうでないなら、おそらく下記の悩みがあるはず。

  • ブログの表示速度が遅い
  • 良い記事を書いているのに、なかなか検索上位に行かない
  • アナリティクスを見ると、離脱率の高さが目立つ

上記のような問題を最も簡単に解決できる方法が、「画像のデータを軽くする」ことです。

ブログに投稿する画像は、必ず圧縮しなければいけない。なぜか?

いまいち答えられない人は、ぜひ当記事を読んで勉強しましょう。

ブログに挿入する画像は必ず圧縮をしよう

大前提として、ブログに投稿する画像は、必ず「圧縮」してから投稿してください。

圧縮とは、後で解説しますが「データサイズを小さくすること」です。

その理由は、以下の通り。

画像を圧縮すべき理由
  1. サイトが重たくなり、SEO評価が下がる
  2. ユーザビリティが低下する
  3. サーバーの容量を圧迫してしまう

それでは、順番に見ていきます。

サイトが重たくなり、SEO評価が下がる

圧縮していない画像をブログに投稿しまくると、サイトが重たくなります。

つまり「ページの表示速度」が遅くなり、ページ表示速度を何より重視するGoogleからの評価がダウン⤵︎⤵︎⤵︎

Googleから低評価を受けると、「SEO」評価が下がり、上位表示が難しくなります。

そうなると、どれだけ良い記事を書いても、全く報われません。

なので、必ず画像の圧縮を行ってから、ブログに投稿するようにしましょう。

定義検索エンジン最適化のこと。主に検索エンジンのシェア率No. 1である「Google」に評価されるために行う取り組み。
目的Googleの検索エンジンで上位表示を狙い、ブログへのアクセスを増やし、「自動収益化」の仕組みを作ること。

ユーザビリティ(読者の満足度)が低下する

ページ表示速度が遅いと、ユーザーは記事を読む気が失せます。

すると離脱率が増え、Googleからの評価が下がり、これもまたSEO評価がダウン。

Googleのデータによれば、モバイルページの読み込みが3秒以上になると、離脱率が53%に跳ね上がるそうです。

新しい分析によると、モバイルのランディングページを完全に読み込むのにかかる平均時間は22秒です。それでも、モバイルサイトの読み込みに3秒以上かかると、訪問の53%が放棄されます。これは大問題です。

モバイルページ速度の新しい業界ベンチマークにどのように対応しているかを調べてください

デメリットが大きいので、必ず圧縮した画像を使いましょう。

画像を圧縮しない唯一のメリットは、「最高画質の画像をお届けできる」こと。しかし、それと引き換えに失うものがデカい。

サーバーの容量を圧迫してしまう

画像を圧縮しないとデータサイズが大きいままなので、サーバーの容量を無駄に食います。

容量が小さいブログサービスを使っている場合、早々に有料プランへの切り替えが必要になることも。

レンタルサーバーであっても、プランごとに容量の上限はあるので、無駄な課金を強いられてしまいます。

つまり、「画像を圧縮することで、お金を節約できる」ということですね。

容量無限のブログサービスでも、ページ表示速度が落ちるため、画像の圧縮は必須です。

画像サイズには「表示サイズ」と「データサイズ」がある

「画像サイズを小さくする」には、以下の2つの意味があります。

  1. 「表示サイズ」を小さくする
  2. 「データサイズ」を小さくする

当記事で説いているのは、後者ですね。

「画像サイズ」には、「表示サイズ」と「データサイズ」の2つがある

まずは表示サイズについて見ていきます。

表示サイズ

実際にブログで表示される画像の大きさが、表示サイズです。

基本、表示サイズを小さくするとデータサイズも小さくなります。

しかし、「表示サイズをそのままに、データサイズを小さくする」ことも可能。

それが「画像の圧縮」ですね。

データサイズ

Webサイト運営において、「なるべく画像のデータサイズを小さくする」ことは大切です。

なぜかと言えば、繰り返しですが「サイトを軽くするため」ですね。

ここを怠ると、ブログの成功は遠のきます...。

SEOの観点から特に重要

画像の圧縮(=データサイズの軽量化)は、SEO成功の鍵を握る超重要な要素。

数あるSEO改善の取り組みの中でも、画像の圧縮はわりと簡単で、なおかつ費用対効果が高い対策です。

たとえSEOを意識しなくても、ユーザビリティが低下するので、避けては通れない道。

なので、ブログにアップする画像は、データサイズを軽量化しましょう。

100KB以下にする

ここまで読んで、「データサイズは、どれくらいまで軽量化すればいい?」と思ったかもしれません。

巷では「200KB以下」やら「50KB以下」やら言われていますが、個人的には「100KB以下」がおすすめです。

なぜかと言えば、ブログに最適な画像サイズにすれば、自ずと100KB以下になるから。

実際に、当ブログの画像はほとんどが100KB以下になっており、もっと言えば大半が「50KB以下」です。

画像を圧縮しつつ、画質を維持する方法

基礎知識ですが、画像を圧縮すると、画質は低下してしまいます。

画像の圧縮とは、画像の中の情報を削ることで、データサイズを小さくする技術。

そのため、削られたデータ分だけ「画質が荒くなる」のです。

ここで覚えておくと良いのは、「データ圧縮方式」であり、次で解説しますね。

「PNG」と「JPG」の違いを理解しよう

画像のデータ圧縮方式で、代表的なものに「PNG(ピング)」と「JPG(ジェーペグ)」があります。

細かく見ると難しい技術ですが、要は下記の理解だけでOK。

  1. PMG:シンプルなイラストやグラフなどの画像の保存に適している
  2. 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形式に変換できます。

ブログの画像を圧縮するおすすめの手順

ここまでで、画像の圧縮に関する基礎的な部分を書いてきました。

ということで次は、画像を圧縮する流れについて書いていきます。

基本的には下記の流れで圧縮するのがおすすめ。

STEP

表示サイズを変更する

STEP

画像を圧縮(データサイズを小さく)する

①表示サイズを変更する

まずは画像のピクセル(px)サイズを変更しましょう。

基本はパソコンの操作で行いますが、下記のツールを使ってもいいです。

I LOVE IMG:複数の画像を一括でサイズ変更できる便利ツール。誰でも簡単に使える。

また、表示サイズは「ブログ記事の表示幅」を目安にしましょう。

ブログ記事の表示幅を確認する方法

記事幅はデバイスによって異なりますが、最も大きい「PCサイズ」に合わせるのがおすすめです。

スマホの幅に合わせると、PCで見た時に画像が小さくなってしまいます。

スマホユーザーが増えたとは言え、PCユーザーのことも考慮して、PCサイズに合わせるのが無難ですね。

✔️表示幅の確認手順

STEP

適当なブログ記事を開き、余白のところで「右クリック→検証(またはF12キー)」をクリック

記事エリアの表示幅の確認1|デベロッパツールの立ち上げ
STEP

ツールの表示位置を切り替えるため、ツール右上の3点リーダーをクリック

記事エリアの表示幅の確認2|ツール表示位置の設定1
STEP

ツールの表示位置を「下側」に設定する

記事エリアの表示幅の確認3|ツール表示位置の設定2
STEP

ツール左上の矢印アイコンをクリックして、検証コマンドを実行する

記事エリアの表示幅の確認4|検証コマンドの実行
STEP

記事エリアの幅が全体に青く選択される箇所でクリックする

記事エリアの表示幅の確認5|記事エリア幅の選択
STEP

少し探しづらいけど、ツール右下の部分を下にスクロールして、測定結果を確認する

記事エリアの表示幅の確認6|検証結果の確認
STEP

青枠の中が測定結果となり、左側の数値が記事エリアの「幅」を示す

記事エリアの表示幅の確認7|測定結果

測定結果は「横幅✖️縦幅」で表示されますが、縦幅は無視して大丈夫です。

画像で見ると「728」となっているので、「728px」がブログ記事の表示幅ですね。

この表示幅に合わせて、画像の横幅を調整すれば無駄がありません。

記事幅より幅の大きい画像を使っても、記事幅で最適化されます。

自動で表示サイズが変えられた場合は、データサイズが小さくならないので、勿体無いですね。

②画像を圧縮する

表示サイズを変更したら、あとはツールなどを使って画像を圧縮するだけ。

画像の保存はGoogleの「WebP」がおすすめと書きましたよね。

ということで、下記のGoogleが開発した高性能の画像圧縮ツールを使いましょう。

Squoosh(スクーシュ):あらゆる画像圧縮ツールの最高峰。最大の長所はWebPで保存できる点。ただし、一枚ずつしか圧縮できないのが唯一のデメリット。

複数のWebP画像を一括で圧縮したいなら、WEBP 圧縮を使いましょう。

Googleの高性能の画像圧縮ツール「Squoosh(スクーシュ)」の使い方

Squooshは、やや使い方が難しいです。

とは言え、基本を覚えれば誰でも使えるレベルなので、ご安心を。

✔️Squooshの使い方

STEP

Squooshに画像をアップロードする。

Squooshの使い方1|画像の貼り付け
STEP

Resezeを「ON」に切り替え、Width(幅)またはHeight(高さ)を指定してリサイズする。

Squooshの使い方6|画像のリサイズ
STEP

変換するフォーマットを選択する。

Squooshの使い方3|変換するフォーマットの設定
STEP
  • JPG変換→MozJPEG
  • PNG変換→OxiPNG
  • WebP変換→WebP
Squooshの使い方4|各フォーマットの選択
STEP

圧縮率を「0(最大圧縮)〜100(最小圧縮)」の間で調整する。

Squooshの使い方5|圧縮率の調整
STEP

作業が終わったら、右下のダウンロードボタンを押して、画像を保存する。

Squooshの使い方7|画像のダウンロード
おすすめの設定
  1. ブログの表示幅に合わせて「Width(幅)」を指定
  2. フォーマットを「WebP」に指定
  3. 圧縮は「80」で指定

Google翻訳を「ON」にすると、ツールの表示レイアウトが崩れ、ダウンロードボタンが押せなくなります。翻訳は要らないので「OFF」にしておきましょう。

ワードプレスプラグイン「EWWW Image Optimizer」もおすすめ

プラグイン「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で自作しています。

有料ソフトになりますが、念のためやり方をご紹介しておきますね。

やり方は一つではないので、あくまで参考例です。

STEP

アイキャッチ画像をPowerPointに貼り付け、「図形→正方形」を挿入する。

Google推奨サイズのアイキャッチ画像の作り方1|図形を召喚
STEP

図形を透明化させるため、「図形の書式設定」を開く。

Google推奨サイズのアイキャッチ画像の作り方2|図形の透明化1
STEP

塗りつぶし(単色)にチェックを入れて、透明度を「100%」に指定する。

Google推奨サイズのアイキャッチ画像の作り方3|図形の透明化2
STEP

「図形の書式設定」タブに切り替え、高さを「16.66cm」、幅を「31.75cm」に指定する。

Google推奨サイズのアイキャッチ画像の作り方4|図形のサイズ変更

参考:測定単位計算機

STEP

比率が崩れないように、「Shift」を押しながら図形の角を掴んで拡大・縮小させ、画像と図形の幅を合わせる。

Google推奨サイズのアイキャッチ画像の作り方5|図形の大きさ調整
STEP

「トリミング」をクリック。

Google推奨サイズのアイキャッチ画像の作り方6|画像のトリミング1
STEP

画像を図形に合わせてトリミングする。

Google推奨サイズのアイキャッチ画像の作り方7|画像のトリミング2
STEP

1.91:1のアイキャッチ画像の出来上がり。

Google推奨サイズのアイキャッチ画像の作り方8|完成

完成したら画像を保存し、幅を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では、下記のように設定できます。

STORK19の画像の表示設定

この機能を使えば、PC用の画像とスマホ用の画像の両方を設定できるため、最適化が可能。

今使っているテーマが対応しているかどうか、調べてみましょう。

画像を2枚用意しなければいけないので、手間がかかります。

結局、PNGとJPGどちらを使うのがおすすめ?

イラストやテキスト系などの色合いの少ない画像なら「PNG」、写真系など色合いの多い画像には「JPG」。

圧縮性能はJPGの方が優秀なので、画質は最低限キープして軽量化を重視するなら、全てJPGで保存してもいいです。

そして、圧縮の時にWebPに変換すればいいですね。

Squoosh(スクーシュ)を使えば、「画像圧縮+WebP変換+表示サイズ変更」が同時にできて、非常に便利。

すでにPNGやJPGの画像を使っている場合は、下記のプラグインでWebP変換しましょう。

プラグイン「ewww-image-optimizer」

おすすめのフリー画像サイトってある?

商用利用ができるフリー画像サイトをまとめました。

フリー素材の取り扱いは、サイトによって規約が異なるので、ダウンロード前に確認しておいてください。

商用利用可のフリー画像サイト

ちなみに、有料画像サイトは下記にまとめました。

おすすめは「PIXTA(ピクスタ)」と「Shutterstoctk(シャッターストック)」の2強。

しかし値段が張るので、安価に抑えつつそこそこのクオリティを求めるなら「Freepik(フリーピック)」がおすすめですね。

各ページの表示速度を確認する方法ってある?

ページの表示速度は画像データの重さと関係していますが、具体的に調べたい場合は、PageSpeed Insightsを使ってください。

使い方は簡単、表示速度を測定したいページのURLを入れるだけ。

測定結果を細かく見ると難しすぎて嫌になるので、とりあえず下記の部分をチェックすればいいです。

PageSpeedInsightsの見方

画像の通り、「ウェブに関する主な指標の評価」が「合格」であれば、心配無用ですね。

小さい画像をキレイに大きくする方法ってある?

基本的に、画像を拡大すると画質は荒くなります。

なるべくなら「元サイズ→縮小」が理想ですが、元データのサイズが小さい場合もありますよね。

そんな時は、kakudaiACを使ってみましょう。

ツールに画像をアップロードして、拡大倍率を設定するだけでOKです。

kakudaiACの使い方

まとめ

ブログで成功したいなら、絶対に画像の圧縮はやっておきましょう。

「画質を落としたくないから圧縮したくない」と思う人もいると思いますけど、画像の軽量化と画質は「トレードオフ」です。

とは言え、WebP(ウェッピー)ならば「なるべく高画質をキープしつつ、高圧縮する」ことが可能。

なので、下記の流れがおすすめ。

おすすめの流れ

STEP

テキスト系画像は「PNG」、写真など色合いの多い画像は「JPG」で保存

STEP

Squooshで「画像圧縮+WebP変換+表示サイズ変更」をする

STEP

ブログにアップロードする

当記事で紹介した画像ツール等のまとめ

それでは、以上です。
ありがとうございました。

リュウセイ

当ブログでは、他にもブログ運営に役立つ記事を書いているので、良ければ覗いてみてください。

-ブログの画像