パフォーマンスを考慮して画像を最適化する方法

ウェブサイトを運営していれば、Googleからの評価は非常に重要。画像ファイルのサイズを小さくすると、ウェブサイトのパフォーマンスを改善できることはご存知でしょうか。

画像を最適化する際に気をつけたいのは、圧縮することで画質が損なわれてしまう点（その結果、訪問者によからぬ印象を与えてしまうことも）。とはいえ、見た目が明らかに損なわなければ問題ありません。

ウェブサイトに使用するのに十分な画質を保ちながら、画像サイズを縮小するコツや方法は複数あります。

今回は、画質を損なわない画像の圧縮方法と、パフォーマンスを改善する画像最適化について掘り下げていきます。

SEOに役立つ画像最適化について動画での解説もご用意しています。

画像最適化のメリット

そもそも、なぜ画像サイズを縮小する必要があるのでしょうか。画像を最適化してパフォーマンスを改善することには、数々のメリットがあります。HTTP Archiveによれば、画像はウェブページ全体の重さの平均21%を占めています。したがって、サイトの最適化に着手するなら、動画コンテンツの次に画像の存在が鍵となります。

画像はスクリプトやフォントよりも重要。そして皮肉にも、画像最適化は最も簡単に実践できることの1つにもかかわらず、多くの人が見落としています。

画像最適化の主なメリットは、以下の通りです。

• ページ表示速度が向上する（詳しくは「画像最適化によるパフォーマンス改善」セクション参照）─ページの読み込みに時間がかかりすぎると、訪問者は他のサイトに移動してしまう可能性があります。ページ表示速度の最適化についてはこちらをご覧ください。
• 優れたSEOプラグインと組み合わせてSEOを強化できる─サイトが検索エンジンでより上位に表示されるようになります。大きなファイルはサイト速度低下の原因であり、検索エンジンは低速なサイトを評価しません。Googleではまた、画像検索のために画像をより素早くクロールし、インデックスする可能性があります。Googleの画像検索からのトラフィックの割合を確認するには、Google アナリティクス用のWordPressプラグインやセグメントを使用できます。
• バックアップの作成が高速化される
• 消費する帯域幅を削減できる─ネットワークやブラウザでは、この点が高く評価されます。
• サーバーのストレージ使用量を抑えることができる（最適化するサムネイルの数によって異なる）

Kinstaをご利用の方は、数回のクリックで簡単に画像最適化を有効にすることができます。これについては後ほど。

パフォーマンスを改善する画像最適化

画像の最適化とは、最小のファイルサイズと許容できる画質のバランスを見つけること。

これにはいくつかの方法があり、特に一般的なものとしては、WordPressにアップロードする前に画像を圧縮することです。通常、Adobe PhotoshopやAffinity Photoのようなツールを使用しますが、プラグインを活用することも可能です。

考慮すべき点は、ファイル形式と圧縮方法の2つ。適切なファイル形式と圧縮方法の組み合わせを選ぶことで、画像サイズを5倍近く縮小することもできます。複数の画像やファイル形式を試してみて、適切なものを見つけてください。

1. 適切なファイル形式

画像の最適化を始める前に、まずは適切なファイル形式を選びましょう。ファイル形式には、以下のような種類があります。

• PNG─高画質でファイルサイズが大きくなる。可逆圧縮だが、非可逆圧縮も可能。
• JPEG─非可逆および可逆圧縮。画質とファイルサイズのバランスをとりながら画質を調整できる。
• GIF─256色まで扱うことができる。可逆圧縮のみで、アニメーション画像に適している。

JPEG XRやWebPなど、ファイル形式は他にもありますが、すべてのブラウザでサポートされているわけではありません。一言で言えば、色数の多い画像にはJPEGやJPGを、シンプルな画像にはPNGを使うのが理想的です（JPGとJPEGの比較はこちら）。

2. 画質とファイルサイズのバランス

画像を圧縮しすぎるとどうなるか、例を見てみましょう。1つ目の画像は、かなり低い圧縮率で、画質を重視した画像です（圧縮率が低い分、ファイルサイズが大きい）。2つ目の画像は、圧縮率を大幅に上げて、低画質になった画像です（圧縮率が高い分、ファイルサイズが小さい）。なお、元の画像サイズは2.06MBです。

