WordPressの画像最適化の究極のガイド

1…2…3…–サイトがまだ読み込まれているため、潜在的な顧客がサイトを閉じたところです。 おなじみですか？ あなたは何度もその焦りと欲求不満の訪問者だったと思います。 私はそうだったのを知っています。 そのため、画像の最適化について知っておく必要のある究極のリストをまとめました。 長くなりますが、一読の価値があると思います。

目次

• 3分のビデオでこの記事の内容
• 画像最適化のメリット
• 画像フォーマット
• アップロードする前に画像のサイズを変更する
  • 画像のサイズを自動的に変更するためのImsanityWordPressプラグイン
• 画像の圧縮
  • 画像圧縮のための最高のオンラインツール
    • TinyPNG
    • オプティマイザ
    • コンプレッサー
    • ImageOptim
    • ImageSmaller
    • Kraken
    • JPEG.io
    • PageSpeed Insights
    • 最高のオンライン圧縮ツールの結果
    • JPEG用の最高のオンライン圧縮ツール
    • PNG用の最高のオンライン圧縮ツール
    • 全体的に最高のオンライン画像圧縮ツール
  • 画像圧縮に最適なWordPressプラグイン
    • WPスマッシュ（無料版）
    • TinyPNGによるJPEG＆PNG画像の圧縮
    • ShortPixel
    • 想像する
    • EWWWイメージオプティマイザー（無料版）
    • 画像圧縮に最適なWordPressプラグインの結果
    • JPEGを圧縮するための最高のWordPressプラグイン
    • PNGを圧縮するための最高のWordPressプラグイン
    • 全体的な画像圧縮に最適なWordPressプラグイン
• 結論

3分のビデオでこの記事の内容

これは、この記事の非常に簡単なビデオの概要です。 私はまだ読むことをお勧めしますが、あなたを十分にからかうために、ここに行きます：

画像最適化のメリット

あなたはまだすべての画像最適化のもので売られていませんか？ その小さくて些細な問題だけを修正した場合に得られるすべての利点を見てみましょう。

• あなたのサイトはより速くなります
• あなたのGooglePageSpeedスコアはより良くなります
• グーグルはあなたをもっと好きになり、あなたの検索エンジンのランキングは向上します
• バウンス率が低くなり、より多くの訪問者があなたのページを見るようになります
• サーバーに必要なストレージが少なくなり、サーバーに費やすリソースが少なくなるため、コストを節約できます。
• あなたはあなた自身とあなたの訪問者のためにモバイルデータプランのお金を節約します

私は今あなたの注意を引いていますよね？ これで、実際の作業から始めることができます。

画像フォーマット

画像の最適化は、画像形式に関する基本的な知識から始まります。 インターネットで最も一般的な2つの形式は、拡張子が.pngのPNGと拡張子が.jpgのJPEGです。 写真、グラデーションのある画像、数百万色の画像に最適な形式であるため、ほとんどの場合JPEGを使用します。 一方、PNGは、ロゴなどの限られたカラー画像や透明度のある画像の場合に適しています。

次の例では、最適な画像最適化のために適切な画像形式を選択することがいかに重要であるかを示します。

最適化されていないchild.jpg画像を.jpg形式と.png形式の両方で保存します。 画像child-saved-as-jpeg.jpgのサイズは3.1MB、画像child-saved-as-png.pngのサイズは4.5MBであることがわかります。 この場合、PNG画像はJPEG画像よりも45％大きくなりました。これは、特定の画像形式を選択したことによる違いです。 わずかな労力でそれほど多くのスペースを節約する簡単な方法はありません。 まあ、多分あります。 次のステップを見てみましょう。

アップロードする前に画像のサイズを変更する

前の例では正しい画像形式を選択することでスペースを節約できましたが、アップロードする前に画像のサイズを変更すると、さらに多くのスペースを節約できます。 しかし、どのくらいサイズを変更する必要がありますか？ それは本当にあなたのウェブサイトの幅とコンテナに依存します。

ProteusThemesサイトでは、画像の最大幅は1110ピクセルなので、現在の画像の幅1800ピクセルのchild.jpgを幅1110ピクセルにサイズ変更します。 その場合、サイズは3.1MBから1.1MBになりました。これは、節約および削減されたスペースのさらに65％です。

ヒント：WordPressメディアライブラリで画像のサイズを直接変更できます。 [メディア]-> [画像の選択]-> [画像の編集]をクリックして、画像の新しいサイズを選択します。

画像のサイズを自動的に変更するためのImsanityWordPressプラグイン

