ブログに適した画像サイズとは？リサイズや便利な圧縮方法を解説

ブログ記事を作成するときに迷いがちなのが画像のサイズです。

素材サイトから画像をダウンロードしたり、自分で撮影した写真を使用したりする際に、どのくらいのサイズが適正なのかは、誰しも気になるところでしょう。

画像はそのまま使っているという人もいるかもしれませんが、ファイルサイズが大きいとページの表示速度が遅くなり、ユーザーが離脱しやすくなるなどの悪影響が出てきます。

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

ブログの記事を作る際に、画像のサイズは注意しなければならないポイントのひとつです。

サイズの大きすぎる画像はデータ容量が大きく、ウェブページの表示スピードを遅くするため、ユーザーの離脱に繋がる可能性があるからです。

ウェブコンテンツを読むユーザーは基本的にせっかちで、すぐに情報を得られることを期待してブログに訪れているので、その期待に応えてくれないと判断すれば、あっという間にブログから立ち去ってしまいます。

検索エンジンやSNSから訪れた、新規読者として定着するかもしれないユーザーをみすみす逃してしまうのは、非常にもったいないことです。

また、Googleはウェブページの評価要素のひとつに表示速度があることを公式に表明しており、サイトの表示スピードを早くすることは、検索順位の上位に入るための有効な施策の一つとなっています。

しかしその一方で、データ容量を抑えようとして画像のサイズを小さくしすぎると、画像のインパクトが失われるため、ビジュアル面での充分な効果を期待できません。

また、画像のサイズを変えないまま無理にデータ容量を圧縮しようとすると、画像のディテールが潰れたり、繊細な色調が失われたりしてしまいます。

ウェブページの表示速度と、画像の魅力を両立させるためには、大きすぎず小さすぎない、最適な画像サイズを見極める必要があります。

ブログに使用する画像は、最適なサイズで掲載する必要がありますが、具体的にどのくらいのサイズがベストなのかについて解説していきます。

ブログで記事内に利用する画像は、コンテンツの枠の横幅いっぱいに掲載するのが基本です。

それより小さいサイズの画像は、スマホなどのモバイルデバイスで表示されたときに、拡大しないと内容を判別できないため、ユーザーに目に留めてもらいにくくなります。

ただし、WordPressでは導入しているテーマによってコンテンツ幅が異なります。

そこでGoogleのデベロッパーツールでブログの横幅のサイズを調べてみましょう。

Google chromeで調べる対象のウェブページを開いたら、右クリックのメニューから「検証」を選択し、デベロッパーツールを開きます。

デベロッパーツールは、Windowsの場合はCtrl+Shift+「I」か、もしくはF12、MacOSの場合はoption + command + 「I」のショートカットで簡単に起動できます。

デベロッパーツールの左上にある矢印のついたアイコンから「セレクトモード」を選択し、ブログの本文エリアをクリック、本文のエリアが青色になったら、デベロッパーツールの同じ色のボックスを確認します。

Google砲とは、ブログの記事が「Google Discover」に掲載されることを指して使われています。

Google DiscoverはGoogle検索に付属しているアクセス履歴を元におすすめのコンテンツを紹介する機能で、Google Discoverに掲載された記事は爆発的にアクセスが増えることから、その名で呼ばれています。

Google Discoverへ掲載されるためにはいくつか条件がありますが、その中に「適切な画像が使われていること」という項目があります。

Googleの公式の情報によると

• 参考：Discover とウェブサイト｜Google検索セントラル

とあり、横幅1200px以上のサイズの画像が推奨されています。

Google砲を狙っていくのであれば画像幅は1200px以上に設定すべきでしょう。

画像の容量を小さくする方法には、「リサイズ」と「圧縮」の2つの方法があります。

どちらも容量を小さくする処理ですが、その中身は異なります。

リサイズは、画像はそのままの状態で解像度だけを低くする方法ですが、データ容量を減らす分、画質の低下も避けられません。

そのため、画質の劣化が気にならない許容範囲を見極めながらの処理が必要となります。

圧縮は、画像のファイル形式を変更することでデータ容量を変化させる方法で、画質が劣化しない可逆圧縮と、画質が劣化する非可逆圧縮の2種類があります。（詳しくは後述します。）

ここでは前者のリサイズの方法について解説します。

画像のリサイズでもっとも標準的な方法は、Adobe PhotoshopやCanva、GIMPといった画像編集ソフトに画像を取り込んで、リサイズにより解像度を下げる処理を行う方法です。

これらのツールを使ったリサイズでは、どの程度までデータ容量を小さくするか厳密に指定できるほか、リサイズ前とリサイズ後の画質の変化を見比べながらチェックする機能もあるため、クオリティの劣化が最小限になるよう、自分の目で判断しながら作業ができます。

画像のリサイズにあたって、画質を見ながら設定を調整したい場合に最適な方法です。

時間や手間をかけずにリサイズ処理を行いたい場合には、オンラインサービスの「BULK Resize Photos」を利用しましょう。

