品質を損なわずにWebパフォーマンスのために画像を最適化する方法

ウェブサイトの動作が遅いと、非常にイライラします。何千人ものWPBeginner読者のサイト高速化を支援してきた中で、他のどの問題よりも多く見られる問題が1つあります。それは、大きくて最適化されていない画像です。

多くのウェブサイト所有者は、画像を縮小するとぼやけてプロフェッショナルに見えなくなるのではないかと心配しています。その気持ちはわかります。良いニュースは、ページの読み込み速度と美しく高品質な画像の間で選択する必要はないということです。

私たちは、自身の全ウェブサイトで使用している、シンプルな画像最適化プロセスを完成させました。このガイドでは、その正確で初心者にも優しい手順をステップバイステップでご紹介します。これにより、品質を犠牲にすることなく画像のサイズを小さくすることができます。

---

1. 画像最適化とは？

画像最適化とは、画像全体の品質を低下させることなく、可能な限り小さいファイルサイズで画像を保存および配信するプロセスです。

プロセスは複雑に聞こえるかもしれませんが、実際には最近は非常に簡単です。多くの画像最適化プラグインやツールを使用して、画質の目に見える低下なしに画像を最大80％まで自動圧縮できます。

最適化された画像と最適化されていない画像の例を次に示します。

ご覧のとおり、適切に最適化すると、同じ画像が品質の低下なしに元の画像よりも最大80％小さくなります。この例では、画像は52％小さくなっています。

画像最適化はどのように機能しますか？

簡単な言葉で言うと、画像最適化は圧縮技術を使用することで機能します。

圧縮には「可逆圧縮」と「非可逆圧縮」があります。

可逆圧縮は、画質の低下なしに全体的なファイルサイズを縮小します。非可逆圧縮では、品質がわずかに低下する可能性がありますが、理想的には訪問者には気づかれないでしょう。

画像の最適化とはどういう意味ですか？

WordPressホスティングサポートやスピードテストツールから画像の最適化を推奨されたことがあり、何をすべきか疑問に思っているかもしれません。

Web用に最適化して画像のファイルサイズを小さくする必要があります。その方法をステップバイステップでご紹介します。

---

2. 画像最適化のメリットは何ですか？

画像の最適化には多くの利点がありますが、知っておくべき主な利点を以下に示します。

• ウェブサイトの速度向上
• SEOランキングの向上
• 販売およびリードの全体的なコンバージョン率の向上
• ストレージと帯域幅の削減（ホスティングおよびCDNコストの削減につながる可能性があります）
• より高速なウェブサイトバックアップ（バックアップストレージのコストを削減できます）

画像は、動画の次にウェブページで重い要素です。HTTPアーカイブによると、画像は中央値のデスクトップページの重量の約1,054KB（40%）を占めています。

ウェブサイトの高速化は検索エンジンでのランキング（SEO）を向上させ、コンバージョン率を高めることを知っているので、オンラインで成功したいすべてのビジネスウェブサイトにとって、画像の最適化は必須です。

画像最適化が実際にどれほどの違いを生むのか、疑問に思っているかもしれません。

Strangeloopによる基礎的な研究では、ロード時間に1秒遅延すると、売上が7%減少し、ページビューが11%減少し、顧客満足度が16%低下する可能性があることがわかりました。

今日、Googleがコアウェブバイタルをランキング要因として厳格に施行しているため、遅い画像によるSEOと収益への影響はさらに大きくなっています。

これでもウェブサイトを高速化する理由が十分でない場合は、Googleのような検索エンジンも、読み込みの速いウェブサイトをSEOで優先的に扱っていることを知っておくべきです。

これは、画像をウェブ用に最適化することで、ウェブサイトの速度を改善し、WordPressのSEOランキングを向上させることができることを意味します。

---

3. Webパフォーマンスのための画像の保存と最適化方法

ウェブパフォーマンスのための画像最適化の鍵は、最小のファイルサイズと許容できる画質の完璧なバランスを見つけることです。

画像最適化において大きな役割を果たす3つの要素は次のとおりです。

• 画像ファイル形式（JPEG vs. PNG vs. GIF）
• 圧縮（圧縮率が高いほどファイルサイズは小さくなります）
• 画像の寸法（高さと幅）

3つの適切な組み合わせを選択することで、画像サイズを最大80％削減できます。

それぞれについて詳しく見ていきましょう。

画像ファイル形式

ほとんどのウェブサイト所有者にとって、本当に重要な画像ファイル形式はJPEG、PNG、GIFの3つだけです。適切なファイルタイプを選択することは、画像最適化において重要な役割を果たします。

