WordPress

WordPressブログでおすすめの画像サイズは?【リサイズや圧縮方法】

更新日 :

WordPressブログでおすすめの画像サイズは?【リサイズや圧縮方法もご紹介】
WordPressブログで挿入する画像のおすすめサイズを知りたい!
WordPressで画像サイズを圧縮する方法、リサイズの手順を知りたい!

今回はこういった悩みを解決していきます。

WordPressブログを運営する上で欠かせないのが画像の挿入です。

とはいえどのくらいのサイズの画像がふさわしいのでしょうか?

そこで今回はWordPressでおすすめの画像サイズ、リサイズや圧縮方法を分かりやすくご紹介します。

この記事でわかること

  • WordPressブログでおすすめの画像サイズ
  • WordPressブログでおすすめの画像ファイルサイズ
  • 画像をリサイズ・圧縮する方法
  • WordPressブログで適切なサイズの画像を使用する流れ

当サイトではプログラミングやWebサイト運営に関する記事を毎日投稿しています。
他の記事も合わせてご覧ください。

WordPressブログでおすすめの画像サイズ

WordPressでおすすめの画像サイズ

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

ここで言う「サイズ」とは画像の「縦の長さ」「横の長さ」を指します。

画像ファイルの大きさを示す"サイズ"は次の見出しでご紹介します

結論から申し上げるとおすすめの画像サイズは以下の通りです。

画像の種類横の長さ(ピクセル)縦の長さ(ピクセル)
アイキャッチ画像1200px630px
見出し下画像1000px ~ 1500px横幅に応じて変動するので特になし
挿入画像300px ~ 1500px横幅に応じて変動するので特になし

アイキャッチ画像

アイキャッチ画像のサイズ(1200px,630px)はGoogleやFacebookが公式で推奨しているサイズです。

これは解像度が良い&ブログが重くならない丁度いいサイズと言われています。

またこの縦横比ならFacebookやTwitterなどのSNSでシェアしたときに、アイキャッチ画像を途切らせることなく表示できます。

見出し下画像

見出し下の画像の横幅は、記事スペースの横幅を目一杯に使うケースが多いです。

そのため記事スペースの横幅より小さい画像を使用すると、レイアウトに凹凸が生まれて見づらくなってしまうのです。

WordPressテーマによって若干違いはありますが、横幅は少なくとも1000pxあれば大丈夫でしょう。

挿入画像

一方で記事内の挿入画像は「小さすぎて見えない」なんてことが無ければ、何ピクセルでも問題ありません

逆に横幅が長すぎるとファイルサイズが重くなってサイトスピードが遅くなる可能性がありますので注意しましょう。

WordPressブログでおすすめの画像ファイルサイズ

WordPressでおすすめの画像ファイルサイズ

続いてはおすすめの画像ファイルの容量サイズについて解説していきます。

結論から申し上げると、おすすめの画像ファイルの容量サイズはこちら。

  • 200KB(キロバイト)以下

基本的に200KBを超える画像は容量が大きいと言えます。

リサイズや圧縮をして容量サイズを改善する必要があるでしょう。

ちなみにKBとはキロバイトと言ってデータの容量を示す単位です。

他の単位との関係はこんな感じ。

単位の種類関係
bit(ビット)1bit
byte(バイト)8bit
KB(キロバイト)1024byte
MB(メガバイト)1024KB
GB(ギガバイト)1024MB
TB(テラバイト)1024TB

高性能なスマホやデジタルカメラ、一眼レフカメラで撮影した画像ファイルはサイズが大きく、数MB〜数十MBもの容量を持ちます。

どうしても高画質な画像を掲載したい方は、TwitterやInstagramにアップしたURLを載せておくのがおすすめです。

画像をリサイズ・圧縮する方法

画像をリサイズ・圧縮する方法

続いては画像サイズを小さくする方法として「リサイズ」と「圧縮」についてご紹介します。

両者の意味はこんな感じ。

リサイズと圧縮の意味

  • リサイズ:画像の縦幅・横幅の長さを変更すること
  • 圧縮:人の目には分からない程度に画質を落として容量を小さくすること

それぞれ詳しく見ていきましょう。

画像をリサイズする方法

まずは画像をリサイズする方法をご紹介します。

ちなみに方法は3つ。

  1. WordPressプラグインを使って自動で行う
  2. WordPressの標準機能で1枚ずつ行う
  3. リサイズツールのサイトを使う

ちなみに一番のおすすめは1つ目の「WordPressプラグインを使って自動で行う」方法です。

3つの詳細を見ていきましょう。

WordPressプラグインを使って自動で行う

WordPressプラグイン「Imsanity」では、画像をアップロードする際に自動でリサイズを行ってくれます。

Imsanityの設定画面Imsanityの設定画面

このようにリサイズする横幅・縦幅の上限、画像拡張子の変換などを自由に設定できます。

当ブログでは横幅の上限を1300pxとしています

Imsanityでは過去にアップロードした画像もまとめてリサイズできるので、非常におすすめです。

細かい使い方はこちらの記事をご覧ください「WordPressプラグイン「Imsanity」の設定方法と使い方【自動リサイズプラグイン】」

一括でリサイズを行うと、画像は元に戻せませんのでバックアップを取っておきましょう。

WordPressの標準機能で画像ごとに行う

WordPressの標準機能でリサイズさせることもできます。

まずはエディタ画面に挿入した画像クリックします。

編集ボタン

すると上画面のように鉛筆マークの編集ボタンが表示されますのでクリックしましょう。

リサイズ方法

編集画面を開くと「設定を表示」という項目の「サイズ」というメニューがあるはずです。

