ブログの書き方

【簡単】ブログに最適な画像サイズ・容量は?おすすめ圧縮方法も解説!

【簡単】ブログに最適な画像サイズ・容量は?おすすめ圧縮方法も解説!

この記事で解決できる悩み

本記事の信頼性

当ブログでは「お金・時間・場所に自由を」をコンセプトに、ブログの始め方やノウハウを発信します。僕のプロフィールはこちら

ブログの画像サイズ・容量を最適化することで、サクサク動く読みやすいブログを作れます。

商品・サービスが売れやすくなったり、SEO的に高く評価されたりとメリットしかありません。

しかし、最近ではスマホで撮影した写真や、フリー素材が高画質になっているため、そのままWordPressにアップロードすると重くなってしまうんですよね。

そこで、今回はブログに最適な画像サイズ・容量について解説します。

画像を圧縮する方法もわかりやすく解説するので、この記事を読んだらすぐに読みやすいブログを作れますよ!

うーご

それでは本題に入ります。

ブログのアイキャッチ画像については『ブログのアイキャッチ画像の作り方!最適なサイズやデザインのコツ!』を参考にどうぞ。

ブログの画像サイズ・容量の目安

ブログの画像サイズ・容量の目安

まずは、ブログの画像サイズ・容量の目安を解説します。

①画像サイズ:横幅1,000px程度

画像サイズは、横幅1,000px程度あればOKです。

なぜなら、ほとんどのブログでは、本文エリアの幅が600px〜900pxに収まるからですね。

たとえば、当ブログの場合、本文エリアの横幅は754pxとなっています。

副業フリーの本文幅

要するに、横幅が754pxより大きな画像であれば、自動的に本文エリアの横幅にリサイズされてくれるわけです。

逆に、本文エリアの横幅より小さい画像は、下記のように小さく表示されてしまいます。

※一応、WordPressで拡大できますが、強引にリサイズするため画質が悪くなります。

見栄えが悪くなってしまうので、最低でもブログの横幅より大きな画像を使用しましょう。

うーご

ブログの最適な画像サイズを確認する方法は、後ほど詳しく解説します!

②画像容量:200KB以下

画像の容量は、200KBを目安にしましょう。

これよりも容量が大きな画像をブログに載せると、ページの表示速度が遅くなったり、画像がなかなか表示されなかったりします。

ちなみに、フリー素材サイトの画像はほとんどが500KB〜2MB程度なので、そのまま使用しないよう注意が必要です。

WordPressにアップロードする前に200KB以下に圧縮して、サクサク動くよう調整しましょう。

うーご

画像の圧縮方法については、後ほど詳しく解説します!

自分のブログに最適な画像サイズを確認する方法

自分のブログに最適な画像サイズを確認する方法

「横幅1,000px程度」「容量200KB以下」を満たしていれば、基本的にブログ画像のサイズ・容量はOKです。

しかし、ブログによって本文エリアの幅は異なるため、最適な画像サイズには違いがあります

そこで、ここでは自分のブログに最適な画像サイズを知りたい人向けに、確認方法を解説します。

ブログの画像サイズの確認方法

ちなみに、このやり方はGoogle Chromeを使用することを前提としているため、使っていない人はダウンロードしてから先へ進んでください。

>>Google Chromeを使ってみる

①デベロッパーツールを開く

まずは、ブログ記事画面にて、デベロッパーツールを開きます。

デベロッパーツールとは?

Google Chromeから起動できる開発者向けデバッグツール。

※ブロガーの方は意味は覚えなくても大丈夫です!

Windows・Macそれぞれの開き方は、下記のとおりです。

  • Windows:「F12」or「右クリック→検証」
  • Mac:「option + command + i 」or「表示→開発/管理→デベロッパー ツール」
自分のブログの最適な画像サイズを確認する方法1

上記のような画面が表示できればOKです。

