ブログ画像の圧縮方法【最適な容量・サイズを自動リサイズで解決】

  • 2 min read
【全自動】ブログ画像を圧縮する方法【画質を落さずサイトスピードUP】

ブログ画像は、圧縮しないでアップロードするとサイトスピードが遅くなります。画像の容量が大きいと読み込みに時間がかかるからですね。

とはいえ、1枚1枚画像を圧縮して記事にアップしていくのはものすごく時間がかかります。なにより、工数が増えて非常にめんどくさい!もっとサクサクやりたい!

そこで今回は、ブログ画像の圧縮を全自動で行う、かつ高画質を保つ方法を解説します。

記事の投稿に集中できるので、ブログ作成のスピードが上がりますよ。

画像の圧縮方法をすぐに知りたい方

ブログ画像を圧縮する3つの理由

ブログ画像を圧縮するのは3つの理由があります。

画像を圧縮する理由

  • 元の画像サイズは大きすぎる
  • 画像の容量はサイトスピードに影響する
  • ブログ画像の拡張子はJPG/JPEGまたはPNGのみ

元の画像はサイズが大きすぎる

スマホで撮影した写真やフリー素材で取得した、元の画像はサイズが大きいです。

実は、Googleでは以下のように説明しています。

画像の幅は 1,200 ピクセル以上にする必要があります。

Google検索:構造化データ『Article』

こちらはAMPページ(※)に関する記述ですが、Googleは『幅1200px』を推奨しています。

スマホで撮影した写真や、フリー素材として提供されている画像は、サイズがかなり大きめになっていることがほとんど。下手をすると推奨サイズの3~5倍のサイズなんて画像もあるので注意が必要です。

※AMP(Accelerated Mobile Pages:通称『アンプ』)とは、モバイル端末でページを高速表示させるための仕組みのこと

画像の容量はサイトスピードに影響する

画像の容量はサイトスピードに影響します。容量が重たいとページの読み込みに時間がかかるため、そのぶんページを表示するのに時間がかかるためですね。

ブログで使用する画像枚数にもよりますが、基本的に1画像50~100KB以内に収めたいところ。

サイトスピードに関して、Googleも以下のように述べています。

モバイルサイトの訪問者の53%が、読み込みに3秒以上かかるページを離れています。

Think with Google

3秒以内にページが表示されないと、半数以上のユーザーが記事を読まずに離脱。「3秒って早すぎない!?」と思うかもしれませんが、調べたいものがあるときの体感速度は3秒以上に感じます。

離脱率が高いとSEO評価も下がってしまうため、サイトスピードを速くするために画像は50~100KB以下まで圧縮する必要があります。

ブログ画像の拡張子はJPG/JPEGまたはPNGのみ

画像の拡張子は、主に5種類があります。

拡張子の種類

  • JPG/JPEG
  • PNG
  • GIF
  • BMP
  • TIFF

これらのなかで、ブログ画像に使用するのは『JPG/JPEG』と『PNG』のみ。

どちらが良い、悪いというわけではなく、使用する画像の種類で判断しましょう。

  • PNG⇒アイキャッチ画像、スクリーンショット、図や表、文字入れ画像
  • JPG/JPEG⇒一部の写真(グラデーションやスキャン画像など)

ブログ画像は基本的にPNGにしておけば問題ありません。

ただし、画像サイズによって上記のとおりにならない場合も。『〇〇はPNG』『××はJPG/JPEG』などブログ内で扱う画像のルールを決めておくと良いです。

ブログ画像の圧縮方法2つ

ブログ画像を圧縮する方法は、主に2つあります。

画像を圧縮する方法
  1. プラウザ上の画像圧縮サイトを利用する
  2. 画像最適化プラグインを使用する

プラウザ上の画像圧縮サイト

プラウザ上で画像圧縮を行う場合は『i Love IMG』や『Tiny PNG』が有名ですね。

どちらも多くのブロガーが使用するツールですが、すべて手動で行わなければならない上に、圧縮が強いため画質は粗くなりがち。あまりおすすめはできません。

画像最適化プラグインを使用する

全自動でブログ画像を圧縮できるのは、この『画像最適化プラグインを使用する』方法です。

画像最適化プラグインは数多くありますが、例えば以下の5つ。

画像圧縮プラグイン
  1. EWWW Image Optimizer
  2. Autoptimize
  3. Shortpixel Image Optimizer
  4. Shortpixel Adaptive images
  5. Imagify