簡単にするために、写真や色数の多い画像にはJPEG、シンプルまたは透明な画像にはPNG、アニメーション画像のみにはGIFを使用してください。

シンプルなロゴやアイコンをアップロードする場合は、SVG（ベクターグラフィックス）の使用も検討すると良いでしょう。これらは品質を損なうことなく完璧にスケーリングします。

各ファイル形式の違いを知らない方のために：

• PNG画像フォーマットはロスレス圧縮を使用します。これは、品質を損なうことなくファイルサイズを縮小することを意味し、ロゴ、テキストが多いグラフィック、およびシャープな線と透明度が必要な画像に最適です。

• 一方、JPEGは圧縮ファイル形式であり、ファイルサイズを大幅に小さくするために、画像の品質をわずかに低下させます。

• GIFは256色のみを使用し、ロスレス圧縮を行うため、アニメーション画像に最適です。

WPBeginnerでは、これらの形式を組み合わせて使用しています。

しかし、多くの最新ウェブサイトは、現在、WebP形式やAVIFのような次世代画像形式へと移行しています。

WebPとAVIFはどちらも、JPEGやPNGよりも優れた圧縮（つまり、はるかに小さいファイルサイズ）を優れた品質で提供します。すべての最新ウェブブラウザはこれらを完全にサポートしており、多くのトップWordPress最適化プラグインは、画像をこれらの形式に自動的に変換して大幅な速度向上を実現できます。

画像形式の詳細については、WebP vs. PNG vs. JPEG：WordPressに最適な画像形式は？に関するガイドをご覧ください。

圧縮

次に、画像最適化において大きな役割を果たす画像圧縮です。

画像圧縮には、さまざまな種類とレベルがあります。それぞれの設定は、使用する画像圧縮ツールによって異なります。

Adobe Photoshop、ON1 Photo、GIMP、Affinity Photo（現在はAffinity Studioとして無料）、その他の多くの画像編集ツールには、組み込みの画像圧縮機能があります。

• Adobe Photoshop
• ON1 Photo
• GIMP
• Affinity Photo
• その他

画像を通常に保存してから、TinyPNGやJPEGminiのようなウェブツールを使用して、簡単に画像を圧縮することもできます。

手間はかかりますが、この2つの方法を使えばWordPressにアップロードする前に画像を圧縮できます。WPBeginnerではこの方法を採用しています。

また、OptimoleやEWWW Image Optimizerのような人気のWordPressプラグインがいくつかあり、画像を最初にアップロードしたときに自動的に圧縮できます。

これは便利であり、多くの初心者や大企業でさえ、これらの画像最適化プラグインの使用を好んでいます。

記事の後半でWordPressプラグインの使用についてさらに詳しく説明します。

画像寸法

スマートフォンやデジタルカメラから直接写真をインポートすると、多くの場合、巨大なピクセル寸法（幅4000ピクセルなど）と、印刷向けの「解像度」300 DPIになります。

ウェブ画像に関する重要なヒント：DPI（ドット・パー・インチ）は、物理的な写真を印刷するためのものです。ウェブサイトでは、画面は実際のピクセル寸法（高さと幅）のみを考慮するため、DPI設定は安全に無視できます。

画像の寸法をより合理的なサイズに縮小すると、画像ファイルのサイズを大幅に減らすことができます。コンピューター上の画像編集ソフトウェアを使用して、画像をリサイズするだけです。

例えば、元のサイズが4900×3200ピクセルの巨大な写真を撮りました。元のファイルサイズは1.8MBでした。

高い圧縮率を得るためにJPEG形式を選択し、サイズを1200×795ピクセルに変更しました。ファイルサイズはわずか103KBに削減されました。これは元のファイルサイズの94%削減です。

画像最適化の3つの重要な要素がわかったところで、ウェブサイト所有者向けのさまざまな画像最適化ツールを見てみましょう。

---

4. ベスト画像最適化ツールとプログラム

前述したように、ほとんどの画像編集ソフトウェアには、画像の最適化と圧縮設定が付属しています。

画像編集ソフトウェア以外にも、数回のクリックでウェブ用に画像を最適化できる、強力な無料画像最適化ツールがいくつかあります。

WordPressにアップロードする前に、特に完璧主義者の方は、これらのツールを使用して画像を最適化することをお勧めします。

この方法は、WordPressホスティングアカウントのディスクスペースを節約するのに役立ち、各画像を個別に確認するため、最高の品質で最も高速な画像が保証されます。