※デベロッパーツールのデザインは違っていても、気にする必要はありません。

②カーソルマークをクリックする

次に、デベロッパーツール左上にある、カーソルマークをクリックしてください。

自分のブログの最適な画像サイズを確認する方法2

上記のイメージですね。

③青色の本文部分をクリックする

カーソルを記事エリアに移動させると、カーソルの位置によって色味が変わります。

本文エリアが青く表示されたタイミングで、1回クリックしましょう。

自分のブログの最適な画像サイズを確認する方法3

クリックをしても見かけは変わらないので、何も起きなくても気にする必要はありません。

④「Computed」をクリックする

デベロッパーツールにある、「Computed」のタブをクリックしてください。

自分のブログの最適な画像サイズを確認する方法4

タブが切り替われば、OKです。

⑤最適な画像サイズを確認する

最後に、自分のブログの最適な画像サイズを確認します。

「Computed」のタブを開くと下記画面になるので、青色部分の数値をチェックしましょう。

自分のブログの最適な画像サイズを確認する方法5

拡大すると、下記のイメージですね。

自分のブログの最適な画像サイズを確認する方法6

当ブログの青色部分は、「754×56454.300」と表示されています。

この数字は「横幅×縦幅」を示すため、当ブログの横幅は「754px」だとわかります。

要するに、横幅「754px」の画像を使用すれば、記事幅にぴったりと表示されるわけですね。

以上で、自分のブログに最適な画像サイズを確認できました。

うーご

デベロッパーツールを閉じる方法は、Windowsなら「F12」、Macなら「option + command + i 」をクリックするだけです。(右上の「×」をクリックしてもOK)

ブログ画像のおすすめ圧縮方法3ステップ

ブログ画像のおすすめ圧縮方法3ステップ

ここからは、ブログ画像のサイズ・容量を最適化するための「圧縮方法」について、3ステップで解説します。

ブログ画像の圧縮方法

それぞれ解説します。

①画像をリサイズする

まずは、画像サイズを横幅1,000px前後にリサイズします。(もし用意した画像がすでに1,000px前後なら、この作業は不要です。)

Windows・Macのやり方をそれぞれ解説しますね。

リサイズのやり方(Windows)

Windowsにおける画像のリサイズは、デフォルトで搭載された「ペイント」を使用します。

step
1
プリントアプリを開く

まずは、ホーム画面の検索バーに「ペイント」と入力して、ペイントアプリを開きます。

Windowsで画像をリサイズする方法1

アプリが開かれたら、次のステップに進みます。

step
2
リサイズしたい画像を開く

画面左上の「ファイル」ボタンから、「開く」を選択してください。

Windowsで画像をリサイズする方法2

フォルダに移動するので、リサイズしたい画像を選択しましょう。

step
2
画像をリサイズする

「ホーム」のタブにある、「サイズ変更」をクリックしてください。

Windowsで画像をリサイズする方法3

下記画面が表示されるので、好みのサイズにリサイズしましょう。

「縦横比を維持する」にチェックを入れておくと、画像の見た目を崩さずにサイズ変更できます。

Windowsで画像をリサイズする方法4

リサイズが完了したら、「ファイル」→「名前を付けて保存」の順で進み、リサイズ後の画像を保存してください。

Windowsで画像をリサイズする方法5

以上で、Windowsにおける画像のリサイズは完了です。

リサイズのやり方(Mac)

Macにおける画像のリサイズは、デフォルトで搭載された「プレビュー」を使用します。

step
1
プレビューアプリを開く

まずは、Macのアプリリストから、「プレビュー」を開きます。

Macでリサイズする方法1

フォルダが開かれるので、リサイズしたい画像を選択して「開く」をクリック。

Macでリサイズする方法2

以上で、プレビューアプリが開かれました。

うーご

プレビューアプリは、フォルダで画像をダブルクリックして開くことも可能です!

step
2
「サイズを調整…」をクリックする