画像のサイズ変更について考えたくない場合、または多くの異なるユーザーが画像をWebサイトにアップロードする場合は、Imsanityプラグインが最適に機能するはずです。 プラグインの設定では、画像に必要な最大の幅または高さを選択でき、プラグインはすべての大きな画像のサイズをそのサイズに変更します。 一括サイズ変更機能を選択して、既存のすべての画像のサイズを変更することもできます。 アップロードする前に各画像のサイズを個別に変更することに問題がある人には、このプラグインを絶対にお勧めします。 Imsanityプラグインは無料でダウンロードできます。

画像の圧縮

画像最適化の基本を学んだので、どうすればゲームを盛り上げることができるか見てみましょう。 インターネット上には多数の画像圧縮オンラインツールがあり、 WordPressプラグインもあります。これにより、画像のサイズが小さくなります。 ただし、ここでは注意が必要です。一部のツールではほとんど違いがなく、一部の設定では画像が破壊されて役に立たなくなります。 では、完璧なバランスを見つける方法は？ 心配しないでください。執筆時点（2017年6月、2018年更新）では、画像の最適化のために最も人気のあるすべてのオンラインツール/サービスとWordPressプラグインをテストし、最適なものを選択しました。

テストを実施するために、3つの異なるJPEG画像と1つのPNG画像を使用しました。

3つのJPEG画像はすべて、著者のMi Pham、Breather、Denise Chan、NikoVirtanenによるUnsplashからのものです。 それらは、テスト目的でトリミングされ、1110 x 624pxにサイズ変更されました。

PNG画像の場合、ProteusThemesロゴとその背後にあるパターンを使用して独自の画像を作成しました。 JPEGテスト画像と同様に、これも1110 x624ピクセルにサイズ変更されます。

ここで、選択したすべてのツールとプラグインを使用してすべての画像を圧縮用に配置し、どれを使用するのが最適かを判断します。 オンラインツールから始めましょう。

画像圧縮のための最高のオンラインツール

執筆時点（2017年6月、2018年更新）では、画像圧縮用の最も人気のあるオンラインツールとサービスの完全なリストを以下に示します。

• TinyPNG
• オプティマイザ
• コンプレッサー
• ImageOptim
• ImageSmaller
• Kraken
• JPEG.io
• PageSpeed Insights

他のツールがそのリストに含まれるに値すると思われる場合は、お知らせください。テストしてリストに追加します。 以下に各ツールの私のレビューと、最高のツールの評価を示します。 個々のツールについて読みたくない場合は、ここをクリックしてください–勝者を見せてください！

TinyPNG

TinyPNGは、私が最初に使用した画像圧縮ツールの1つであり、今でも時々使用しています。 オプションはありません。画像をアップロードするだけで、画像が圧縮されます。 このオンラインツールを使用すると、5MBのサイズで最大20枚の画像を一括アップロードできます。

オプティマイザ

Optimizillaは、もう1つのシンプルで強力なオンラインツールです。 無料で使用でき、最大20枚の画像を一括アップロードするオプションがあります。 最高の圧縮/品質比を得るには、デフォルトで品質設定を90のままにします。 さらに圧縮をプッシュしたい場合は、この設定を変更するだけで、すぐに品質の変化が見られます。

コンプレッサー

Compressorは、画像圧縮に最適なツールの1つになる可能性がありますが、大きな欠点が1つあります。 現在、一括アップロードのオプションはありません。つまり、一度に1つの画像しか圧縮できません。 それ以外は、無料で使いやすく、2つの圧縮オプションがあります。 圧縮後も画像の品質は変わらないため、テストでは不可逆オプションを使用します。

ImageOptim

ImageOptimは、多くの設定を備えたツールです。 3つの異なる品質オプションと3つの異なる色品質オプションから選択できます。 最高の圧縮/品質の結果はデフォルト設定であることがわかりました。 品質を中、色の品質を自動に設定します。 少し時代遅れのデザインの次に、 ImageOptimで私を最も悩ませたのはPNGをアップロードしてもJPEGをエクスポートするということでした。 Kornel（ImageOptimの作成者）にその問題についての電子メールを送信しましたが、彼はすでにそれを修正しています。

ImageSmaller

Compressorの場合と同様に、 ImageSmallerにも同じ欠陥があります。 一括アップロードのオプションはありません。 ただし、アップロード制限が最も大きいものの1つであり、50MBです。 最適化するファイルが大きい場合は、ImageSmallerが最適なツールになる可能性があります。

Kraken