Adobe Photoshop

Adobe Photoshopは、ウェブ用にファイルサイズの小さい画像をエクスポートできるプレミアム画像編集アプリケーションです。

エクスポートダイアログを使用すると、最も小さいファイルサイズになる画像ファイル形式（JPG、PNG、GIF）を選択できます。

画像の品質、色、その他のオプションを減らして、さらにファイルサイズを小さくすることもできます。

GIMP

GIMPは、Adobe Photoshopの無料のオープンソース代替ソフトウェアです。画像をウェブ用に最適化するために使用できます。欠点は、このリストにある他のソリューションほど使いやすくないことです。

まず、GIMPで画像を開き、ファイル » エクスポート形式…オプションを選択する必要があります。

これにより、エクスポート画像ダイアログボックスが表示され、ファイルに新しい名前を付けることができます。次に、「エクスポート」ボタンをクリックする必要があります。

画像のエクスポートオプションが表示されます。JPEGファイルの場合、「品質」スライダーを使用して圧縮レベルを選択し、ファイルサイズを削減できます。

最後に、「エクスポート」ボタンをクリックして、最適化された画像ファイルを保存します。

TinyPNG

TinyPNGは、スマートな損失圧縮技術を使用してPNGおよびJPEGファイルのサイズを劇的に削減する無料のWebアプリです。

標準のPNGは通常ロスレスですが、TinyPNGは画像の色の数を減らし、目立った違いなしに、はるかに小さいロッシーPNG形式に変換します。

Webサイトにアクセスして、簡単なドラッグアンドドロップで画像をアップロードするだけです。

画像を圧縮してダウンロードリンクを提供します。

以前は、画像編集プロセスの一部としてAdobe Photoshop拡張機能を使用していましたが、現在は廃止されており、Photoshop CC 2024以降のバージョンではサポートされていません。ユーザーは、アプリ内統合のためにWebツールまたは他のプラグインに依存する必要があります。

開発者向けには、画像を自動的に変換するためのAPIがあります。さらに、初心者向けには、それを実行してくれるWordPressプラグインがあります。

これについては後で詳しく説明します。

JPEGmini

JPEGminiは、知覚される品質に影響を与えることなく画像のサイズを大幅に削減する強力なロッシー圧縮技術を使用しています。

自分で確認するために、元の画像と圧縮された画像の品質を比較することもできます。

無料でウェブ版を使用することも、コンピューター用のプログラムを購入することもできます。サーバーでのプロセスを自動化するための有料APIもあります。

ImageOptim

ImageOptimは、最適な圧縮パラメータを見つけ、不要なカラープロファイルを削除することで、品質を損なうことなく画像を圧縮できるMacユーティリティです。

これのWindows代替はTrimageです。

---

5. WordPressに最適な画像最適化プラグイン

画像を最適化する最良の方法は、WordPressにアップロードする前に最適化することだと考えています。

ただし、マルチユーザーサイトを実行している場合や自動化されたソリューションが必要な場合は、WordPress画像圧縮プラグインを試すことができます。

ここに、最高のWordPress画像圧縮プラグインのリストがあります。

1. Optimoleは、ThemeIsleのチームによる人気のプラグインです。
2. EWWW画像オプティマイザー
3. 前述のTinyPNGチームによるプラグイン、「JPEG, PNG & WebP Image Compression」
4. 人気のWP Rocketチームによるプラグイン、「Imagify」
5. ShortPixel 画像オプティマイザー
6. Smush
7. reSmush.it
8. Envira Galleryは、強力な画像圧縮アドオン（有料プランで利用可能）を提供し、ギャラリー画像を自動的に最適化する素晴らしいWordPressギャラリープラグインです。

これらのWordPress画像最適化プラグインは、ウェブサイトの高速化に役立ちます。

---

6. 画像最適化に関する最終的な考えとベストプラクティス

画像の最適化は、ウェブサイトを高速化するための最も簡単で最も効果的な方法の1つです。品質を犠牲にすることなくファイルサイズを削減することで、ユーザーエクスペリエンスを向上させ、SEOランキングを向上させることができます。

また、テーマがレスポンシブ画像をサポートしていることを確認する必要があります。幸いなことに、WordPressは、メディアライブラリにアップロードされた各画像の複数のサイズを自動的に作成し、モバイルおよびデスクトップ画面に最適なものを配信します。

画像最適化以外に、ウェブサイトの速度を大幅に向上させるには、WordPressキャッシュプラグインの使用とWordPress CDNの使用が役立ちます。