プレビュー画面にて、「ツール」→「サイズを調整…」の順で進んでください。

Macでリサイズする方法3

上記のイメージですね。

step
3
画像をリサイズする

サイズの単位を「ピクセル」に設定して、幅の数値を1,000px前後に調整しましょう。

Macでリサイズする方法4

ちなみに、「縦横比を固定」にチェックを入れると縦横比をキープできるので、元画像の縦横比を採用したい方は活用してみてください。

あとは、「OK」をクリックすれば、Macにおける画像のリサイズは完了です。

うーご

画像のリサイズが完了したら、次のステップに進みましょう。

②「TinyPNG」で圧縮する

次に、TinyPNG(タイニーピング)を利用して、画像を圧縮します。

TinyPNGとは、ほとんど画質を落とさずに画像を圧縮できるツールで、無料で利用可能です。

TinyPNGの特徴

  • 無料で利用できる(有料プランあり)
  • 60%〜80%程度の圧縮が可能
  • ドラッグ&ドロップで圧縮できる
  • PNG・JPEG・JPGに対応できる
  • 最大20枚/1枚5MBまで圧縮可能

それでは、先ほどリサイズした画像を圧縮してみましょう。

>>TinyPNGはこちら

step
1
画像をドラッグ&ドロップする

TinyPNGに移動したら、画像を下記のようにドラッグ&ドロップしてください。

tiny-png-1

ちなみに、TinyPNGでは複数画像をまとめて圧縮することも可能です。

※ただし、無料版では1度に圧縮できる枚数は20枚、画像1枚あたりの容量は5MBが上限となります。(有料プランは制限なし)

step
2
画像が圧縮される

ドラッグ&ドロップすると、自動的に画像が圧縮されます。

リサイズする方法6

今回は、480.3KBから71.3KBへ、85%の圧縮に成功しました。

ちなみに、複数画像をドラッグ&ドロップすると、下記のように表示されます。

「Download all」をクリックすると、圧縮された画像をダウンロードすることが可能です。

step
3
圧縮された画像を確認する

画像をダウンロードすると、下記のようにzipファイルがフォルダに保存されます。

tiny-png-4

上記が確認できたら、画像の圧縮は完了です。

>>TinyPNGはこちら

③「EWWW Image Optimizer」で最適化する

ewww-image-optimizer

「EWWW Image Optimizer」とは、画質をキープしたまま圧縮できるWordPressプラグインです。

WordPressに画像をアップロードすると、自動的に画像を圧縮してくれます。

では、先ほどリサイズ・圧縮をしたにも関わらず、なぜこのプラグインを導入するのか。

その理由は、EWWW Image Optimizerは、すでにWordPressにアップロードされた画像まで最適化できるからです。

導入後、簡単な初期設定をするだけで、既存の画像をすべてリサイズ・圧縮できます。

うーご

「じゃあ①②は不要なのでは?」と思うかもですが、EWWW Image Optimizerはうまく動作しないことがあるので、念のため①②のリサイズ・圧縮もしましょう。

ちなみに、EWWW Image Optimizerとよく似たプラグインにCompress JPEG & PNG images(TinyPNGのプラグイン版)もありますが、どちらも利用してもOKですよ。

>>Compress JPEG & PNG images

Q&A|ブログ画像サイズ・容量に関するよくある質問

Q&A|ブログ画像サイズ・容量に関するよくある質問

最後に、ブログの画像サイズ・容量について、よくある質問に回答します。

②JPGとPNGどっちがおすすめ?

圧倒的にJPGがおすすめです。

なぜなら、同じ画像サイズでも、基本的にはPNGよりJPGの方が軽いから。

画質は、ほとんど変わらないので、とりあえず「軽さ」を優先しましょう。

②イラストと写真どっちがおすすめ?

個人的には、イラストをおすすめしています。

なぜなら、配色が少ない「フラットデザイン」のイラストは、容量が小さいことが多いからです。