Krakenはプレミアム画像圧縮ツールであり、私がテストしたすべてのツールの中で最高のダッシュボードを備えています。 画像をアップロードするための優れたWebインターフェイスと、最良の結果を得るためのさまざまな設定があります。 テストでは、デフォルトの不可逆設定を使用しました。

JPEG.io

JPEG.ioは、 Krakenと同じツールの無料バージョンです。 同じ圧縮機能がありますが、WebサイトのURLに示されているように、JPEG専用です。

PageSpeed Insights

ここでこれを見るとは思っていませんでしたよね？ PageSpeed Insightsは、サイトのテスト時に圧縮ファイルの.zipも提供します。 これは最もユーザーフレンドリーな方法ではありません。すべての画像を使用してWebサイトをオンラインにし、新しい圧縮画像に置き換える必要があるためですが、Googleが望むように画像を圧縮することができます。

最高のオンライン圧縮ツールの結果

以下に、すべてのテストの結果を含むグラフを示します。 詳細については、詳細なスプレッドシートを確認することもできます。

JPEG用の最高のオンライン圧縮ツール

ほとんどのツールは、テストJPEGを約80％圧縮しました。 child.jpg画像を見てみましょう。 最初は3.1MBのサイズの画像でしたが、サイズを変更して圧縮した後、画像のサイズはわずか165 KBでした。つまり、サイズが95％小さくなりました。 さて、それは違いです！ CompressorとImageOptimで同じ結果を得ることができました。 つまり、ここには2人の勝者がいるようです。

PNG用の最高のオンライン圧縮ツール

PNGテストでは、すべてのツールで平均50％縮小されたサイズが得られました。 ただし、 Optimizeillaは他の画像よりも少し優れており、 pt-logo.png画像のサイズが56％縮小されました。

全体的に最高のオンライン画像圧縮ツール

OptimizillaがJPEGに最適な圧縮ツールでなかったとしても、現在オンラインで利用できる最高の圧縮ツールとしてそれをお勧めします。 79％で圧縮されたJPEGは依然として優れており、ページのシンプルな品質設定でさらに高くすることができます。 また、PNGが含まれている場合でも、すべての画像がJPEGとしてエクスポートされるImageOptimよりも、 Compressorが欠落していて信頼性の高いアップロードである一括アップロードのオプションがあります。 これらすべての理由から、 Optimillaは最高のオンライン画像圧縮ツールの称号に値すると思います。

次に、WordPressプラグインがオンライン画像圧縮ツールに勝るかどうかを見てみましょう。

画像圧縮に最適なWordPressプラグイン

オンライン画像ツールとWordPressプラグインの違いは何ですか？ 画像圧縮にオンライン画像ツールを使用する場合でも、それらの画像をWordPressサイトにアップロードしてから使用する必要があります。 すべてを1か所にまとめたい場合は、画像圧縮用のWordPressプラグインが最適です。 ほとんどのプラグインには、アップロード時に画像を最適化するオプションもあるため、その設定をオンにして、追加の作業を忘れることができます。

プラグインごとに新しいWordPressサイトを作成し、毎回同じ4つの画像をアップロードしました。 プラグインが異なれば設定も異なるので、圧縮と画質の完璧なバランスを探していました。

次のプラグインをテストしました。

• WPスマッシュ（無料版）
• TinyPNGによるJPEG＆PNG画像の圧縮
• ShortPixel
• 想像する
• EWWWイメージオプティマイザー（無料版）

前に述べたように、テストする必要のある他のプラグインを知っている場合は、お知らせください。リストに追加します。 これらのプラグインについて詳しく知りたくない場合は、ここをクリックしてください–勝者を見せてください！

WPスマッシュ（無料版）

WP Smushは、私が知っている画像圧縮用の最も古いプラグインの1つです。 無料版を使用するために登録する必要がないため、他のすべてのプラグインに対して1つの優れた利点があります。 また、新しくアップロードされた画像を自動的に圧縮するオプションもあるため、プラグインを設定すると、プラグインを忘れることができ、バックグラウンドですべての作業が実行されます。 残念ながら、圧縮結果は無料バージョンで最悪の1つだったので、使用することはお勧めしません。 彼らは彼らのサイトで、プロバージョンの方がはるかに圧縮率が高いと述べているので、この記事の次のアップデートでもこれをテストします。

TinyPNGによるJPEG＆PNG画像の圧縮

TinyPNGオンライン圧縮ツールと同じように、WordPressプラグインも非常にシンプルです。 登録を完了すると、最小限の設定で、基本的に箱から出して動作します。 新しくアップロードされたすべての画像も自動的に圧縮できるため、プラグインをアクティブにして忘れることができます。

