ウェブサイトを訪れる方々にとって、画像はページの魅力を大きく左右します。
しかし、画像を最適化（圧縮・リサイズ）せずに使用していると、サイトの表示スピードは遅くなり、ユーザーにストレスを与えてしまい、すぐにユーザーは離脱します。
そこで、今回は画像最適化のポイントを説明し、状況にあわせた画像最適化の方法を具体的な手順とともにご紹介していきます。
それぞれのニーズに合わせた方法で画像を最適化し、ウェブサイトの可能性を最大限に引き出しましょう。
- WordPressでまとめて画像を最適化したい
- 1枚ずつ細かく画像を調整したい
- 複数の画像をWebP形式に変換したい
※クリックするとそれぞれの箇所まで読み飛ばせます。
目次
なぜ画像の最適化（圧縮・リサイズ）が大切なのか？
画像の最適化が大切な理由は主に２つです。
- ページの読み込み速度を速くするため
- SEOに影響するため
それぞれ解説していきます。
ページの読み込み速度を速くするため
画像の最適化が大切な理由は大きく2つあるんだ。
一つは、ページの読み込み速度を速くするため、もう一つはSEOに良い影響を与えるためなんだ。
ページの読み込み速度を速くすることは、どうして重要なんですか？
画像が最適化されていると、サイトを快適に閲覧できるため、より高いユーザー満足度をもたらします。
特にモバイルユーザーにとって、速度は非常に重要です。
Googleは、ページの読み込み時間に関して以下の調査結果を公表しています。
このようにページの読み込み速度が遅くなればなるほど、ユーザーは離脱してしまいます。
だからこそ、画像の圧縮・リサイズを行い、最適化することは大切なのです。
SEOに影響するため
2018年にGoogleは、ページの読み込み速度をモバイル検索のランキング要素に使用する、と宣言しました。
Googleがページの読み込み速度をモバイル検索のランキング要素に使うと宣言したんだ。
結果として画像の最適化はSEOに影響があるというわけなんだ。
画像はウェブページの重要な要素であり、視覚的な魅力を提供するだけでなく、ユーザーの関与と体験を向上させます。
しかし、最適化されていない画像はページのロード時間を著しく増加させ、ユーザーの不満を招き、検索エンジンランキングを低下させる可能性があります。
画像の最適化は単にページを速くするだけでなく、サイトのSEOに対しても大きな影響を及ぼします。
検索エンジンが速いページを好むため、最適化された画像を持つページは、検索結果での優位性を保つことができるからです。
画像サイズ最適化３つのポイント
画像最適化のポイントは以下の3点です。
- ＷebP形式の画像を利用する
- 画像の遅延読み込みを行う
- 適切な圧縮・リサイズを行う
それぞれ解説していきます。
WebP形式の画像を利用する
ここ数年で注目を集めている画像形式があるんだ。
それがWebP形式だよ。これを使うことが、画像最適化の大きなポイントになるんだよ。
WebPはGoogleによって開発された画像フォーマットで、JPEGやPNGよりも優れた圧縮技術を提供します。
このフォーマットは、高品質の画像を保ちながらファイルサイズを大幅に削減することができるため、ウェブページのロード時間を短縮し、結果的にSEOパフォーマンスを向上させることが可能です。
WebPを利用するメリットは、単にファイルサイズの削減だけじゃないんだ。
画像の品質を維持しつつ、圧縮率が高いから、ウェブサイトのパフォーマンスを格段に向上させることができるんだよ。
さらに、WebPは透過性やアニメーションをサポートしており、多様なウェブデザインのニーズに対応できます。
この汎用性が、ウェブ開発者やデザイナーにとっても大きな魅力となっています。
ただし、すべてのブラウザがWebPをサポートしているわけではないので、互換性を考慮することも重要です。
とはいえ、2024年現在ではほとんどのブラウザでWebPの利用が可能です。
出典：Can I use WebP image format（2024/3/6時点）
2023年度：日本でのブラウザ使用率（PC）
新しいブラウザだとIE（インターネットエクスプローラー）のみがWebP対象外だよ。
2023年のIEの使用率は0.46%なんだ。
WebP形式を利用することで、ウェブサイトの読み込み速度が向上し、ユーザーエクスペリエンスが改善され、SEOにも良い影響を与えます。
WebPは、画像最適化の効果的な手段として、非常に推奨される方法です。
遅延読み込みを行う
もうひとつ大事なのが「遅延読み込み」だね。遅延読み込みを行うことでページ速度が向上するんだ。
遅延読み込み（Lazy Loading）とは、画面に表示されるまで画像のロードを遅らせる技術です。
ページの初期読み込み時にすべての画像をロードする代わりに、必要になったときにのみ画像を読み込むことで、ページのロード時間を短縮します。
遅延読み込みは特に画像が多いページに効果的で、サーバーの負荷を軽減し、データ使用量を削減します。
適切に遅延読み込みを実装することで、ウェブサイトはより高速になり、訪問者にとって快適な閲覧体験を提供できるようになります。
これは、ウェブサイトのユーザビリティを高め、結果的にSEOパフォーマンスを改善することにも繋がります。
適切な圧縮・リサイズを行う
画像を最適化する上で、もう一つ大切なのが適切な圧縮とリサイズだよ。
これらを正しく行うことで、ページのロード速度を速め、SEOパフォーマンスを高めることができるんだ。
適切な画像圧縮とは、画像のファイルサイズを可能な限り小さくすることですが、画質を維持することも重要です。
過度に圧縮すると画像が粗くなり、サイトの見た目が損なわれる可能性があります。
一方、リサイズは画像の寸法を調整し、表示されるサイズに最適化することです。
画像をWebページにアップロードする前に、適切なサイズにリサイズし、圧縮することが重要だよ。
これにより、無駄なデータを削減してページのロード時間を短縮できるんだ。
画像の圧縮には、様々なツールやプラグインが利用できます。
これらのツールは、画質を損なうことなくファイルサイズを削減するために、画像に最適な圧縮率を自動的に適用します。
また、リサイズは画像が表示されるサイズに合わせて行うことが大切で、これにより余分なデータがページのロードを遅くするのを防ぎます。
適切な圧縮とリサイズを行うことで、ウェブサイトの表示スピードは速くなり、ユーザーエクスペリエンスが向上します。
結果として、SEOにも影響がでるため、画像の圧縮・リサイズを適切に行っていきましょう。
画像の大きさの目安
画像をウェブサイトに使用する際、適切な大きさにリサイズすることは、ページの読み込み速度と全体のウェブパフォーマンスに大きく影響します。
特に、記事内の画像、アイキャッチ画像、そしてトップページやメインビジュアルとして使用する画像のサイズは、サイトの印象と機能性を左右する重要な要素です。
画像が大きいほどファイルサイズが増えるため、圧縮してロード時間を最小限に抑えることが重要です。
すべての画像に共通して言えるのは、良い画質を提供しつつも、表示速度が遅くなりすぎないようにファイルサイズを最適化することが重要ということです。
画像をリサイズし、適切に圧縮することで、ページの読み込み速度を向上させ、ユーザーエクスペリエンスを改善し、SEOの観点からも好ましい結果を得ることができます。
画像のファイルサイズの目安
ウェブページの全体的なパフォーマンスを考慮した場合、ページ全体のファイルサイズは1.6MB未満に抑えることが推奨されています。
参考：Chrome for Developers 膨大なネットワークペイロードを避ける
この基準は、画像のデータだけでなく、ページに含まれるすべての要素に適用されます。
全体のサイズに含まれるのは画像だけじゃないんですよね？
そうだね、ページ全体に含まれる全ての要素、つまり画像以外のコンテンツも含めての総ファイルサイズだよ。
特に画像は、ページのロード時間に大きな影響を与えるから、一枚あたりのサイズにも気をつけないといけない。
一般的に言われているのは、画像一枚あたり200KB以内が目安だね。さらに速度を重視するなら100KB以下が目安かな。
ファイルサイズの目安は、正しいファイルサイズというものはありません。
結局のところ、ファイルサイズと画質のバランスが重要になってきます。
次に、実際のファイルをもとにいくつかの事例を見てみよう。
圧縮率と画質のバランスを考える（事例紹介）
画像の圧縮は、ウェブサイトのロード速度を向上させる効果的な方法ですが、過度に圧縮すると画質が低下し、サイトのビジュアルが損なわれる可能性があります。
理想的なバランスを見つけることが、効率的なウェブサイト運営には不可欠です。
次の画像を例に、実際に圧縮率と画質のバランスを見てみよう。
以下は、圧縮していないオリジナル画像です。
ファイルサイズ：168KB
次に、同じ形式.jpgで圧縮した結果です。
ファイルサイズ：34.3KB
最新のWebP形式で圧縮した結果は以下のとおり。
ファイルサイズ：27.8KB
最後に、WebPとほぼ同じファイルサイズになるように、jpgの品質を調整してみた結果がこちら。
ファイルサイズ：27.9KB
圧縮の加減は、実際にパソコンやスマホで確認してみて許容できる範囲で調整すると良いよ！
わかりました、早速やってみたいと思います！
あなたにあった画像最適化の選び方
画像を最適化する方法は、状況にあわせて選択することが大切です。
以下は、状況にあわせた画像の最適化方法です。
- WordPressでまとめて画像を最適化したい
- 1枚ずつ細かく画像を調整したい
- 複数の画像をWebP形式に変換したい
※クリックするとそれぞれの箇所まで読み飛ばせます。
それぞれ解説していきます。
WordPressでまとめて画像を最適化したい | EWWW Image Optimizer
EWWW Image Optimizerは、WordPressサイト内の画像を自動で、リサイズ・圧縮し、さらにWebP形式にも変換してくれるWordPressプラグインです。
- アップロードした画像ファイルの自動圧縮
- アップロード済の画像ファイルの自動圧縮
- 画像ファイルのリサイズ
- WebP形式に自動変換
- WebP非対応ブラウザでは、JPG/PNGを表示、対応ブラウザではWebPを表示。
便利そうですね！使い方を教えてください。
OK！次の手順で解説していくね。
- EWWW Image Optimizerのインストール方法
- 新規で追加した画像を最適化する
- 既存の画像を一括で最適化する
- 画像が最適化されているか確認
- WebP形式の画像が適用されているか確認
手順を解説していきます。
EWWW Image Optimizerのインストール方法
「プラグイン」から「新規プラグインを追加」をクリック。
「プラグインの検索窓」に「ewww image optimizer」と入力します。
「今すぐインストール」をクリック。
「有効化」をクリック
これでインストールは完了です。
EWWW Image Optimizerの初期設定
次に、EWWW Image Optimizerの初期設定を行います。
今回は、画像最適化に必要な「リサイズ」「圧縮」「WebP」をかんたんに行える基本的な設定を解説いたします。
■「WordPress管理画面」より「設定＞EWWW Image Optimizer」をクリック。
まず「基本」の項目を調整していきます。
基本タブの下のボタンが「簡単モード」と表示されていることを確認します。
モードの確認
もし、ルディクロスモードと表示されている場合は、クリックします。
メタデータを削除：チェック
画像のリサイズ：幅の上限1920 高さの上限0ピクセル単位
不足している寸法を追加：チェックしない
遅延読み込み：チェックしない
WebP変換：チェック
WebPの配信方法：リライトルールを挿入するをクリック
クリック後に、以下のように緑色でWEBPとなっていればOKです。
以下の項目のチェックは必要ありません。
ここまでで基本タブの設定は以上です。
最終的に以下の様になっていれば手順通りです。
※verによって多少違う場合もあり。
次に、「リサイズタブ」をクリックします。
「既存の画像をリサイズ」にチェックを入れます。
これで初期設定は完了！
新規で追加した画像を最適化する
新規追加した画像の最適化の手順を解説します。
今回は、ブログ投稿で使用する画像の最適化に絞って解説いたします。
①「新規投稿を追加」をクリック
②「メディアを追加」をクリック。
③「ファイルをアップロード」を選択しファイルをアップロードする。
④「ファイルを選択」し「投稿に挿入」をクリックします。
以上です。
上記の手順を行うだけで、リサイズ・圧縮・WebP化された画像が自動で使用されます。
とっても簡単ですね！
既存の画像を一括で最適化する
次に、既存の画像を一括で最適化する方法を解説いたします。
注意
一括最適化は元の画像を変更するため、元に戻すことができません。
一括最適化を行う前に、画像のバックアップを取ることを推奨します。
①「メディア」の「一括最適化」をクリック。
②「最適化されていない画像をスキャンする」をクリックします。
③「〇点の画像を最適化」をクリック。
以上で、既存の画像を一括最適化することが出来ました。
枚数によっては時間がかかるので、しばらく待ちましょう。
画像が最適化されているか確認
次に、メディアに追加した画像が最適化されているか確認する手順を解説します。
①「メディア」内の「ライブラリ」を選択します。
②「メディアライブラリ」の表示形式を「リスト表示」に切替します。
③「画像最適化」の欄にて、圧縮率や、WebPのファイルサイズが確認できます。
以上の手順で画像が最適化されているか確認ができました。
WebP形式の画像が適用されているか確認
最後に、WebP形式の画像がサイトで適用されているか確認する方法をご紹介します。
①確認したいサイトを表示した状態で、Google Chromeの右上の「⋮」をクリックし、「その他のツール」＞「デベロッパーツール」を選択します。
②「ネットワーク」＞「画像」とクリックし、タイプ欄が「webp」と表記されていれば、WebP形式の画像が適応されています。
EWWW Image Optimizerの基本的な使い方は以上だよ。
思ったより難しくなくて安心しました！
1枚ずつ細かく画像を調整したい | Squoosh
出典：Squoosh
画像を1枚ずつじっくり調整したいなら、Squooshがおすすめだよ。
Googleが開発したこのWebアプリは、手軽に高度な画像圧縮を実現できるんだ。
Squooshはブラウザ上で動作するWebアプリケーションで、特別なソフトウェアをインストールする必要はありません。
直感的なインターフェースで、リサイズや圧縮の設定を細かく調整しながら、リアルタイムで変換結果を確認することができます。
どうやって使うんですか？
使い方は簡単。
まず、Squooshのウェブサイトにアクセスして、画像ファイルをドラッグ＆ドロップするだけなんだ。
そうすると、画像のプレビューが表示されて、リサイズや圧縮レベルの調整が可能になるよ。手順を見ていこう。
■画像ファイルをドラッグアンドドロップします。
■左が元の画像、右が圧縮した画像です。真ん中のタブで変化を確認できます。
■以下の要素を調整することで、リサイズ・ファイル形式・圧縮率の設定ができます。
■リサイズは、「Resize」ボタンにチェックを入れ、Width（横幅）か、Height（高さ）を指定します。Presetで倍率の指定も可能です。
■ファイル形式の変更は「Compress」にあるプルダウンから、希望のファイル形式を選択します。
■圧縮率は、Qualityを調整します。
■圧縮率とファイルサイズは以下で確認できます。
■すべての調整が済んだら右下のボタンをクリックし、ファイルをダウンロードします。
以上が、基本的な使い方だよ。
Squooshは、特に細部にこだわりたいデザイナーやフォトグラファーにとって、便利なツールなんだ。
細かく画像調整ができるのがSquooshの良い所ですね！
複数の画像をWebP形式に変換したい | サルワカ道具箱
もし複数の画像をさっとWebP形式に変えたいなら、「サルワカ道具箱」が便利だよ。
サルワカ道具箱は、たくさんの画像を一度にWebPに変換できるんだ。
サルワカ道具箱はオンラインで利用できるツールで、ユーザーはブラウザを通じて簡単に多くの画像を一括でWebP形式へ変換できます。
まとめ：効率的な画像圧縮でサイトパフォーマンスを向上させよう
この記事では、WordPressでの画像最適化の重要性と、おすすめ圧縮プラグインについて詳しく解説しました。
画像圧縮は、ページの読み込み速度を速くし、SEOにも大きく影響するため、ウェブサイトのパフォーマンス向上には欠かせません。
画像サイズの最適化のポイントは以下の通りでした。
これらの方法は、ウェブページの速度を高めるだけでなく、検索エンジンにおけるサイトの評価を改善することにも寄与します。
状況にあわせた画像の最適化方法は以下の通りでした。
- WordPressでまとめて画像の最適化 → EWWW Image Optimizer
- 1枚ずつ細かく画像を調整したい → Squoosh
- 複数の画像をWebP形式に変換する → サルワカ道具箱
効率的な画像圧縮は、高品質のビジュアルを維持しつつ、ウェブサイトのロード時間を短縮します。
結果としてユーザーエクスペリエンスを向上させます。
最適化された画像を使用することで、訪問者の満足度を高め、Googleの検索ランキングを改善することができるでしょう。
最適な画像圧縮ツールを選択し、サイトのパフォーマンスを最大限に引き出しましょう。
今回は以上です。
記事の著者
吉村 健太朗
シンクション株式会社 代表取締役
資格景表法特商法遵守 個人認証(KTAA)
薬機法医療法遵守 個人認証(YAMM)
Google広告「検索広告」認定資格
Googleアナリティクス個人認定資格
奈良でWEBマーケティングとWEB制作に特化した「ツナガル」を運営しています。私のWEBキャリアは2012年、副業でアフィリエイトを始めたことがきっかけでした。
3か月で月10万円を達成したものの、その後思い通りに成果が伸びず挫折を経験。これが、私とWEB業界の出発点となりました。
その後、営業を経験し、2020年には本格的にWEBの世界へ。現在では、地域に特化したキーワード戦略により300以上の上位表示を実現し、SEO対策マニュアルでは検索順位2位を獲得しています。
お客様と共に課題を乗り越え、成果を共に喜び合うことが私のモチベーションです。WEBに関することならどんなご相談でもお気軽にお声がけください。