EWWW Image OptimizeやAutoptimizeは多くのブロガーがおすすめしているので、検索すると目にすることも多いと思います。が、僕はおすすめできません

なぜなら、圧縮後の画質が粗いうえにプラグインそのものが重い。利用者や紹介者が多いのは、日本語対応しているということだけではないでしょうかね。

僕のおすすめは、Shortpixel Image Optimizer、Shortpixel Adaptive Image、Imagifyの3つ。

Shortpixel Image Optimizer

Shortpixel Image Optimizer
Shortpixel Image Optimizer
Shortpixel Image Optimizerの特徴

  • 次世代画像フォーマットWebPに自動変換
  • WebP非対応のプラウザでは<picture>タグに変換
  • Retinaディスプレイ画像に対応
  • 大きな画像は自動でJPEG変換
  • APIキー取得でマルチサイトに対応可能

Shortpixel Image Optimizerは、過去画像も含めてブログ内の画像を自動で圧縮してくれ、オンザフライで最適化されます。

画像圧縮がLossy・Glossy・Losslessの3種類から選べるうえ、WebP配信で元画像の1/4~1/5の画像容量にも関わらず、圧縮前後で画質がほとんど変わりません

一定枚数を越えると有料となりますが、月150枚ほどであれば無料で利用できるため、個人サイトであればまず無料で問題ないでしょう。

Shortpixel Adaptive images

ShortPixel Adaptive Images
ShortPixel Adaptive Images
ShortPixel Adaptive Imagesの特徴

  • グローバルCDNキャッシュを使用する
  • 次世代画像フォーマットWebPに自動変換
  • 遅延読み込みのサポート
  • スマートクロッピングで最適サイズに調整
  • APIキー取得でマルチサイトに対応可能

ShortPixel Adaptive Imagesは、Shortpixel Image Optimizerをさらに進化させたプラグイン。なんとCDNによるWebP配信を行います。

CDN(Content Delivery Network)は、オリジンサーバー(ブログでいえばXserverやConoHaなどのレンタルサーバー)の負荷を減らすキャッシュサーバーを利用するネットワークのこと。

通常の画像圧縮とは異なり、データサーバーを介さずCDNキャッシュを利用するため読み込み時間が圧倒的に速くなります。新規アップロード画像にしか対応できませんが、他のプラグインとは一線を画す性能があります。

Imagify

Imagify
Imagify
Imagify

  • 画像圧縮はNormal、Aggressive、Ultraの3種類
  • 圧縮画像がオリジナル画像とほとんど変わらない画質
  • テーマやプラグイン内のデータ画像も圧縮可能
  • WebP非対応のプラウザでは<picture>タグに変換
  • APIキー取得でマルチサイトに対応可能

Imagifyは、画像最適化プラグインでもっともおすすめです。画像圧縮前後の画像で、画質の変化がほぼわかりません。それでいて圧縮率はNormalでも前述したEWWW Image Optimizerを凌ぎます。

メディアにアップロードした画像はもちろん、テーマやプラグインのデータ画像も圧縮可能。容量を超えると有料ですが、およそ月200枚ほどまでは無料で使用できます。

事前の画像処理が必要なく、全自動でとことん圧縮・高画質!サイトスピード高速化!

コード最適化プラグインのWP Rocketと互換性があり、組み合わせるとSEO評価・UXとも爆上がりの超高速サイトスピードを実現することができますよ。

ブログ画像の圧縮方法まとめ

ブログ画像の圧縮はサイトスピードに大きく関わります。

とはいえ、画像を1枚1枚処理していては時間がかかる上に、とにかくめんどくさい。そのため、全自動で画像を圧縮かつ高画質を保っていくれる画像最適化プラグインの使用がおすすめ。

おすすめの画像最適化プラグイン

  • Shortpixel Image Optimizer
  • Shortpixel Adaptive Images
  • Imagify

これらのプラグインを用いれば、めんどくさいブログ画像圧縮の手間が省けるうえにSEO評価・UXも向上します。ぜひ利用して、ブログの効率化と評価されやすいブログ作りをしましょう。

nv-author-image

4つの特化ブログを運営しながら、月収6桁を稼ぐブロガー。現在は開業してサロンサポーター&ブログ個別指導など実践しています。 WordPressに関すること(デザイン・カスタマイズ・テーマ・サーバーなど)が得意。なかでもサイトスピード改善サービスは個人/企業から高評価を得ています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です