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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

すると離脱率が増え、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。

テキスト系の画像は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サイズに合わせるのが無難ですね。

✔️表示幅の確認手順

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

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

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

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

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

②画像を圧縮する

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

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

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

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

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

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

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

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

✔️Squooshの使い方

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

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

圧縮系プラグインですが、画像に関する優秀な機能がいくつか搭載されており、便利です。

圧縮率に関しては、Squooshの方が高いので、圧縮はツールに任せましょう。

また、上記で挙げた機能は、チェックボックスにチェックを入れるだけで動作します。

インストールするだけですぐ使えるプラグインなので、ぜひ使ってみてください。

ブログにおける最適な画像の比率

ブログで画像を使う際は、比率（アスペクト比）にも気を配るといいです。

アイキャッチ画像の比率

アイキャッチ画像には、特に比率に気を配りましょう。

なぜなら、アイキャッチ画像は「記事の顔」となる重要な部分だから。

いつも比率を気にせず適当に設定していれば、統一感のないブログになりますよね。

使用しているブログやテーマによって比率の設定は変わるので、調べてみましょう。

Googleが推奨する「1.91:1」の画像の作り方

特殊な比率であり、作成できるツール等が見つからなかったので、僕はPowerPointで自作しています。

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

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

完成したら画像を保存し、幅を1200pxに変更して、高さが630pxになるか確認しましょう。

1200px✖️633pxなど、多少の誤差は許容範囲です。

拡散されることを考慮して、アイキャッチ画像を最適化しよう

ブログの記事は、TwitterやFacebookなどのSNSでシェアされることもあります。

また、Google Discoverに掲載されることもありますね（巷で言う”Google砲”）

それぞれで比率の規格が微妙に異なりますが、おおむね「1.91:1」で対応可能です。

ただ、以下の場合においては、画像の左右がカットされるため注意が必要。

そのため、「1,200px✖️630px（1.91:1）」で作成し、中心の「600px✖️600px」の部分に表示範囲を収めましょう。

これなら、1.91:1のアイキャッチ画像が正方形でカットされても問題ありません。

「600px✖️600px」が最適とされる。

記事内の画像の比率

記事内で使う画像においては、そこまで比率に気を遣う必要はありません。

なぜなら、グラフなどの説明画像の場合、比率を整えるためのトリミングが難しいことがあるため。

見出し下などに使う装飾画像は「16:9」で統一し、それ以外の画像はブログ表示幅にだけ合わせる形でいいでしょう。

トリミングしてもさほど影響のない画像は「16:9」。それ以外は「自由比率」でOK。

ブログの画像に関するQ&A

最後に、画像の圧縮・最適化についての質問をまとめました。

画像の大きさを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（ウェッピー）ならば「なるべく高画質をキープしつつ、高圧縮する」ことが可能。

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

おすすめの流れ

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