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

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

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

私たちは、すべての自社ウェブサイトで使用している画像最適化の簡単なプロセスを完成させました。このガイドでは、初心者向けの正確な手順を説明します。品質を犠牲にすることなく画像を小さくする方法を学びます。

これはWeb向けの画像最適化に関する包括的なガイドですので、分かりやすい目次を作成しました。

1. 画像最適化とは？
2. 画像最適化のメリットは何ですか？
3. Webパフォーマンスのための画像の保存と最適化方法
4. 最適な画像最適化ツールとプログラム
5. WordPress向けの最高の画像最適化プラグイン
6. 画像最適化に関する最終的な考察とベストプラクティス
7. 動画チュートリアル
8. 画像最適化に関するよくある質問
9. WordPressパフォーマンス改善に関する追加リソース

1. 画像最適化とは？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像は、動画の次にウェブページで重い要素です。HTTPアーカイブによると、画像はページの総ファイルサイズの大部分を占めることがよくあります。

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

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

Strangeloopによる基礎的な調査では、読み込み時間の1秒の遅延が、売上7%減、ページビュー11%減、顧客満足度16%減につながる可能性があることがわかりました。今日では、ユーザーの期待はさらに高まっており、その影響はさらに大きくなっています。

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

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

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

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

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

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

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

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

1. 画像ファイル形式

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

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

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

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

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

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

WPBeginnerでは、これらのフォーマットを組み合わせて使用しています。しかし、多くの最新のウェブサイトでは、WebPフォーマットが使用されています。WebPは、JPEGやPNGよりもさらに優れた圧縮（つまりファイルサイズが小さい）を優れた品質で提供することがよくあります。ほとんどのブラウザは現在これをサポートしており、多くの最適化プラグインが画像をWebPに自動的に変換して、大幅な速度向上を実現できます。

画像フォーマットの詳細については、WebP vs. PNG vs. JPEG: WordPressに最適な画像フォーマットはどれかに関するガイドをご覧ください。

2. 圧縮

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

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

Adobe Photoshop、ON1 Photo、GIMP、Affinity Photoなどのほとんどの画像編集ツールには、組み込みの画像圧縮機能があります。

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

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

また、OptimoleやEWWW Image Optimizerのような人気のWordPressプラグインもあり、画像を初めてアップロードする際に自動的に圧縮できます。これは便利で、多くの初心者や大企業でさえこれらの画像最適化プラグインの使用を好んでいます。

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

3. 画像の寸法

通常、スマートフォンやデジタルカメラから写真をインポートすると、非常に高い解像度と大きなファイル寸法（高さと幅）になります。

スマートフォンやデジタルカメラから写真を取得すると、多くの場合、非常に大きなピクセル寸法（例：幅4000ピクセル）を持ち、「解像度」設定が300 DPIになっていることがあります。

ウェブ画像に関する重要なヒントです。DPIは完全に無視できます。その設定は印刷用です。ウェブでは、重要なのはピクセル寸法（高さと幅）だけです。

画像の寸法をより適切なサイズに縮小すると、画像ファイルのサイズを大幅に小さくすることができます。コンピューターの画像編集ソフトウェアを使用して、画像のサイズを変更するだけです。

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

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

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

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

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

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

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

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

Adobe Photoshop

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

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

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

GIMP

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

まず、GIMPで画像を開き、File » Export As…オプションを選択する必要があります。これにより、ファイルに新しい名前を付けることができる「Export Image」ダイアログボックスが表示されます。次に、「Export」ボタンをクリックする必要があります。

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

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

TinyPNG

TinyPNG は、PNGおよびJPEGファイルのサイズを縮小するためにスマートな損失圧縮技術を使用する無料のWebアプリです。ウェブサイトにアクセスし、簡単なドラッグアンドドロップで画像をアップロードするだけです。

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

また、Adobe Photoshop用の拡張機能もあり、これは画像編集プロセスの一部として使用しています。なぜなら、Photoshop内からTinyPNGにアクセスできるからです。

開発者向けには、画像を自動的に変換するためのAPIがあります。さらに、初心者向けには、それを代わりに行ってくれるWordPressプラグインがあります。これについては後ほど詳しく説明します。

JPEGmini

JPEGminiは、知覚される品質に影響を与えることなく画像のサイズを大幅に縮小する強力なロス圧縮技術を使用しています。元の画像と圧縮された画像の品質を比較して、ご自身で確認することもできます。

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

ImageOptim

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

これのWindowsの代替手段は、Trimageです。

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

画像を最適化する最善の方法は、WordPressにアップロードする前に行うことだと考えています。ただし、複数の著者がいるサイトを運営している場合や、自動化されたソリューションが必要な場合は、WordPress画像圧縮プラグインを試すことができます。

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

1. Optimoleは、ThemeIsleのチームによる人気のプラグインです。
2. EWWW Image Optimizer
3. JPEG、PNG、WebP画像圧縮、上記で言及されたTinyPNGチームによるプラグイン
4. 人気のWP Rocketチームによるプラグイン、Imagify
5. ShortPixel 画像オプティマイザー
6. Smush
7. reSmush.it
8. Envira Gallery は、画像圧縮機能が組み込まれたWordPressギャラリープラグインです。

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

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

Web用に最適化された画像を保存していない場合は、今すぐ始める必要があります。サイトの速度に大きな違いが生まれ、ユーザーも喜んでくれるでしょう。

さらに、ウェブサイトの表示速度が速いことはSEOにも効果的であり、検索エンジンのランキングが向上する可能性が高いです。

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

WPBeginnerでは、強力なキャッシュ機能と画像最適化機能（訪問者がスクロールして画像が表示されるまで読み込まない遅延読み込みやWebPサポートなど）を単一のソリューションに統合しているため、WP Rocketを使用しています。

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

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

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

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。