PR ブログ運営

ブログに最適な画像サイズ・容量は?おすすめの圧縮方法も紹介

カメラを構える女性
悩んでるひと
悩んでるひと

ブログに載せる画像はどのくらいのサイズにすればいいの?

SEO(Search Engine Optimization)において、ブログの読み込み速度が重要視されています。

ブログの写真やイラストは見た目だけでなく、画像のサイズによって記事全体の読み込み速度も変わってくるため、読者の離脱率やSEO評価にも影響します。

この記事では、ブログに最適な画像サイズについて解説します。

キレイに見えて、速く読み込みできる画像サイズ・容量に加えて、簡単に最適化する方法も紹介するので、ぜひ参考にしてください。

ブログに最適な画像サイズとファイル容量

メジャー(巻き尺)

アイキャッチ画像や本文中に使う画像は必ずサイズ・ファイル容量を最適化しましょう。

ブログサイトのパフォーマンスがSEO評価に影響することはGoogleも公表しています。

サイトのパフォーマンスにはページの読み込み時間やレスポンス時間が含まれており、アイキャッチ画像や本文中の写真など、ブログの画像サイズが読み込み時間に大きく影響するんです。

スマホで撮った写真や高画質な画像をそのままアップロードするとブログが重たくなり、読者は長い待ち時間に耐えられず離脱しやすくなります。

また、検索エンジンもパフォーマンスが悪いサイトを読者に提供しないようにするため、SEO評価が低くなることもあるんです。

反対に画像サイズが小さすぎると画像が小さく表示されて、画像ごとに大きさもバラバラになってしまい、キレイにみえません。

では早速、ブログに最適な画像サイズ・ファイル容量について解説します。

ブログに最適な画像サイズ

はじめに画像のサイズについて解説します。

ブログに使う画像は横幅を1,000px程度にしましょう。

ブログの画像は本文エリアの横幅と同じか、少しだけ大きくなるなるようにしてください。

WordPressテーマやブログサービスの本文エリアは横幅600px〜900pxくらいなので、1,000pxあれば本文エリアの横幅にリサイズされてキレイに表示されます。

画像が大きすぎると読み込むのに無駄な時間がかかってしまい、反対に本文エリアよりも横幅が小さいと、画像が小さく表示されてキレイに見えません。

ちなみに、このブログの本文エリアは横幅692pxです。

自分のブログの横幅を確認したい方は、Google Chromeのデベロッパーツールを使えば確認できます。

横幅の確認方法

  • Google Chromeでブログを開いて、Windowsなら「F12キー」または「右クリック→検証」、Macの場合は「Option+Command+i」または「表示→開発/管理→デベロッパーツール」でデベロッパーツールを起動する
  • デベロッパーツール左上のカーソルマークをクリックする
  • ブログの本文エリアが青色に表示されるところでクリックする
  • デベロッパーツールの「Computed」タブをクリックする
  • 青色部分の値を確認する。横幅×縦の長さが表示される

ブログ本文の幅が確認できたら、画像の幅をピッタリ本文の幅と合わせてもいいですよ。

ブログに最適なファイル容量

次にブログで使う画像のファイル容量について解説します。

画像1枚あたりの容量は200Kbyte以下にしましょう。

スマホで撮った写真の容量は3〜5Mbyteくらいあるので、そのまま使うと10倍〜20倍くらい重たくなってしまいます。

また、画像のファイル形式はいくつかありますが、ブログでは一般的にJPEGかPNGが使われます。

中でもJPEGのほうが画質を保ったままファイル容量を小さくできることが多いのでおすすめです。

なお、シンプルなイラストの場合はPNGのほうがファイルサイズを小さくできることもあります。

ブログ画像をリサイズ、圧縮する方法

Photoshopで作業するひと

ではここから、画質とファイル容量のバランスを取ってブログに最適化する方法を紹介します。

以下で紹介するツールを使えば、誰でも簡単にできますよ。

ブログ画像をリサイズする方法

画像のサイズを変更することをリサイズといいます。

画像のリサイズはOSに付属しているアプリケーションだけでできます。

Windowsなら「ペイント」、Macなら「プレビュー」を使いましょう。

TinyPNGで画像を圧縮する

画像のファイル容量を小さくすることを圧縮と言います。

TinyPNG」は画質を保ったまま、ファイル容量を小さくしてくれるWebサーピスで、誰でも無料で使えます。

JPEGとPNGのファイル形式に対応していて、画像によっては70%以上も圧縮できますよ。

新たにアップロードする画像は、TinyPNGを使えば簡単に圧縮できます。

EWWW Image Optimizerで画像を圧縮する

EWWW Image Optimizer」は画質を保ったまま画像を圧縮してくれるWordPressのプラグインです。

無料で使えて、プラグインを有効化していれば画像追加したときに自動で圧縮してくれます。

EWWW Image Optimizerを使えば、新たにアップロードする画像だけでなく、既にブログにアップロード済みの画像もまとめて最適化できます

EWWW Image Optimizerとよく似たプラグインに「TinyPNG(旧:Compress JPEG & PNG images)」があり、こちらは上で紹介したTinyPNGのWordPressプラグインバージョンです。
こちらを使ってもいいですよ。

まとめ

ブログに載せる画像は見た目だけでなく、読者の離脱率やSEO評価にも影響します。

画像は以下を目安に最適化しましょう。

  • 横幅 1,000px程度
  • ファイル容量 200KB以下

リサイズはWindowsならペイント、Macならプレビューでできます。

ファイル容量の圧縮にはTinyPNGとEWWW Image Optimizerが便利です。

ブログに使う画像をどうやって用意すればわからない方は、以下を参考にしてください。

写真とメガネ
ブログで使えるフリー画像・素材サイトまとめ【商用利用もOK】

続きを見る

-ブログ運営
-