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

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

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

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

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

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

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

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

になります。

①画像のサイズ

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

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

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

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

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

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

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

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

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

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

③画像の圧縮率と容量

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

④画像のファイルサイズ

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

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

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

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

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

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というプラグインです。

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

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

無料版を上手く使うコツ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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