1つ目の画像サイズは、590KBです。一般的にはウェブページ全体の重さは1〜2MB以下に抑えるのがベストとされており、590KBはすでにその4分の1を占めてしまいます。2つ目の画像は明らかに見た目が損なわれていますが、68KBとかなり軽量です。このように、圧縮率（画質）とファイルサイズの適切なバランスを見つけましょう。

続いてはこの間をとって、中程度の圧縮率にしたところ、以下のように許容範囲の画質を確保しながら、ファイルサイズは151KBに抑えることができました。このサイズは、先ほどの低圧縮の画像よりも4分の1程度。通常、PNGのようなシンプルな画像は、パフォーマンスを最適化するために100KB以下に抑えたいところです。

3. 非可逆圧縮と可逆圧縮

圧縮には、非可逆圧縮と可逆圧縮の2つの手法があります。

非可逆（ロッシー）圧縮：データの一部を除去する手法。画質を劣化させるため、どの程度除去するかを注意する必要があります。ファイルサイズは大幅に縮小することができ、Adobe PhotoshopやAffinity Photoなどの画像編集ツールを使用して、画質の調整が可能。上で見た画像は非可逆圧縮を使用しています。

可逆（ロスレス）圧縮：データを圧縮する手法。画質が落ちることはありませんが、レンダリングする前に圧縮を解除する必要があります。Photoshop、FileOptimizer、ImageOptimなどのツールを使用して、PC上で実行できます。

それぞれの画像やファイル形式にどちらの手法を選ぶかは、自分でテストを行うことをおすすめします。また、使用ツールに設定がある場合は、画像を「ウェブ用」に保存しましょう。これは大体のツールで選択できる設定で、これによって適切な圧縮ができるように画像が調整されます。画質は多少落ちるため、実験しながら、ベストなバランスを見つけてみてください。

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

画像最適化ツールやプログラムは、有料・無料を問わず多数存在します。

自分で手を動かして最適化するツールもあれば、自動化してくれるものも。おすすめはAffinity Photoで、手頃な価格でありながら、Adobe Photoshopに相当する機能が使用できます。

他にも、以下のようなツールやプログラムも役に立ちます。

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• Trimage
• ImageResize.org
• Kinstaの画像最適化機能

また、画像の配信方法は、ファイルサイズと同じくらい重要です。Kinstaのような優れたホスティングサービスの多くは、画像などのファイルを高速配信するためにCDNを実装しています。Kinstaでは、無料のCloudflare統合によって全てのサイトを保護し、高速かつ安全に稼働します。

5. 画像のサイズ変更

以前は、画像をアップロードしてCSSでリサイズさせないようにすることが非常に重要でしたが、WordPress 4.4でレスポンシブ画像（CSSで縮小されない画像）がサポートされるようになって以降、その必要はなくなりました。

WordPressは、基本的にメディアライブラリにアップロードされた画像を複数のサイズで自動生成します。画像の利用可能なサイズをsrcset 属性に含めることで、ブラウザが一番適切なサイズをダウンロードし、その他のサイズを無視します。このコード例を見てみましょう。

高画素密度（HiDPI）モニターが増え続けている今日、「ちょうど良い」画像サイズを見つけることが大切です。例えば、ウェブサイトのカラムやdivのサイズを2〜3倍にしても、元のサイズよりも小さくなります。ブラウサはデバイスの解像度に基づいて、適切なものを表示してくれます。

WordPressのメディアライブラリでは、設定に基づいてサムネイルが作成されます。ただし、元画像はそのまま残るため、画像のサイズを変更し、元画像を削除してディスク使用量を削減したい場合は、Imsanityのような無料のプラグインを使用しましょう。

Imsanityでは、ウェブ用には必要以上に大きい画像を、合理的なサイズに自動縮小するように設定することができます。

画像をアップロードした直後、WordPressが処理を行う前にこのアクションをフックし、アップロード前に適切なサイズに縮小したかのように処理されます。WordPressの動作が変化することはありません。

メディアライブラリを整理する方法