WPBeginnerでは、強力なキャッシュと画像最適化機能の両方を組み合わせたWP Rocketを使用しています。

これには、遅延読み込み（訪問者がスクロールダウンして初めて画像が読み込まれることを意味します）とWebPサポートが含まれており、すべて1つのソリューションで実現します。

もしEnvira Galleryプラグインを使用している場合は、そのEnvira CDNサービスも推奨します。

これは、従来のCDNセットアップの複雑さなしに、写真ギャラリーを信じられないほど高速に読み込む画像専用CDNです。

あるいは、マネージドWordPressホスティング会社を利用することもできます。これらの会社は、プラットフォームの一部としてキャッシュとCDNの両方を提供していることがよくあります。

---

動画チュートリアル

WPBeginnerを購読する

---

画像最適化に関するよくある質問

長年にわたりユーザーのウェブサイトの速度改善を支援してきた中で、画像最適化に関する多くの質問に回答してきました。ここでは、最も一般的な質問に対する回答を紹介します。

1. ウェブに最適な画像フォーマットは何ですか？

画像の種類によります。多くの色を持つ写真には、JPEGが通常最良の選択肢です。シンプルなグラフィック、ロゴ、または透明な背景が必要な画像には、PNGが理想的です。GIFはアニメーションにのみ使用する必要があります。新しいWebPフォーマットも、優れた品質と小さいファイルサイズを提供する優れたオプションです。

2. 画像を最適化すると品質は低下しますか？

必ずしもそうではありません。「ロスレス」圧縮は、品質を一切損なわずにファイルを小さくします。「ロッシー」圧縮であっても、ファイルサイズを劇的に削減しつつ、肉眼ではほとんど見えない程度の品質変化に抑えることを目標としています。

3. ウェブ画像に適したファイルサイズは？

完璧なサイズというものはありませんが、ほとんどの画像にとって150KB未満を目標にするのが良いでしょう。幅いっぱいの大きな画像の場合は、500KBまで許容できることもあります。常に、サイト上で画像を鮮明でクリアに見せながら、可能な限り最小のファイルサイズにすることを目指してください。

4. 画像最適化はSEOをどのように改善しますか？

Googleのような検索エンジンは、ページの読み込み速度をランキング要因として使用します。画像はページ上で最も大きなファイルであることが多いため、最適化することでウェブサイトの読み込み速度が向上します。この速度の向上は、SEOランキングの向上と訪問者にとっての体験の向上につながる可能性があります。

5. WordPressに既にアップロードした画像を最適化できますか？

はい。WordPress用のほとんどの画像最適化プラグインには、「一括最適化」機能が含まれています。このツールは、メディアライブラリ全体をスキャンして、既存のすべての画像を圧縮できるため、確立されたウェブサイトの速度を向上させるのに最適です。

6. Web画像におけるDPIとピクセルの違いは何ですか？

DPI（dots per inch）は印刷用語であり、オンラインでの画像の表示には影響しません。Web画像の場合、ピクセル寸法（高さと幅）のみが重要です。DPIではなく、ピクセル寸法を縮小することに焦点を当てて、ファイルサイズを小さくしてください。

7. 画像を手動で最適化するのと、プラグインを使用するのとでは、どちらが良いですか？

アップロード前に手動で画像を最適化すると、品質とファイルサイズを最も細かく制御できます。ただし、複数の著者がいるサイトや完全な自動化を希望する場合は、WordPressの画像最適化プラグインが便利で効果的なソリューションとなります。WPBeginnerでは、両方を組み合わせて使用することがよくあります。

---

WordPressパフォーマンス改善に関する追加リソース

この記事がWordPressで画像を最適化する方法を学ぶのに役立ったことを願っています。WordPressのパフォーマンスを向上させるための他の記事も参照することをお勧めします。

• WordPressの速度とパフォーマンスを向上させるための究極のガイド
• WooCommerceのパフォーマンスを高速化する方法
• WordPressメディアのオフロード方法 – ウェブサイトのスピード向上
• ウェブサイトを高速化する最高のWordPressキャッシュプラグイン
• WordPressでCore Web Vitalsを最適化する方法（究極のガイド）
• WordPressでファーストバイトまでの時間（TTFB）を短縮する方法 – 専門家によるヒント
• GTmetrixプラグインを使用してWordPressサイトのパフォーマンスを改善する方法
• 最速のWordPressホスティング（パフォーマンステスト）
• WordPressサイトで測定すべき重要な指標
• ウェブサイトのスピードテストを適切に実行する方法
• WordPressウェブサイトのストレステスト方法

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。