うーご

「フラットデザイン」のイラストとは、下記のような画像のことですね。

フラットデザインの例

フラットデザインの例

上記のイラストの容量は100KB未満なので、サイトスピードの高速化にかなり貢献してくれます。

ただし、しっかりとリサイズ・圧縮をすれば写真も軽くできるので、ブログの見やすさを最優先しましょう。

③おすすめのフリー素材サイトは?

当サイトでおすすめのフリー素材サイトは、下記のとおりです。

無料のフリー素材サイト

有料のフリー素材サイト

うーご

当サイトでは、主にShutterstockとUnsplashの画像を使用しています!

「なんで無料のフリー素材サイトがあるのに、有料サイトを利用するの?」と思うかもですが、他と差別化したおしゃれなブログを作るためには、有料サイトを使うのが近道なんですよね。

とはいえ、無料サイトでもたくさんの素材を見れるので、有料サイトは予算に余裕があれば検討する形でOKです。

おすすめのフリー素材サイトについては『【無料】ブログにおすすめフリー素材&画像サイト13選【商用利用OK】』で紹介しています。

④画像の縦横比のおすすめは?

ブログ画像の縦横比に、最適解はありません。

そのため、「自分のブログがよく見える比率」が縦横比の正解です。

とはいえ、縦横比をどうすべきか悩んでいる人も多いと思うので、おすすめ比率をいくつか紹介しておきます。

ブログ画像の縦横比の例

  • 3:2(一眼レフ・スマホ写真など)
  • 4:3(アナログテレビやPCディスプレイなど)
  • 16:9(デジタルテレビやYouTubeなど)
  • 1.618:1(黄金比)
  • 1.414:1(白銀比)

上記のイメージですね。

いろいろなブログを見ていても、いずれかの縦横比を採用しているケースがほとんどです。

うーご

ちなみに、当ブログでは「3:2」を採用しています!

⑤スマホ表示の画像サイズは設定する?

スマホで表示される画像は、PCサイズがそのまま反映されるため、特に設定は不要です。

スマホは極端に画面幅が狭くなりますが、画像サイズも合わせてリサイズされます。

一応、PC用・スマホ用の画像を用意してそれぞれ表示させることも可能ですが、あまりにも工数がかかるため、現実的ではないんですよね。

うーご

基本的にPCで見やすい画像は、スマホでも見やすいのでご安心を。

ただし、あまりにも縦長の画像は見づらくなる可能性があるため、その点は注意してくださいね。

まとめ:画像サイズ・容量を最適化して見やすいブログを作ろう!

まとめ:画像サイズ・容量を最適化して見やすいブログを作ろう!

この記事では、ブログに最適な画像サイズ・容量や、画像を圧縮する方法について解説しました。

ブログ画像のサイズ・容量の目安

  • サイズ:横幅1,000px前後
  • 容量:200KB以下

ブログ画像の圧縮方法

  • 画像をリサイズする
  • 「TinyPNG」で圧縮する
  • 「EWWW Image Optimizer」で最適化する

ブログの画像を最適化することで、ブログデザインにこだわりながら表示速度を追求できます。

細かいようで大切なことので、ぜひ本記事で紹介した方法をくり返し実践しましょう。

また、見やすいブログを作るためには、おしゃれなWordPressテーマを導入することも有効です。

当ブログで採用しているAFFINGER6については、『【2年使った】AFFINGER6を豪華特典付きレビュー!評判・購入方法も解説』でレビューしています。

また、ブログにおいて最重要なのは記事コンテンツなので、下記記事から手順やコツをチェックしてみてくださいね。

あわせて読みたい
【初心者向け】ブログ記事の書き方5つの手順・12のコツ【マニュアル】
【初心者向け】ブログ記事の書き方5つの手順・12のコツ【マニュアル】

今回は以上です。

-ブログの書き方