メディアライブラリを整理して使用量を抑えたい場合は、Media Cleanerを使用すると、未使用のメディアファイルを見つけることができます。すべてのメディアファイルがスキャンされ、未使用のものが一覧表示されるため、確認しながら削除しましょう。

Media Cleanerには、スマートなゴミ箱システムが実装されています。削除されたファイルはゴミ箱ディレクトリに移動します。削除後に何か問題が生じた場合は、ファイルやメディアエントリがなくなっても、ワンクリックで簡単に復元可能です。

おすすめの画像最適化プラグイン

幸い、WordPressでは画像の最適化や圧縮を手作業で行う必要はありません。プラグインを活用すれば、少なくとも一部の作業を自動化できます。

画像ファイルをアップロードすると、自動的に最適化してくれるプラグインは複数あります。アップロード済みの画像を最適化するものもあり、すでに大量の画像を使用しているウェブサイトには非常に有用です。このセクションでは、パフォーマンス改善に役立つ画像最適化プラグインを厳選してご紹介します。

ただし、プラグインに依存することは避けましょう。例えば、WordPressのメディアライブラリにそもそも2MBの画像はアップロードするべきではありません。ホスティングのディスク容量を一瞬で使い果たしてしまいます。

事前に写真編集ツールで画像を簡単にリサイズし、アップロードした上で、プラグインを使ってさらに最適化するのがベストプラクティスです。

また、これからご紹介するツールを使い始める前に、現在利用しているホスティングサービスに画像最適化機能があるかどうかも確認しておきましょう。Kinstaでは、画像の最適化されたバージョンを自動生成する画像最適化機能をすべてのお客様に提供しています。2つの画像ファイルのうち小さい方が光速CDNで配信されるため、WordPressサイトが高速になります。圧縮方法は可逆圧縮と非可逆圧縮のいずれかを選択できます。

1. Imagify Image Optimizer

Imagifyは、WP Rocketを開発したチームによって設計されたプラグインです。WooCommerce、NextGen Gallery、WP Retinaに対応しており、一括最適化機能では、圧縮率をNormal、Aggressive、Ultraの3種類から選択できます。復元機能もあるため、画質が低すぎる場合はワンクリックで復元し、圧縮率を変更して再度最適化することも。無料版と有料版があり、無料版では、1ヶ月あたり25MBの画像の最適化に制限されます。

元画像の削除や、大きな画像のサイズ変更も可能です。

Imagifyはサードパーティのサーバーで画像を圧縮するのも特徴です。これによって、このプラグインを使用してもWordPressサイトの速度が低下することはありません。

2. Optimole

Optimoleは、クラウドベースの画像最適化WordPressプラグインです。必要以上に大きな画像を配信することなく、訪問者のビューポートとブラウザに最適な画像サイズを表示するため、サイトの表示速度に関して大きな利点があります。

さらに、遅延読み込み（レイジーロード）と効率的な画像置換機能があり、訪問者側のインターネット接続が遅い場合は、画質を下げてくれます。また、ブラウザを自動検出し、WebPがサポートされている場合にはこれを配信してくれます。

Optimoleで最適化された画像は、すべて高速CDN経由で提供されます。無料で使い始めて、帯域幅や処理容量の追加が必要になれば、有料版にアップグレードすることができます。

3. Optimus – WordPress Image Optimizer

Optimus – WordPress Image Optimizerは、可逆圧縮（画質が落ちない手法）を使用して画像を最適化します。WooCoomerceとマルチサイト対応で、大規模なメディアライブラリを持つサイト向けに画期的な最適化機能があります。また、WP Retina WordPressプラグインとの互換性もあり。無料版と有料版があり、有料版では、年払いで好きなだけ画像を圧縮できます。Cache Enablerプラグインと組み合わせれば、Googleの新たな軽量画像形式であるWebPを扱うことも可能です。

4. WP Smush

WP Smushには無料版と有料版があり、画質を落とさずにサイズを縮小するため、画像に隠されたデータを削減するプラグインです。サイトに画像をアップロードする際、画像をスキャンして縮小し、すでにアップロードしている画像にも対応してくれます。一度に50ファイルまで自動圧縮し、必要に応じて手動で圧縮することも。JPEG、GIF、PNGのファイル形式をサポートし、画像サイズは最大1MBまで。

