ブログ画像は、サイズや容量が大きいと読み込みに時間がかかるため、圧縮しないでアップロードするとサイト表示速度が著しく遅くなります。
とはいえ、1枚1枚画像を圧縮して記事にアップロードしていくのはものすごく時間がかかります。なにより、工数が増えて「めんどくさい!」「もっとサクサクやりたい!」という方も多いですよね。
そこで今回は、ブログ画像の最適なサイズ・容量と、その画像を自動最適化する方法を解説します。
▼圧縮方法をすぐ知りたい方はこちら▼
ブログ画像の最適なサイズ・容量
ブログのサイズは幅1,200px※、容量は100KB以内
標準的には以上のようなサイズ・容量が良いとされています。ただし、カメラ撮影写真などを使用する場合は、幅1,200pxにすると圧縮しても容量が膨大になってしまう可能性があります。
以下では、なぜ WordPress ブログ画像は幅1,200px・容量100KB以下が良いかを解説しておきます。
知っておいて損はないので、是非チェックしておきましょう。
リサイズ前のオリジナル画像はサイズが大きすぎる
画像の幅は 1,200 ピクセル以上にする必要があります。
Google 検索:構造化データ『 Article 』
実は、 Google では以上のように説明しています。
こちらはAMPページ※に関する記述ですが、 Google は『幅1,200px』を推奨しています。
スマホで撮影した写真や、フリー素材として提供されている画像は、サイズがかなり大きめになっていることがほとんど。
最近の WordPress テーマはスマホレスポンシブなため、デバイスに応じて画像サイズを変更する必要はありませんが、画像サイズ目安は幅1,200pxと覚えておきましょう。
ただし、画像を圧縮しても容量が100KB以内にならない場合は『幅<容量』と考え、横縦比を変えずに幅を狭くします。
※ AMP ( Accelerated Mobile Pages :通称『アンプ』)とは、モバイル端末でページを高速表示させるための仕組みのこと
ブログ画像の容量はサイト表示速度に影響大
WordPress ブログ画像の容量が重いとページ読み込みに時間がかかるため、サイト表示速度を著しく遅くします。
Aim to keep your total byte size below 1,600 KiB.
Avoid enormous network payloads
Google は、最適な総ページ容量を1,600KB(1.6MB)と述べています。
なにかの手順を解説するようなブログだと多くの画像を使用するため1,600KBを超えることも多い。
でも、基本的に1画像50~100KB以内に収めたいところ。100KBでも16枚で推奨ページ容量を超えるんでね。
ちなみにサイト表示速度に関して Google は以下のように述べています。
モバイルサイトの訪問者の53%が、読み込みに3秒以上かかるページを離れています。
Think with Google『Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed』
3秒以内にページが表示されないと、半数以上のユーザーが記事を読まずに離脱。「3秒って早すぎない!?」と思うかもしれませんが、調べたいものがあるときの体感速度は3秒以上に感じます。
記事の離脱率が高いとリンクのクリック率、成約率も低下して売上が落ちてしまうため、ブログ画像は50~100KB以下まで圧縮しましょう。
ブログ画像を圧縮する方法 | 最適化
WordPress ブログ画像を圧縮するには、このように2つの方法があります。
以下で、それぞれ解説していきますね。
画像圧縮ツールを使用する
『 Tiny PNG ※』や『 i Love IMG 』はブラウザ上で誰でも無料使用することができます。
圧縮したい画像を選択してワンクリックで強力に圧縮することができるので操作はかんたんですが、すべて手動で行わなければならず画質も粗くなりがち。
Adobe Photoshop は有料ですが、圧縮率をコントロールしやすいため画質も保てます。ただ、初心者には操作が難しいためデザイナーやクリエイター向けのツールと言えます。
※ Tiny PNG は WordPress プラグイン『 TinyPNG – JPEG, PNG & WebP image compression(旧: Compress JPEG & PNG images )』というものもあります。
画像最適化プラグインを使用する
※項目をクリックすると詳細を見れます
WordPress ブログ画像を最適化できるプラグインは、以上のようなプラグインです。
EWWW Image Optimizer
- 画像枚数に関わらず無料で利用できる
- 次世代画像フォーマット WebP に対応している
- 日本語対応で初心者も簡単に扱える
- API キーを必要としないためすぐに使える
- 画像をアップロードすると自動最適化する
EWWW Image Optimizer は、画像最適化として最も有名なプラグインの1つ。
WordPress に画像をアップロードすると自動で最適化します(アップロード済み画像も圧縮可能)。次世代画像フォーマット WebP 変換にも対応しているため、 JPEG や PNG と画質が変わらず容量をさらに軽量化することができます。
日本語対応している上に、 API キーを必要としないためアカウント登録なども必要なし。日本での利用者数も多いため、初心者でも安心して使用することができるのも嬉しいですね。
>> EWWW Image Optimizer をダウンロードする
Autoptimize
- 登録もなく無料で利用できる
- API キーを必要としないためすぐに使える
- 画像をアップロードすると自動最適化する
- HTML / CSS / Javascript などのリソースも最適化できる
- サイト表示速度を高速化できる
Autoptimize は画像だけではなく HTML / CSS / Javascript といったリソースも最適化することができるため、総合的にサイト表示速度を高速化することができます。
アカウント登録がなく無料で利用できるため日本での利用者も多い。ただし、コードなどリソースの最適化をする場合はサイトの不具合を起こす可能性があるため注意が必要です。
画像の最適化目的で利用するなら、項目にチェックを入れるだけなので手軽に操作できる便利なプラグインですね。
Shortpixel Image Optimizer
- 次世代画像フォーマット WebP に自動変換
- WebP 非対応のプラウザでは<picture>タグに変換
- Retina ディスプレイ画像に対応
- 大きな画像は自動で JPEG 変換
- API キー取得でマルチサイトに対応可能
Shortpixel Image Optimizer は、過去画像も含めてブログ内の画像を自動で圧縮してくれ、オンザフライで最適化されます。
画像圧縮が Lossy / Glossy / Lossless の3種類から選べるうえ、 WebP 配信で元画像の1/4~1/5の画像容量にも関わらず、圧縮前後で画質がほとんど変わりません。
一定枚数を越えると有料となりますが、月150枚ほどであれば無料で利用できるため、個人サイトであればまず無料で問題ないでしょう。
Smush – Lazy Load Images, Optimize & Compress Images
- 最大5MBまでの画像を全て無料で最適化できる
- 次世代画像フォーマット WebP に自動変換(有料プラン)
- 画像を遅延読み込みできる( Lazy load )
- スマートクロッピングで最適サイズに調整
- メディアファイル以外の画像ファイルも最適化できる
Smush – Lazy Load Images, Optimize & Compress Images は、100万ダウンロード以上を誇る世界的に有名な画像最適化プラグイン。
アップロードした画像を自動圧縮するだけでなく最適なサイズにリサイズ、遅延読み込み( Lazy load )してくれるため、ページ容量を軽量化してサイト表示速度を高速化できます。
Smush はメディアファイル内以外の画像も最適化してくれるため、サイト全体を軽量化することが可能。次世代画像フォーマット WebP は有料プランですが、 WebP 変換が必要なければ無料プランで充分でしょう。
Imagify
- 画像圧縮は Normal / Aggressive / Ultraの3種類
- 圧縮画像がオリジナル画像とほとんど変わらない画質
- テーマやプラグイン内のデータ画像も圧縮可能
- WebP 非対応のプラウザでは<picture>タグに変換
- API キー取得でマルチサイトに対応可能
Imagify は、画像最適化プラグインでもっともおすすめです。 WordPress 画像をきれいに保ちながら、それでいて圧縮率は Normal でも前述した EWWW Image Optimizer を凌ぎます。
メディアにアップロードした画像はもちろん、テーマやプラグインのデータ画像も圧縮可能。容量を超えると有料ですが、およそ月200枚ほどまでは無料で使用できます。
事前の画像処理が必要なく、全自動でとことん圧縮・高画質!サイトスピード高速化!
コード最適化プラグインの WP Rocket と互換性があり、組み合わせると SEO 評価 / UX とも爆上がりの超高速サイトスピードを実現することができますよ。
ブログ画像の最適なサイズ・容量・圧縮方法 | まとめ
ブログ画像に最適なサイズ・容量、圧縮方法を解説しましたが、最後にもう1度まとめます。
- サイズは幅1,200px(容量優先で必要に応じて狭くする)
- 容量は1枚につき100KBまで(ページ容量は1,600KBが目安)
- 画像の最適化は、①画像圧縮ツール、② WordPress プラグインの2パターンある
- 手間なく効率的に画像最適化するならプラグインを使用する
ブログ画像を最適化するとページが軽くなり、ページ表示速度が高速化します。
Google は PageSpeed Insights のスコアを目安とした Core Web Vitals で SEO 評価するため、ページ表示速度を高速化することが大切です。
ブログ画像はページ表示速度の重要な要素なため、ぜひ今回紹介した内容を参考にしてユーザー・ SEO に評価されやすいブログ作りをしましょう。
画像を最適化できたら、次に画像SEO対策として『 代替テキスト( alt 属性)=画像の意味 』も意識してみてくださいね。
記事の内容についてご意見をお聞かせください