ブログの画像サイズで最適な大きさを分かりやすく解説

ブログで使用する画像の最適なサイズを分かりやすく解説

ブログで使用する画像サイズってどれくらいが最適なのか。

ブログを運営していると気になる所です。

ブログに使用する画像素材は、品質を高く保ちながら容量を押さえるという難しいことをやる作業です。

ブログ記事を書いていく上で、作業効率が良くなる画像ファイルの加工方法を解説します。

ブログで使用する最適な画像

ブログで使用する最適な画像

ブログで使用する最適な画像は、ざっくり言うと下記のような画像になります。

  1. 画像のサイズはなるべく大きく
  2. 画像のファイルサイズはなるべく小さく
  3. 画像の品質がなるべく高いもの

になります。

①画像のサイズ

画像のサイズというと2種類の意味を持ちます。

  1. 画像自体の大きさ(画像解像度)
  2. 画像のファイルサイズ(容量)

実は、画像自体の大きさ(画像解像度)についてはあまり意識する必要がありません。

何故なら、画像の品質に直結する要素は

  1. 画像の圧縮率
  2. 画像のフォーマット(JPGやWebPなどのコーデック)

の2つに気をつければ、画像自体のサイズ(画像解像度)が大きくても品質を調整できるからです。

②どんなディスプレイサイズを想定するか

画像の大きさを決める上で重要なのは、どれくらいの大きさのディスプレイで見ることを想定して画像品質を決めるかにあります。

例えば、横が320pxで縦が640pxのスマホと、横が1920pxで1080pxのPCディスプレイで見る場合を想定した場合、画像の大きさ自体はPCでみる横1920pxの大きさで画像を作成しても問題ありません。

重要なのは、画像の圧縮率です。

③画像の圧縮率と容量

横1920px縦1080pxの16:9の画像があったとします。

実際に試してみて欲しいのですが、大きな画像を高圧縮して60KBくらいにまでしてみてください。

画像の圧縮を細かく設定するには、Googleが提供しているSquooshを利用すると便利です。

関連記事:画像圧縮Webアプリ「Squoosh」で画像を最適化する方法

大きな画像を高圧縮で作成すると、一見スゴイ粗い画像になりますが、ディスプレイサイズの小さいスマホで見ると、それほど違和感がなくなります。

※あまりに高圧縮すると、画像の色が破綻してくるので、圧縮時にはプレビューをしながら見たほうがいいです。

なので、WordPressやCSSで指定している目一杯の横幅まで、画像のサイズは大きくしてしまっても大丈夫です。

最適な画像ファイルサイズ

最適な画像ファイルサイズ

画像ファイルはテキストに比べると、もの凄く大きな容量を占めるコンテンツになります。

テキストの容量は半角英数字で1バイト、全角で2バイトになります。

画像データが1枚あたり50KBだとすると、日本語の2バイト文字換算で2.5万文字分の容量です。

かといって、画像が全くないブログ記事も少しさみしいものになってしまいます。

なので、画像を上手く使いつつも、圧縮をうまく行いながら品質の高い画像としてブログに導入できる方法を覚えることが必要になります。

容量を抑えながらブログ記事を彩る工夫
  1. イラストを使用する
  2. 色数が少ない物を利用する
  3. 圧縮率を自分で調整する

①容量が小さく品質の高い画像を使うには?

これからは表示速度も検索エンジンの評価に繋がってくるということもあり、画像を使う場合はできる限り小さい容量で品質の高い画像ファイルを扱いたいものです。

この場合、使用する画像は「イラスト」画像を使うと容量を抑えつつ、品質の高い画像データにすることが出来ます。

②画像で使用している色が少ないもの

効率よく圧縮が出来る画像とは、画像内で使われている「色」の数が少ない物が最適です。

綺麗な写真もたくさん使用したいのですが、画像内で使用されている「色数」がとても多いので、品質の高い画像にしようと思うと、どうしてもファイルサイズが大きくなってしまいます。