• WP All ImportやWPMLのような人気の高いメディアライブラリプラグインと互換性あり
• 可逆圧縮技術を使用して高画質を確保
• 画像は自動検出されるため任意のディレクトリに保存可能
• 画像の幅と高さを設定してすべての画像を同じ比率にリサイズ

5. TinyPNG（JPGも圧縮可）

TinyPNGは、TinyJPGとTinyPNGサービス（無料アカウントでは、毎月約100枚の画像を圧縮可能）を使用して、JPGとPNG画像を最適化するプラグインです。これからアップロードする画像は自動的に圧縮し、既存の画像も一括圧縮。また、CMYKをRBGに変換してさらにサイズを縮小します。JPEG画像は最大60%、PNG画像は最大80%まで、画質が損なわれることなく圧縮されます。ファイルサイズに制限はありません。

6. ImageRecycle

ImageRecyleは、画像とPDFを自動最適化するプラグインで、画像だけでなくPDFにも対応しているのが特徴です。圧縮時の最小ファイルサイズを指定できるのは画期的で、例えばサイズが80KB以下の画像は圧縮しない、というような設定が行えます。この機能によって、画像やファイルが圧縮されすぎてしまうのを回避できます。また、一括最適化や画像サイズ変更といった機能もあり。注意）15日間の無料トライアルがありますが、有料プラグインです。画像は同社のサーバーにアップロードされて圧縮されます。料金プランは月払いではなく、圧縮された画像の総数に応じて課金されます（1万点で10ドル〜）。

7. EWWW Image Optimizer

EWWW Image Optimizerは、手間をかけずに画像を縮小して、サイトを高速化するのにおすすめの選択肢です。サイズ制限がなく、上級者向けの柔軟性もあり、必要に応じカスタマイズして使用することができます。

無料版では、JPG圧縮とWebP変換を無制限に実行できるため、趣味のサイトや立ち上げたばかりのブログに理想的です。プラグイン利用者は、Bulk Optimizer（一括最適化）を使って既存の画像を圧縮したり、Media Libraryリストモードで特定の画像を選択して圧縮したりできます。追加のフォルダをスキャンし、サイト上のすべての画像が適切に最適化されていることも確認可能です。

また、画像をWebPのような次世代画像形式に変換したり、マルチ形式変換機能で画像に適したファイル形式を見つけたりすることも。

有料のCompress APIを使用すると、画質を維持したままさらに圧縮でき、平均して半分近くサイズを縮小することができます。さらにPDF圧縮、便利な30日間の画像バックアップ機能もあり、オプションのEasy IO CDNを使用すると、画像が自動圧縮され、ページやデバイスのサイズに応じてスケーリングされます。遅延読み込み、次世代画像形式であるWebPへの変換もサポートしています。

画像最適化によるパフォーマンス改善

画像を最適化することで、WordPressサイト全体の速度にどれだけの変化が現れるのか、独自にテストを行いました。

圧縮なしのJPG画像

まずは、1MBを超えるサイズのJPG画像を6枚、テストサイトにアップロードします。その後、Pingdomで5回のテストを行い、平均値をとりました。結果は以下の通り、総読み込み時間は1.55秒、総ページサイズは14.7MBとなりました。

圧縮ありのJPG画像

続いて、Imagifyプラグインを使用して同じJPG画像を圧縮します（圧縮率はAggressiveを選択）。こちらもPingdomで5回のテストを行い、平均値をとります。その結果、総読み込み時間は476ミリ秒に短縮され、総ページサイズはなんと2.9MBに。読み込み時間は54.88%、ページサイズは80.27%改善しました。

このように読み込み時間を50%以上短縮できる最適化の方法は、他にはほとんどなく、画像の最適化がいかに重要であるかがわかります。さらに、この作業はすべてプラグインによって自動化可能。今すぐにWordPressサイトを高速化する効果的な手法です。

その他に劇的にサイトを高速化する方法としては、ホスティングの乗り換えです。例えば、他社からKinstaに移行したお客様のサイトの多くが、45%以上の高速化を実現しています。Kinstaに移行後、画像の最適化を行えば、さらに高速化されることは明らかです。

