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

ウェブサイトの遅延に対処するのは非常にイライラします。何千ものWPBeginner読者のサイト高速化を支援してきた中で、他のどの問題よりも頻繁に現れる問題が1つあることがわかりました。それは、大きくて最適化されていない画像です。

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

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

これはウェブのための画像最適化に関する包括的なガイドなので、わかりやすい目次を作成しました。

1. 画像最適化とは？

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

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

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

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

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

簡単に言うと、画像最適化は圧縮技術を使用して機能します。

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

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

画像を最適化するとはどういうことですか？

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

画像をウェブ用に最適化することで、ファイルサイズを縮小する必要があります。その方法をステップバイステップでご紹介します。

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

画像を最適化することには多くのメリットがありますが、知っておくべき主なメリットは次のとおりです。

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

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

ウェブサイトの高速化が検索エンジン（SEO）でより上位にランク付けされ、コンバージョン率が向上することはわかっているので、オンラインで成功したいすべてのビジネスウェブサイトは、画像最適化を行う必要があります。

さて、画像最適化が実際にどれだけの違いをもたらすのか疑問に思っているかもしれません。

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

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

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

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

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のようなWebツールを使用して、より簡単な画像圧縮を行うこともできます。

これらの方法は多少の手間がかかりますが、WordPressにアップロードする前に画像を圧縮できるため、WPBeginnerではこの方法を採用しています。

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

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

3. 画像の寸法

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

携帯電話やデジタルカメラから写真を取得すると、多くの場合、非常に大きなピクセル寸法（幅4000ピクセルなど）になり、「解像度」設定が300 DPIになっている場合があります。

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

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

たとえば、元の寸法が4900×3200ピクセルという非常に大きな写真を使用しました。元のファイルサイズは1.8 MBでした。

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

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

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

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

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

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

この方法により、WordPressホスティングアカウントのディスク容量を節約でき、各画像を個別に確認するため、最速で最高の品質の画像が保証されます。

Adobe Photoshop

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

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

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

GIMP

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

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

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

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

TinyPNG

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

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

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

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

JPEGmini

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

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

ImageOptim

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

これのWindows版の代替はTrimageです。

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

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

以下は、最適なWordPress画像圧縮プラグインのリストです。

1. Optimole、ThemeIsleのチームによる人気のプラグイン
2. EWWW Image Optimizer
3. JPEG、PNG、WebP画像圧縮、前述のTinyPNGチームによるプラグイン
4. Imagify、人気のWP Rocketチームによるプラグイン
5. ShortPixel Image Optimizer
6. Smush
7. reSmush.it
8. Envira Gallery は、画像圧縮機能を内蔵したWordPressギャラリープラグインです。

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

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

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

言うまでもなく、ウェブサイトが高速であることはSEOに最適であり、検索エンジンのランキングが向上する可能性があります。

画像最適化以外に、ウェブサイトの高速化に大きく役立つ2つのことは、WordPressキャッシュプラグインの使用とWordPress CDNの使用です。

WPBeginnerでは、キャッシュと画像最適化機能、遅延読み込み（訪問者がスクロールダウンして初めて画像が読み込まれることを意味します）やWebPサポートを含む、すべてを1つのソリューションに統合しているWP Rocketを使用しています。

もしEnvira Galleryプラグインを使用しているなら、そのEnvira CDNサービスも推奨します。これは、従来のCDNセットアップの複雑さなしに、写真ギャラリーを信じられないほど速く読み込む画像専用CDNです。

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

ビデオチュートリアル

WPBeginnerを購読する

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

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

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

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

2. 画像の最適化は品質を低下させますか？

必ずしもそうではありません。「ロスレス」圧縮は、品質の損失なしにファイルを小さくします。「ロッシー」圧縮であっても、ファイルサイズを大幅に削減しつつ、品質の変化は肉眼ではほとんど見えないバランスを見つけることが目標です。

3. Web画像の適切なファイルサイズは？

完璧なサイズはありませんが、ほとんどの画像にとって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でもフォローできます。