絶対に写真画像でないと嫌だ!!というこだわりがなければ、なるべくイラスト画像を使って容量を抑えつつ記事ページに使用するようにしましょう。

③画像を圧縮するためのツール

Webブラウザ上で細かく画像の品質を調整して圧縮できるツールを下記の記事にまとめてみました。

関連記事:画像圧縮やリサイズをオンラインで行える便利なwebツールを解説

アイキャッチなどは、容量を抑えつつもなるべく高い品質を保ちたいので結構細かい調整をして圧縮しています。

④画像のファイルサイズ

当ブログで使用している画像情報を紹介します。

記事によってテイストを変えたりはしているのですが、概ね下記の内容にしています。

アイキャッチ
  1. 画像サイズ : 横1200px 縦675px 比率16:9
  2. 画像のファイルサイズ : 写真画像 / 100KB以下 イラスト画像 / 50KB以下
  3. 画像ファイルフォーマット : MozJPEG

アイキャッチはこの仕様で統一しています。

(はやく、古い記事のアイキャッチも全部直さないとです…。)

見出し下画像
  1. 画像サイズ : 横1200px 縦400px 比率3:1
  2. 画像のファイルサイズ : 写真画像 / 50KB以下 イラスト画像 / 20KB以下
  3. 画像ファイルフォーマット : MozJPEG

ブログ記事によって色々な縦横比の画像を利用していますが、概ね、この仕様で画像を使用しています。

WordPressの画像サイズで最適な大きさとは?

画像解像度の大きさを1200ピクセルにしている理由ですが、Discover にコンテンツが表示される仕組み|Google検索セントラルの文章内に下記の記載があるので引用します。

Discover にコンテンツが表示される仕組み

魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。サイトのロゴを画像として使用しないでください。

Discover にコンテンツが表示される仕組み|Google検索セントラル

上記の情報から、幅を1200ピクセルという解像度で統一してWebサイトの素材として利用しています。

1200ピクセルというと、大きな画像に感じるかも知れないのですが、特にイラストの画像であれば、横が1200pxほどの大きな画像でも、使用している色情報によっては10KB〜20KBまで抑えられます。

更に、色数の少ないイラスト系の画像を使用すれば、それほど品質はおちません。

関連記事:ブログで使う画像の縦横比率(アスペクト比)について実例をもとに分かりやすく解説

ワードプレスならプラグインで画像圧縮

ワードプレスならプラグインで画像圧縮

ブログのCMSがWordPressなら、プラグインで画像圧縮を半自動的に行う事も可能です。

可逆圧縮と非可逆圧縮

  1. 画像の品質をコントロールしたいなら、画像を可逆圧縮しているプラグイン
  2. とにかく容量を小さくしておきたいなら非可逆圧縮のプラグイン

を導入しましょう。

可逆圧縮(かぎゃくあっしゅく)

可逆圧縮とは、圧縮率を後からでも調整できるように圧縮率が調整できる仕様の圧縮技術です。

非可逆圧縮(ひかぎゃくあっしゅく)

非可逆圧縮は、一度圧縮したらその画像は元の画像に戻すことが出来ません。

その代わり効率の良い画像圧縮が可能になり、可逆圧縮に比べて圧縮率も高くなります。

常に元のデータは残しておく

WordPressのプラグインで圧縮を行うのか、Webツールを用いて自分で圧縮を行うのかによっても管理手法は変わりますが、基本的に自分の手元に元データは残しておきましょう。

画像圧縮に使えるプラグイン

画像圧縮に使えるプラグインは数多くありますが、筆者がオススメするのはImagifyというプラグインです。

画像圧縮をする容量に応じて、毎月の料金を支払うサブスクリプションなのですが、個人ブログのレベルだったら無料版をずっと使いすすける感じで利用できます。

Imagify導入のメリット
  1. 20MB/月まで、無料で圧縮できる
  2. WebPの画像アセットを利用可能
  3. Exifデータの自動削除機能

無料版とはいえ、有料ツールの使い勝手を持っているので、Webでよく紹介されている画像圧縮ツールに比べても必要な機能がひとつのプラグインで全て揃っています。