ソフトをインストールする必要もなく、無料で画像のリサイズが行えます。

サービスにアクセスすると「ここに画像をドラッグ＆ドロップ！」という場所が表示されるので、そこにリサイズしたい画像をアップロードしましょう。

リサイズに関する設定項目が用意されていて、変換後のファイルサイズや画像の寸法を入力し、それに合わせたリサイズが可能です。

上述したブログのコンテンツ幅に合わせたリサイズを行いたい場合も、横幅だけを指定すれば、それに合わせて自動的に縦幅が調整された画像が出力されます。

エキスパートモードを選ぶと「JPG」や「WEBP」などの拡張子を選択することも可能です。

複数の画像を一括でリサイズできるので、大量の画像をリサイズしたい時にも重宝するツールです。

画像のデータ容量を小さくするもうひとつの方法が圧縮です。

画像の圧縮では、ファイル形式を変更することで画像のデータ容量を小さくできます。

どの程度の圧縮を行うかは変換する際に指定できますが、あまり圧縮の度合いを強め過ぎると、画像の描画の細やかさや色彩の繊細さが失われる点に注意が必要です。

画像の圧縮方法には可逆圧縮と不可逆圧縮があり、それぞれの違いは次の通りです。

可逆圧縮とは圧縮したデータを完全に元の状態に戻すことができる圧縮方法のことです。

元データが復元可能な範囲でしか圧縮されないため、不可逆圧縮（非可逆圧縮）と比較すると圧縮率は劣りますが、画質の劣化が発生しない点は大きな魅力です。

可逆圧縮の代表的な形式は「GIF」や「PNG」などです。

非可逆圧縮とも呼ばれ、人間の目では判別が難しい微妙な差異を消去することで、画像の容量を小さくする圧縮方式です。

データ容量を大幅に小さくできるのが特徴ですが、あまり圧縮率を高めすぎると、色の階調のギャップが目立ったり、境界線にギザギザの段差が発生したりするなど、目に見えて画質が劣化します。

非可逆圧縮では、圧縮の過程で情報を捨て去っているため、元の画像に完全に復元することができないことから「不可逆」という文言がつきます。

不可逆圧縮の代表的な形式は「JPEG」です。

以上を踏まえて、ブログの画像を圧縮できるWordPress用の2つのプラグインを紹介しましょう。

「TinyPNG」は可逆圧縮のPNG形式でありながら、高い圧縮率での変換が可能なオンラインサービスです。

このTinyPNGを、WordPressのプラグインとして利用できるようにしたのが「Compress JPEG & PNG images」です。

WordPressに導入すると、新規に掲載する画像だけでなく、既にブログ記事に投稿済みの画像についても圧縮処理を施すことができます。

毎月500点までは無料での圧縮に対応しているので、過去記事の画像をまとめて圧縮し、サイズを小さくするのに最適です。

画像を1枚ずつ個別に圧縮することも可能なので、圧縮したい画像が500点以上ある場合は、大きい画像を選んで優先的に圧縮するようにしましょう。

「EWWW Image Optimizer」もブログの画像を圧縮するWordPressプラグインです。

このプラグインを導入すると、掲載する記事の画像を自動で圧縮してくれるようになり、画像の横幅の設定をしておくことで、設定幅以上に大きな画像をアップロードした際にも自動的にリサイズが行われます

EWWW Image Optimizerは次世代の画像フォーマットであるWebP形式に対応しているのも大きな特徴です。

WebPはGoogleが開発している画像形式で、可逆圧縮と非可逆圧縮の両方に対応し、いずれを選択しても高い圧縮率でファイルサイズを削減できるメリットがあります。

WebP形式は未対応のブラウザもあるため、全ての画像をWebPに切り替えるのは難しいですが、EWWW Image Optimizerには、ブラウザの対応状況に合わせて自動で画像の形式を合わせてくれる機能が搭載されています。

ただし、このWebP画像の使い分けには、サーバー内にある「.htaccess」という、慎重に扱う必要のあるファイルを編集する必要があるため、ブログ運営に不慣れな人にはおすすめしません。

今回は、ブログの画像の最適なサイズの見極め方や、リサイズ・圧縮の方法について解説しました。

ウェブページの表示スピードは、利用者の利便性だけでなく、SEOの観点からも非常に重要な要素となっています。

用意した画像をそのままアップするのではなく、最適なサイズに変換する一手間を挟むことで、サイトのパフォーマンスをより高いレベルに引き上げることができます。

一括でのリサイズや圧縮処理に対応したツールも複数、提供されているので、ブログの画像サイズの最適化にぜひチャレンジしてみてください。

ブログを始めるには、ライブドアブログやはてなブログといった無料ブログを使う方法、あるいはWordPressなどを使用する方法があります。

まだWordPressを持っていない人でも、簡単に準備できる方法を以下の記事で解説してます。
初心者でもわずか10分で始められるので、参考にしてみてください。

「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。

WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはず。

独自ドメインを取得しようと考えている方は、以下のリンクから、ぜひご利用ください。