写真編集ツール、またはWordPressプラグインを使用しているかにかかわらず、画像最適化によって、Google PageSpeed Insightsの「画像を最適化する」の推奨項目をクリアすることができます（以下参照）。

スピードテストツールで他の最適化に関する推奨事項が表示される場合は、Google PageSpeed InsightsおよびPingdomに関する記事をご覧ください。

サイト管理にまつわるヒントは、電子書籍と動画でご紹介しています。サイト管理に役立つ電子書籍はこちらからダウンロード可能です。

SVGを使用するメリット

画像最適化のもう1つのヒントは、他の画像とあわせてSVGファイルを使用すること。SVGはスケーラブルなベクター形式で、以下のような理由から、ロゴ、アイコン、テキスト、シンプルな画像に適しています。

• ブラウザと写真編集ツールの両方で自動スケーラブル可能（ウェブデザイナーやグラフィックデザイナーに嬉しい機能）
• GoogleはSVGをPNGやJPGと同じようにインデックスするため、SEOも安心
• SVGは一般にPNGやJPGよりもファイルサイズが小さく、読み込み時間が短縮される

GenkiがSVGとPNGとJPEGのサイズ比較を公開しています。以下、記事で紹介されている画像比較を見てみましょう。

JPG（最適化サイズ：81.4 KB）

PNG（最適化サイズ：85.1 KB）

SVG（最適化サイズ：6.1 KB）

このように、JPGと比較して、SVGは92.51％、PNGと比較すると92.83%ファイルサイズが小さくなっています。WordPressサイトでSVGを使用する方法はこちらをご覧ください。

画像最適化のベストプラクティス

最後に、画像最適化に関する一般的なベストプラクティスも見ておきましょう。

• WordPressプラグインを利用する場合は、画像を外部サーバーで圧縮、最適化するものを選ぶ（サイトの負荷が軽減される）。
• PNGやJPGとあわせて、できる限りベクター画像を取り入れる。
• CDNを使用して、画像を高速配信する（KinstaのCDNには、MyKinsta内蔵のコード圧縮機能があるため、Kinstaではワンクリックで簡単にCSSとJavaScriptを自動圧縮できる）。
• 不要な画像データを削除する。
• 余白はなくし、CSSでパディングを設定することで余白を再現する。
• CSS3効果をできるだけ使用する。
• 画像を適切なサイズで保存する（WordPressは現在、CSSでリサイズすることなく画像を提供するレスポンシブ画像をサポートしているとはいえ大切）。
• ファビコンには常に.icoファイル形式を使用する。
• 画像内にテキストを配置する代わりにウェブフォントを使用する。
• ラスター画像は、形状や詳細が多い場合にのみ使用する。
• ビット深度を下げて色数を抑える。
• できる限り非可逆圧縮を使用する。
• 各ファイル形式に適した設定を見つけるために実験を行う。
• アニメーションにはGIFを使う（ただし要圧縮）。
• 細部まで高解像度が求められる画像にはPNGを使用する。
• 一般的な写真やスクリーンショットにはJPGを使用する。
• 不要な画像のメタデータは削除する。
• できるだけ処理を自動化する。
• 状況に応じて、1ページ目のレンダリングを高速化するために画像を遅延読み込みする。
• Photoshopなどのツールで「Web用に保存」を選択する。
• Google ChromeでWebPを使ってより軽量な画像を配信する。
• Kinstaの画像最適化機能を活用する。

より良いパフォーマンスのために画像を最適化し、ベストプラクティスに従えば、検索エンジン、ブラウザ、ネットワークから評価され、より高速にウェブサイトを提供することができます。関連して、画像や帯域幅盗用の原因となる直リンクを防ぐ方法もご覧ください。

パフォーマンスを考慮して画像最適化を行なっていますか？どのように実行していますか（手作業、プラグイン、または併用）？以下のコメント欄でぜひお聞かせください。また、今回ご紹介した以外のおすすめ画像最適化ツールやプラグイン、ベストプラクティスなどをご存知でしたら、ぜひ共有してください。