ShortPixel

ShortPixelは、個人的には最大の驚きの1つでした。 研究前に聞いたことがなく、本当に感動しました。 デフォルトの不可逆推奨設定では、WordPressプラグイン間で最高の圧縮結果が得られ、光沢のあるオプションもあります。 このオプションは、非常に高品質の写真を必要とし、品質の低下に妥協できない写真家やその他の専門家向けです。

想像する

Imagifyは、有名なWPRocketプラグインの作者の手によって作られたプラグインです。 登録後、いくつかの明確なオプションから選択できます。 最高の配給量の圧縮と画質を得るには、アグレッシブモードを選択してください。 設定の良い点の1つは、圧縮で問題が発生した場合に備えて、元の画像用に別のフォルダーを用意するオプションです。 私が完全に理解していなかった唯一のことは、圧縮結果を表示するために、なぜメディアのリストビューに切り替えなければならないのかということです。 それ以外は、Imagifyは本当に素晴らしくてしっかりしたプラグインです。

EWWWイメージオプティマイザー（無料版）

EWWW Image Optimizerが唯一のプラグインであり、いくつかのエラーが発生しました。 まず、自分のホスティングで試してみましたが、EWWW Image Optimizerにはexec（）またはAPIキーが必要であるというエラーが発生しました。 次回、ローカル開発のWordPressサイトでプラグインを試したところ、pngoutが見つからないというエラーが発生しました。 私はそれをインストールする方法の指示に従いました、そしてプラグインはついにテストの準備ができました。 無料版をテストしたので、ロスレスオプションしかなく、最良の結果は得られませんでした。 WP Smushの場合と同様に、次の記事の更新でEWWW Image Optimizer proバージョンもテストし、パフォーマンスが向上するかどうかを確認します。

画像圧縮に最適なWordPressプラグインの結果

前と同じように、以下のすべてのテストの結果を含むグラフが表示されます。 詳細については、詳細なスプレッドシートを確認することもできます。

JPEGを圧縮するための最高のWordPressプラグイン

ShortPixelが勝者で、平均84％の圧縮率でした。 最高のオンライン圧縮ツールのカテゴリのCompressorおよびImageOptimと同じです。 2番目に優れたプラグインはImagifyで、平均70％の圧縮率でした。 私は、 ShortPixelが現在そのカテゴリーの絶対的な勝者であることを宣言します。

PNGを圧縮するための最高のWordPressプラグイン

最高のPNG圧縮プラグインは、 TinyPNGによるCompress JPEG＆PNG imagesと呼ばれ、 56％の圧縮率です。 興味深いことに、最高の結果は、やはり、最高のオンライン圧縮ツールのカテゴリと同じです。 ただし、他のプラグインはここでもう少し競争力があり、約50％の圧縮率です。

全体的な画像圧縮に最適なWordPressプラグイン

私の意見では、ユーザーエクスペリエンス、さまざまな設定、圧縮の最適な比率は、 ShortPixelプラグインによるものでした。 全体として、これは非常に堅実なプラグインであり、多くのオプションがありますが、すでに優れたデフォルト設定もあります。 登録後すぐにプラグインの使用を開始できます。最も重要なのは、圧縮が優れていることです。 現時点では、特に画像の大部分がJPEGである場合は、自分のWebサイトにShortPixelプラグインを使用します。

結論

長い旅でしたよね？ その間、 child.jpg画像を最大95％圧縮することができました。 これらの3つの簡単な手順に従うだけで、Webサイトははるかに高速に動作します。 それらをもう一度繰り返しましょう：

• 正しい画像形式を選択してください
• アップロードする前に画像のサイズを変更する
• オンラインツールまたはWordPressプラグインを使用して画像を圧縮する

もう1つの重要なことは、画像ごとに1つのツールまたはWordPressプラグインのみを使用することです。これらのほとんどには不可逆圧縮があるため、圧縮を追加するたびに画像の品質が低下する可能性があります。したくない。 また、GitHubにすべてのテスト画像を追加して、それらの品質比較を確認したり、他のツールやプラグインを自分でテストしたりする場合もあります。

画像を圧縮しないという言い訳はもうありません。 それを行うには多くのツールとさまざまな方法があり、最終的にはそれだけの価値があることを証明しました。 オンライン圧縮またはWordPressプラグインの個人的な勝者を選択し、最適化の前後にWebサイトのGooglePageSpeedスコアを確認してください。 コメントセクションで、サイトの速度とスコアの向上に関する情報を共有してください。 また、この記事が画像の最適化に役立ったかどうか、そしてそれについてどう思いますか。