クリックしてメニューを開いてみましょう。

オプション選択

このように「中」「フルサイズ」「会話風アイコン」「カスタムサイズ」の4項目から選択できます。

融通がききやすい「カスタムサイズ」をクリックしましょう。

カスタムサイズ

するとこのように横幅と高さの入力欄が表示されますので、どちらかの長さをオリジナルで入力しましょう

片方を入力すると、もう片方の長さも縦横比から自動で変更されます

最後に「更新」ボタンを押して設定を反映させましょう。

リサイズに応じてファイル容量も小さくなっているはずです。

リサイズツールのサイトを使う

WordPressを使用している方は上の2つの方法でリサイズできるので、こちらの方法を使う機会は無いかもしれません。

ですが、いつかWordPressブログ以外に画像をリサイズする機会があるかもしれません。

念の為知っておきましょう。

リサイズの際はBULK RESIZEというツールを使います。

詳しい使い方はこちらの記事をご覧ください。

画像をリサイズする簡単な方法をご紹介
画像をリサイズするシンプルな方法を解説

画像ファイルを小さくしたいのでリサイズしたい! 今回はこんな疑問にお答えしていきます! 画像ファイルのサイズが大きいとサイトの読み込みに時間がかかって直帰率が上がってしまい、読まれるはずの記事も読まれ ...

更新日:2023年12月16日

画像を圧縮する方法

続いては画像を圧縮する方法をご紹介します。

ちなみに方法は2つ。

  1. WordPressプラグインを使って自動で行う
  2. 圧縮ツールのサイトを使う

ちなみに一番のおすすめは1つ目の「WordPressプラグインを使って自動で行う」方法です。

2つの詳細を見ていきましょう。

WordPressプラグインを使って自動で行う

WordPressプラグイン「EWWW Image Optimizer」では、画像をアップロードすると自動で圧縮してくれます。

EWWW Image Optimizer

他にも画像の自動圧縮や拡張子の変更にも対応しています。

基本的にEWWW Image Optimizerは初期設定が不要なので、プラグインの有効化と同時に圧縮を行うことができます。

すでにアップロード済みの画像に関しても圧縮可能なのでおすすめです。

圧縮ツールのサイトを使う

TinyPNG」というサイトを使えば、画像をまとめて圧縮できます。

こちらはWordPressプラグインではありませんが、非常に使いやすいのでWordPressブログ以外で画像圧縮するときに使用してみてください!

TinyPNGの詳しい使い方はこちらの記事がおすすめです。

TinyPNGの使い方【画像を超圧縮できる無料サービス】
TinyPNGの使い方【画像を超圧縮できる無料サービス】

「ウェブサイトに掲載する画像を圧縮したい!」 「画像ファイルが重くてサイトスピードが遅い...」 ウェブサイトの読み込みファイルの中で、画像ファイルはかなりの割合を占めています。 そのため画像ファイル ...

更新日:2022年11月28日

WordPressブログで適切なサイズの画像を使用する流れ

WordPressで適切なサイズの画像を使用する流れ

ではこれまでの内容を踏まえて、WordPressで適切なサイズの画像を使用する最もおすすめの流れをご紹介します。


  • プラグインの導入

    ImsanityとEWWW Image Optimizerのインストール&有効化


  • 各種プラグインの設定を行う

    Imsanityはリサイズの横幅の上限を設定しましょう。
    EWWW Image Optimizerは初期設定不要です。


  • アップロード済みの画像を最適化

    2つのプラグインを使って、すでにアップロード済みの画像を一括でリサイズ&圧縮しましょう。


  • 後はすべて自動にお任せ!

    初期設定が終わればそれ以降にアップする画像はすべて自動でリサイズ&圧縮されます。


WordPressプラグインがいかに効率的かが分かります

まとめ:WordPressブログでおすすめの画像サイズは?

まとめ:WordPressブログでおすすめの画像サイズは?

  1. WordPressブログでおすすめの画像サイズは横幅1000px〜1500px
  2. WordPressブログでおすすめの画像ファイルの容量は200KB以下
  3. 画像ファイルを最適化する時はリサイズ&圧縮をしよう

今回はWordPressブログでおすすめの画像サイズ、画像サイズを最適化する方法についてご紹介しました。

WordPressブログなどのウェブサイトでは、画像のサイズが大きすぎるとサイトの読み込みに時間がかかり、多くのユーザーが離脱してしまう恐れがあります。

いくらコンテンツが良くてもサイトスピードが遅くては、すべてが台無しになってしまうのです

ユーザービリティの高い快適なサイトを作るためにも、今回紹介した画像最適化の方法をぜひ実践してみてください!

もしも分からない部分があればお問い合わせフォームで質問して頂ければすぐに返信致します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

サイトスピードの高速化で困っている方はこちらの記事もおすすめです。

サイトスピードを改善・高速化する7つの方法をご紹介!
サイトスピードを改善・高速化する7つの方法を徹底解説

ウェブサイト運営やSEO対策の関係者の皆さん、サイトスピードの高速化は出来ていますか? サイトスピードはサイトのユーザービリティを大きく左右する重要な項目です。 私はインターン先のウェブ広告会社で、1 ...

更新日:2023年12月16日

ブログが思うように伸びなくて挫折しかけている方へ
初心者・未経験者でも大丈夫。
読むだけでその日から実践できるSEO対策を学びませんか?
>> 個人ブログを月間96,000PVに育て上げた裏ワザを徹底解説
>> ブログ開始4ヶ月でドメインパワーを0→28に上げた方法を全部教えます

  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-WordPress

Copyright © wagtechblog All Rights Reserved.