ウェブサイトのGoogle での評価は重要です。幸いなことに、画像ファイルのサイズを小さくすると、ウェブサイトのパフォーマンスを改善することができます。ただし、画像を編集すると画質が下がり、訪問者に嫌われるようになる恐れがあります。画質が少し下がっても、醜くならない限り問題ありません。画像のファイルサイズを減らしながら、ウェブサイトに載せるのに十分な画質を確保できる工夫がいくつかあります。それでは、画像を見苦しくしないフォーマット方法とパフォーマンス観点でのWeb用の画像最適化についてご説明します。
画像の最適化とは？
重い画像はウェブページを遅くするため、ユーザーエクスペリエンスが悪化します。画像の最適化とは、プラグインまたはスクリプトを使用してファイルサイズを縮小するプロセスのことです。これにより、ページの読み込み時間が改善されます。よく使用される処理方法は非可逆圧縮と可逆圧縮の2つです。
- 画像をフォーマットする利点
- パフォーマンス観点でのWeb用の画像最適化について
- 利用可能なWordPressの画像最適化プラグイン
- 画像最適化のケーススタディ
- 他の画像フォーマットと合わせてSVGを使用する
- 画像を使用する際のベストプラクティス
画像をフォーマットする利点
画像をフォーマットすることはなぜ必要でしょうか？利点は何でしょうか？パフォーマンスの観点での画像の最適化には利点が多いです。HTTP Archiveによると、2018年11月の時点で、画像はウェブページの全体的なページの重さの平均21％を占めています。したがって、WordPressウェブサイトを最適化する際に、ビデオの次に画像を最適化しましょう。
スクリプトとフォントよりも重要です。皮肉なことに、画像最適化は最もしやすい仕事の一つである一方、ウェブサイト所有者の多くはこれを見逃しています。
主な利点は下記のとおりです。
- ページの読み込み速度が改善されます。（速度改善については下記のケーススタディをご参照ください。） ページの読み込みに時間がかかりすぎると、訪問者が待たずに他のウェブサイトに移動してしまうことがあります。ページの読み込み時間の最適化については、当社のページ速度最適化についての詳細ガイドをご参照ください。
- 便利なSEO対策用のWordPressプラグインと合わせて実施するとSEOが改善されます。ウェブサイトの検索エンジンでの検索順位も改善されます。重いファイルはウェブサイトを遅くします。そして、検索エンジンは遅いウェブサイトが嫌です。Googleの画像検索ようのクロールとインデクス登録も速くなります。Google画像検索からのトラフィックの割合については、Google Analyticsのセグメントを使用して確認できます。
- バックアップの作成が速くなります。
- 画像のファイルサイズが小さいほど、バンドウィズの使用量が減ります。どのネットワーク及びブラウザにもバンドウィズの使用量が少ないほど好ましいです。
- 使用するディスク容量が少なくなります。（これは、最適化するサムネイルの数により異なります。）
パフォーマンス観点でのWeb用の画像最適化について
画像を書式設定する主な目的は、最小ファイルサイズと納得できる画質のバランスを見つけることです。これらの最適化を実行する方法は複数あります。最も一般的な方法の一つは、WordPressにアップロードする前に画像を圧縮することです。画像の圧縮はAdobe Photoshop及びAffinity Photoなどのツールで実行できます。ただし、プラグインを使用して自動的に実行することもできる為、後程詳しくご説明します。
考慮すべき2つの主な項目は、ファイル形式と使用する圧縮種類です。ファイル形式と圧縮種類の正しい組み合わせを選択することにより、画像のサイズを最大5倍まで減らすことができます。最も効果的なものを探し出すには、各組み合わせを試してみる必要があります。
適切なファイル形式を選択する
画像の修正を始める前に、最適なファイルタイプを選択しましょう。使用可能なファイルタイプはいくつかあります：
- PNG：高画質の画像を生成しますが、ファイルサイズも大きくなります。可逆圧縮の画像形式として作成されましたが、非可逆な場合もあります。
- JPEG：非可逆圧縮も可逆圧縮も使用しています。画質とファイルサイズのバランスがとれるように画質レベルを調整できます。
- GIF色を256色しか使用しません。アニメーション画像に最適なフォーマットです。可逆圧縮のみを使用します。
JPEG XR及びWebPなど、他にもいくつかありますが、多くのブラウザで広くサポートされていません。カラフルな画像にはJPEG（またはJPG）を使用し、シンプルな画像にはPNGを使用することは理想的です。
（参考文献：JPG対JPEG：最も一般的な画像ファイルフォーマットを理解しよう）
圧縮の画質とサイズ
以下は画像を圧縮しすぎた場合の例です。1つ目の画像は非常に低い圧縮率を使用しているため、最高の画質が得られますが、ファイルサイズは大きくなります。2つ目は、非常に高い圧縮率を使用しているため、非常に低画質の画像になりますがファイルサイズは小さくなります。注：元の画像は2.06 MBです。
ご覧のとおり、上記の最初の画像は590 KBです。一枚の写真だけには大きすぎます！一般的には、ウェブページの全体的なページの重さは1～2 MB未満であることが最適です。590 KBはその4分の1もします。2番目の画像はもちろん醜いですが、サイズは68 KBのみです。圧縮率（画質）とファイルサイズの中庸を選択すればよいでしょう。
そこで、画像を中程度の圧縮率で再び圧縮しました。ご覧の通り、画質はきれいで、ファイルサイズは高解像度の写真なら納得できる151 KBです。元の写真の低圧縮版より約4倍軽いです。PNGなどのシンプルな画像は、最高のパフォーマンスを得るために100 KB以下にする必要があります。
非可逆圧縮と可逆圧縮
圧縮は、非可逆圧縮と可逆圧縮の2種類があります。
非可逆圧縮： データの一部を除去するフィルタです。画質が悪化する為、画像をどれだけ圧縮するかに注意する必要があります。ファイルサイズは大幅に減らすことができます。画像の画質設定を調整するには、Adobe Photoshop、Affinity Photoなどの画像エディタツールを使用します。上記の例では、非可逆圧縮を使用しています。
可逆圧縮： データを圧縮するフィルタです。画質が悪化しませんが、レンダリングする前に画像を圧縮解除する必要があります。デスクトップ上で可逆圧縮を行うには、Photoshop、FileOptimizer、ImageOptimなどのツールを使用します。
各画像または各フォーマットに最適な方法を特定できるように、両方の圧縮技術を試してみましょう。ツールに複数のオプションがある場合は、画像を必ずWeb用に保存しましょう。「Web用に保存」とは画像エディタにはよくあるオプションで、適切な圧縮ができる画質設定のことです。画質がある程度下がることに仕方ありません。画像を見にくくすることなく最善のバランスを見つけるように十分に実験しましょう。
画像最適化ツールとプログラム
画像最適化に使用できるプレミアムまたは無料のツール及びプログラムが多いです。画像最適化のオプションを数多く提供するものも、最適化を完全に任せても良いのもあります。例えば、Affinity Photoは安くてまるでAdobe Photoshopと同じ機能のあるソフトウェアです。
下記のツール及びプログラムも検討する価値があります：
- Adobe Photoshop
- Gimp
- Paint.NET
- GIFsicle
- JPEGtran
- JPEG Mini
- OptiPNG
- pngquant
- FileOptimizer
- ImageOptim
- Trimage
- ImageResize.org
画像をスケーリング用にリサイズする
以前は、画像をスケーリングでアップロードし、CSSによるサイズ変更をしないことが非常に重要でした。ただし、WordPress 4.4では（CSSで縮小されない）レスポンシブな画像がサポートされるようになった為、これは以前ほど重要ではなくなりました。WordPressは自動的にメディアライブラリにアップロードされた各画像に対していくつかのサイズの画像を生成します。利用可能なサイズがすべてsrcset属性にあり、ブラウザーは最も適切なサイズのみをダウンロードし、それ以外を無視できるようになりました。下記はコードの例です。
なお、今日ではますます多くのHiDPIディスプレイがある為、妥協点を見つければ良いでしょう。例えば、ウェブサイトの列サイズまたはdivサイズの2倍または3倍程度のもので良いでしょう。それでも元のサイズより小さくなります。ブラウザは訪問者のデバイスの解像度に合わせた方を表示します。
WordPressメディアライブラリは既存の設定に基づいてサムネイルを作成しますが、元の画像はそのまま残ります。元の画像を保存さずに画像のサイズを変更し、ディスク容量を節約するにはImsanityなどの無料のプラグインを使用できます。
Imsanityを使用すると、アップロードするすべての画像がどのウェブサイトでも十分なサイズに制限されるように、サイズの限度が設定できます。ImsanityがWordPressに接続するのは、画像のアップロード直後でWordPress処理が行われる前です。したがって、WordPressは通常どおり機能しますが、投稿者がアップロードする前に画像を適切なサイズに圧縮したかのようになります。
利用可能なWordPressの画像最適化プラグイン
ありがたいことに、WordPressなら、フォーマット作業または圧縮作業を手動で行う必要はありません。少なくとも作業の一部をプラグイン任せることができます。アップロードする際に自動的に画像ファイルを最適化するプラグインがいくつかあります。アップロード済みの画像さえ最適化されます。これは、特に既に画像の多いウェブサイトをお持ちの場合には、非常に便利な機能です。以下にパフォーマンスの観点で画像を最適化するための最も便利なプラグインをいくつか紹介します。
ただし、プラグインのみに頼らないことが重要です。ディスクス容量があっという間に消費される為、たとえば2 MBの画像をWordPressメディアライブラリにアップロードしない方がいいです。 最善の方法は、事前に写真編集ツールで画像のサイズを変更してからアップロードし、下記のプラグインのいずれかを使用してさらに縮小することです。
- Imagify Image Optimizer
- ShortPixel Image Optimizer
- Optimole
- EWWW Image Optimizer Cloud
- Optimus Image Optimizer
- WP Smush
- TinyPNG
- ImageRecycle
Imagify Image Optimizer
Imagifyはご存知かもしれないWP Rocketを開発したチームにより作成されたプラグインです。WooCommerce、NextGen Gallery、そしてWP Retinaとの互換性があります。それに一括最適化機能もあり、圧縮種類はノーマル、アグレッシブ、そしてウルトラの3種類があります。復元機能もある為、画質に満足できない場合は、ワンクリックで画像を基に復元し、ご希望に合ったレベルで再圧縮できます。プラグインには無料とプレミアム版があります。無料のアカウントでは月25 MBの限度があります。
元の画像を取り除き、大きな画像のサイズを変更することは、このプラグインでも実施できます。
Imagifyはまた、独自のサーバーではなく、サードパーティのサーバーで画像を圧縮します。これはパフォーマンスの観点で非常に重要です。ImagifyはWordPressウェブサイトを遅くしません。
ShortPixel Image Optimizer
ShortPixel Image Optimizerは、月100枚の画像を圧縮できる、無料のプラグインです。PNG、JPG、GIF、WebP、さらにはPDFなど様々なの種類のファイルが処理できます。非可逆圧縮機能も可逆圧縮機能もあります。CMYKをRGBに変換します。画像とサムネイルを処理のためにクラウドに持って行き、処理後に元の画像を上書きします。なお、元のファイルのバックアップが作成される為、必要に応じて手動で復元できます。ギャラリーファイルを一括で変換します。ファイルサイズに制限はありません。
Optimole
Optimoleは、画像を最適化するWordPressプラグインで、一切触らずにプラグインが自動的に画像のサイズを縮小します。完全にクラウドベースであり、本来のサイズよりも大きい画像を配達することは決してない（訪問者のビューポートとブラウザに最適な画像サイズを表示する）という、ウェブサイトの読み込み速度の観点で非常に大きな利点があります。
このプラグインにはさらに、遅延読み込み機能と効率的な画像置換機能があり、訪問者のインターネット接続が遅い場合は画質を低下させます。また、ユーザーのブラウザを自動的に検出し、サポートされている場合はWebPを配達します。
Optimoleが圧縮するすべての画像は高速なCDNを介して配達されます。Optimoleを無料で試し、追加のバンドウィズまたは処理スペースが必要な場合にプレミアムプランにアップグレードすることが可能です。
EWWW Image Optimizer Cloud
EWWW Image Optimizer Cloudは、手間がかからずに画像を小さくし、ウェブサイトのスピードアップができるプラグインです。サイズ制限がなく、デフォルト設定を使用することも、完全にカスタマイズしたお好みに合わせた設定を使用することも可能です。EWWW IOのすべてのユーザーは、既存の画像を最適化できる一括最適化機能と特定の画像を選択し圧縮するメディアライブラリーリスト機能を利用できます。
ウェブサイト上のすべての画像が正しく最適化されているか確認するには、他のフォルダもスキャンできます。EWWW IOではまた、画像をWebPなどの次世代フォーマットに変換したり、マルチフォーマット変換オプションを使用して画像に最適な画像フォーマットを見つけることさえできます。画像圧縮の費用はたった0.003ドル/画像から始まります。
プレミアム圧縮APIを使用すると、画質を失わずに最先端の圧縮を行うことができます。これにより、PDF圧縮のロックが解除され、便利な30日間の画像バックアップが含まれます。月額9ドルから始まるExactDN機能には、自動圧縮（サーバー側での圧縮は不要）、自動サイズ変更と、CDNのすべての利点があり、あらゆるデバイスサイズでパフォーマンスが高いです。
Optimus Image Optimizer
Optimus WordPress Image Optimizeは可逆圧縮により画像を最適化します。可逆圧縮とは、画質の悪化がまったくないということです。WooCoomerceとマルチサイトのサポートと、既存の大規模のメディアライブラリをお持ちの方のための素晴らしい一括最適化機能があります。WordPressプラグインWP Retinaとの互換性もあります。プラグインには無料とプレミアム版があります。プレミアム版では、年一度に支払いを行い、無制限の量の画像を圧縮できます。Cache Enablerプラグインと本プラグインを組み合わせると、Googleの新しくて軽量の画像フォーマットであるWebPを使い始めることもできます。
WP Smush
WP Smushには無料版とプレミアム版があります。画質への影響を与えずにサイズを減らすために画像の隠された情報を削除します。 ウェブサイトにアップロードする際に、画像をスキャンし縮小します。またはアップロード済みの画像もスキャンし縮小します。一度に最大50ファイルを一括処理できます。必要に応じて手動での処理も可能です。処理可能な画像種類はJPEG、GIF、およびPNGです。ファイルサイズは1MBに制限されています。
- WP All Import及びWPMLなど人気のあるメディアライブラリプラグインとの互換性があります。
- 画質が下がらないように、画像最適化は必ず可逆圧縮方式で行われます。
- 保存先のディレクトリを問わずSmushは画像を見つけ、圧縮します。
- Smushには、すべての画像の幅と高さを自動的に設定するオプションがある為、各画像が同様にサイズ変更されます。
TinyPNG（JPG圧縮も）
TinyPNGはTinyJPGとTinyPNGサービスを使用してJPGとPNG画像を最適化します。（無料のアカウントでは月約100枚の画像が圧縮できます。）新しい画像を自動的に圧縮し、既存の画像を一括圧縮します。スペースを節約するためにCMYKをRGBに変換します。目に見える画質の損失なしに、JPEGを最大60％、PNGを最大80％圧縮します。ファイルサイズの制限はありません。
ImageRecycle
ImageRecyleプラグインは、画像とPDF用の自動最適化プラグインです。本プラグインは画像圧縮だけでなくPDFにも焦点を当てています。プラグインの本当に便利な機能の一つは、圧縮の最小ファイルサイズが設定できることです。たとえば、サイズが80 KBの画像があると、それらの画像を自動圧縮の対象から外すことができます。これにより、画像及びファイルが過度に圧縮されることがなくなります。一括最適化と自動画像サイズ変更機能もあります。注：15日間の無料トライアルがありますが、このプラグインはプレミアムサービスであり、画像は向こうのサーバーにアップロードされ圧縮されます。支払いは月額ではなく、圧縮された画像の合計数で課金されます。（10,000枚は10ドルです。）
画像最適化のケーススタディ
Web用に画像を最適化はWordPressウェブサイト全体のスピードアップにつながることを示すために、当社独自のケーススタディとテストを行うことにしました。
非圧縮JPG
最初にサイズが1 MB以上の非圧縮JPGを6枚テストサイトにアップロードしました。（元の非圧縮JPGをご参照ください）。次にPingdomのスピードテストを5件実施し、平均をとりました。スピードテストから分かるように、合計読み込み時間は1.55秒、合計ページサイズは14.7 MBでした。
圧縮したJPG
それから、WordPressプラグインImagifyを使用して、「アグレッシブ」設定でJPGを圧縮しました。（圧縮後のJPGも是非ご確認ください。見た目はまだきれいです。）次にPingdomのスピードテストを5件実施し、平均をとりました。スピードテストから分かるように、合計読み込み時間は476ミリ秒、合計ページサイズは2.9 MBでした。合計読み込み時間は54.88％改善し、ページサイズは80.27％減少しました。
ウェブサイトの読み込み時間が50％以上改善される最適化対策が他にはなかなかありません。したがって、画像の最適化が非常に重要です。上記のプロセスはプラグインによる自動処理プロセスです。手作業の不要なスピードアップ対策です。これ以外にできる唯一の劇的な最適化対策はご利用のWordPressホスティング会社を変更することでしょう。Kinstaに移行してきたお客様の多くは、スピードが45％以上改善したと述べています。Kinstaに移動した上で画像を最適化することの影響度を想像してみてください！
写真編集ツールを使用しているかWordPressプラグインを使用しているかにかかわらず、画像を最適化することにより、Google PageSpeed Insightsで表示される「画像を最適化せよ」警告も処理できます。（下記参照）
スピードテストツールの他の最適化に関するの警告表示が発生している場合は、当社のGoogle PageSpeed InsightsまたはPingdomについての詳細記事を必ずご確認ください。
SVGを使用する
次の推進事項は、他の画像形式に合わせてSVGも使用することです。SVGは、ロゴ、アイコン、テキスト、および簡単なイラストに最適な拡大縮小可能なベクトル形式です。 その理由はいくつかあります：
- SVGは、ブラウザでも写真編集ツールでも拡大縮小可能な形式です。Webデザイナーまたはグラフィックデザイナーにとっては夢のようなことでしょう！
- SVGのGoogleでのインデックス登録はPNGとJPGと完全に同様である為、SEOのご心配は要りません。
- SVGは、ファイルサイズがPNGとJPGよりも小さい場合が多いです。（必ずしもそうではありませんが。）これにより読み込み時間が改善されます。
SVGのPNGとJPEGのファイルサイズとの比較については、Genkiの素晴らしい記事をご参照ください。 彼の比較試験の要点をいくつか示します。
JPG（最適化語後のサイズ：81.4 KB）
PNG（最適化語後のサイズ：85.1 KB）
SVG（最適化語後のサイズ：6.1 KB）
ご覧の通り、SVGはJPGと比較して92.51％のファイルサイズの減少です。PNGと比較すると、92.83％です。WordPressウェブサイトでSVGを使用する方法についてのチュートリアルも是非ご確認ください。
ベストプラクティス
Web用の画像最適化のベストプラクティスは次のとおりです：
- WordPressプラグインを使用する場合は、外部（プラグインのサーバー上）で画像の圧縮かつ最適化を行うものを選択しましょう。これにより、ウェブサイトの負荷が軽減されます。
- できる限り、PNGとJPGに合わせてベクトル画像も使用しましょう。
- 世界中の訪問者にすばやく画像を配達できるようにCDNを使用しましょう。
- 不要な画像データを削除しましょう。
- 余白をトリミングし、CSSを使用して余白を再作成しましょう。
- CSS3効果をできるだけ使用しましょう。
- 画像を適切な寸法に保存しましょう。なお、WordPressはCSSでサイズを変更しなくても構わないレスポンシブな画像をサポートするようになりましたので、ご注意ください。
- 画像内にテキストを配置する代わりにウェブフォントを使用しましょう。アイコンフォントの方はスケーリングしても見た目がきれいで、スペースの使用量も少ないです。
- 形状の多い細かい画像の場合にのみビットマップ画像を使用しましょう。
- ビット深度を小さくしてカラーパレットを小さくしましょう。
- 可能な限り非可逆圧縮を使用しましょう。
- 各フォーマットに最適な設定を見つけるように実験しましょう。
- アニメーションが必要な場合はGIFを使用しましょう。（ただし、アニメーションGIFを必ず圧縮しましょう。)
- 高精細度と高解像度が必要な場合はPNGを使用しましょう。
- 一般的な写真またはスクリーンショットにJPGを使用しましょう。
- 不要な画像メタデータを削除しましょう。
- 処理プロセスをできる限り自動化しましょう。
- 場合によっては、最初のページレンダリングのスピードアップのため画像の遅延読みをお勧めします。
- Photoshopなどのツールで画像を「Web用に保存」機能で保存しましょう。
- より小さい画像を配達できるようにChromeでWebPを使用しましょう。
画像を最適化した上でベストプラクティスに従えば、ウェブサイトの検索エンジン、ブラウザ、ネットワークなどでの評価が高くなり、読み込み速度も改善されます。そして、バンドウィズまたは画像が他人に盗まれないように、当社のホットリンクについての記事も是非ご確認ください。
あなたもパフォーマンスを改善したく画像を最適化したことがありますか？処理は手動で行いますか？またはプラグインを使用しますか？他に推奨するツールやプラグインはありますか？他に何か付け足すことがあるでしょうか？他にいい工夫やベストプラクティスをご存じでしたら、是非コメントを書いて教えてください。
コメントを残す