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

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

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

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

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

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

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

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

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

になります。

①画像のサイズ

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

  1. 画像自体の大きさ
  2. 画像のファイルサイズ

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

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

  • 画像の圧縮率
  • 画像のフォーマット

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

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

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

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

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

③画像の圧縮率と容量

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

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

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

Webで使用する画像データを最適化する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像圧縮できる便利なWebツール

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

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

④画像のファイルサイズ

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

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

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

アイキャッチはこの仕様で統一しています。(古い記事のアイキャッチも直さないと…。)

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

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

イラストの画像であれば、横が1200pxほどの大きな画像でも、使用している色が少なければ10KB〜20KBまで抑えられます。

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

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

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

可逆圧縮と非可逆圧縮

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

を導入しましょう。

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

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

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

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

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

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

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

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

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

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

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

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

無料版を上手く使うコツ

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

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

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

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

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

ブログでお薦めするプラグインの解説をする

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

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

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

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

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

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

ブログで使える画像素材サイトの紹介

ブログに使える画像素材サイト10選!各サービスの料金と特徴を徹底比較

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

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

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

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

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

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

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

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

ABOUT US

小林 玲王奈Unicorn Consulting Inc. 代表取締役 CEO

起業する人やスタートアップ企業に出資や資金調達を含めてサポートしながら、ブログの運営やWebアプリの開発、LINEスタンプ制作をしてひたすらキャラクターデザインをしています。

2003年から映像業界向けの様々な新規事業立ち上げに従事。2014年からは経営/メディアコンサルティング業も始めて2020年01月に独立しました。

今年から来年にかけて、世田谷の私立校で空中ディスプレイ技術とWebマーケティングの講義を行っています。

最近はアフィリエイト用の特化ブログを4サイト立ち上げて運用しています。

全部同じサイト構成、ブログ記事構成、文章構成なども似せてみて、収益を出すのに再現性があるか?などを試している日々です。

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

結果、基本はプラグインを減らしていくのが1番と知りました。

SMPTE Professional Engineer Member