無料版を上手く使うコツ

毎月圧縮に利用できる容量は20MB/月なので、予めざっくりとした圧縮をしておきましょう。

圧縮のレベルをどれくらいにすれば良いのか

主なターゲットがPC向けユーザーの場合はAGGRESSIVE(アグレッシブ)、スマホ向けの場合はULTRA(ウルトラ)を利用しましょう。

たくさんのプラグインから選ぶ

この他にも、画像圧縮に関するプラグインの解説を下記の記事で解説していますので、参考になれば幸いです。

関連記事:WordPressブログのおすすめプラグイン10選!各プラグイン機能を徹底解説

最適な画像が見つかる素材サイトを紹介

最適な画像が見つかる素材サイトを紹介

ブログで使用する画像は、なるべくなら有料の画像を使った方がブログサイトのデザインが整います。

読みやすく、サイトスピードも速くてデザインのテイストが整っていると印象も良くなります。

下記の記事では、ブログで使用できる画像サイトをまとめた記事を作成しました。

こちらが参考になれば幸いです。

関連記事:画像素材サイト10選!各サービスの料金と特徴を徹底比較

最適な画像を使用してブログを飾る

最適な画像を使用してブログを飾る

画像データは容量が大きくなりがちです。

けれど、適切な画像の圧縮処理とページの読み込み処理をすれば、見出しごとに画像を使用してもそれほどサイトの読み込み時間には影響しません。

画像の圧縮をマスターして、ブログ記事を綺麗に飾っていきましょう。

また、この他にもブログに関する多くのノウハウを詰め込んだ記事を作成しています。

まとめ | ブログの継続に役立つリンク

ブログの継続に役立つリンク

当ブログの中からブログの運営に役立つ記事を集めてみました。

ブログの運営に必要な、WEBの基礎知識、文章術、SEO、収益化について、参考になる記事を集めています。

関連記事:ブログの開設は簡単にできる!サーバー&WordPressテーマ組み合わせ3選!

\レンタルサーバー移転しました!!/
ConoHa WINGかなり快適です^ ^

ConoHa WINGレンタルサーバー ConoHa WINGレンタルサーバー
ABOUT US
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

起業から法人化して初期の頃は、自分と同じく起業する人、スタートアップ企業への出資や資金調達を含めてサポートしていました。

最近は、主に自社のブログサイト運営やWebメディア、Webアプリの開発や運営、LINEスタンプやLINE絵文字等の2Dイラスト制作を中心にキャラクターデザインをしたり、3DCGによるコンテンツ制作事業をAR(拡張現実)と、VR(仮想現実)のプラットフォーム向けに行っています。

公式ブログサイトでは、「会社の収入だけに依存しない生活を手に入れる」ことをテーマにブログ記事を書いたり、ブログ運営を始める人のサポートを無償で行っています。

2003年から映像業界向けの様々な新規事業立ち上げに従事。

2014年からは経営/メディアコンサルティング業も始めて2020年01月に独立しました。

現在、ユニコブログ®以外にも、数十サイト以上の特化ブログを立ち上げて運用しています。

全て同じサイト構成、ブログ記事構成、文章構成など、検証可能な範囲で仕様を合わせてみて、収益を出すのに再現性があるか?などを試行錯誤している日々です。

他にも、ピックアップしているレンタルサーバーとWordPressテーマを総当たりで組み合わせてサイトスピードがどうなるかなど、思いついた事をひたすら検証する日々。

WordPress用のシンプルなプラグインやブログパーツの開発にもチャレンジしています。

SMPTE Professional Engineer Member

一般社団法人 日本ポストプロダクション協会認定 映像音響処理技術者

著書 : 『保存版 売上を向上させるためのYouTube活用術』

2020年度と2021年度の 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当。2022年度は土曜プログラム(マイプログラム)『仕事最前線』で講演

著述家 / ブロガー兼コンテンツクリエイター

プロフィールの詳細はこちら