画像 最適化

Imagify は、標準、アグレッシブ、ウルトラの 3 つの最適化レベルを提供します。これらのレベルは基本的に画質に関係します。画像の最適化によるトレードオフの 1 つは、画質が低下することです。これはごく小さいもので、通常は気付かないほどですが、超高画質を重視する場合は目立つ場合があります。これは、写真、アート、ジュエリーのサイトなどの Web サイトによく当てはまります。

それはできますか 劣化する 画像 多いですか？

その多くは、使用する画像の種類によって異なります。たとえば、標準品質では画質はまったく劣化しませんが、ウルトラでは多少ピクセル化されますが、過度には劣化しません。このウェブサイトは例として超品質に設定されています。利点は、ウルトラでは画像がはるかに小さいため、アグレッシブな設定よりも読み込みが高速になることです。

すぐにウルトラ設定を選択して違いを実感する人もいます。最適化を始めると、 オリジナルを保持するには、必ずボックスにチェックを入れてください。そうすることで、ウルトラ設定が気に入らない場合は、より高い品質に戻すことができます。

一般に、積極的な設定では、画像の品質が約 15% 低下し、85% レベルになります。これは人間の目には知覚できず、最も一般的な設定です。画質が重要ではない場合、または写真ではなく漫画スタイルのグラフィックを使用している場合は、ウルトラを選択してください。それはまだ完全に受け入れられます。通常、ウルトラ設定では、画像サイズが約 85% 削減されます。これは、1 MB の画像のサイズが 100 ～ 150 ポンドの間に減り、ページの読み込み時間とページ速度のスコアに大きな違いが生じることを意味します。

できますか 全部やる 私の画像を一度だけオンにしますか?

はい、できます。Imagify の仕組みについてはビデオをご覧ください。一番のヒントは、最適化にテーマ フォルダーも含めることです。テーマには多くの画像が含まれており、その一部は Web サイトで使用されます。テーマ画像を組み込むことで、Web サイト上で最適化できる画像を最大限に活用することができます。

最適化する必要がある画像の数を判断するには、メディア ライブラリを調べてください。画像が何枚あるかが表示されます。次に、これを 4 倍します (平均)。これは、WordPress がレスポンシブ デザイン (サムネイル、300 x 300 ピクセルなど) 用に複数のバージョンの画像を作成するためです。すべてのデバイスでイメージ最適化のメリットを最大限に活用するには、すべてのイメージのすべてのバージョンを最適化する必要があります。

手動による画像の最適化は、まさに純粋主義者向けです。この利点の 1 つは、完全に最適化された画像を正しいサイズでアップロードできるため、画像最適化ソフトウェアをまったく実行する必要がないことです。また、フルサイズの画像が存在しないため、サーバーのスペースも節約できます。ただし、これには非常に時間がかかるため、ほとんどの人には Imagify を使用することをお勧めします。

私は持っている 時間 – 何が関係しているのですか？

まず、使用している画像のサイズを知る必要があります。これについては良いガイドがあります 画像サイズとベストプラクティス このページで。画像のサイズがわかったら、画像ソフトウェア ツールを使用して、大きな画像を正確なサイズにトリミングできます。 ペイントネット は無料であり、通常はこれで十分です。

正しいサイズで画像を作成したら、オンライン ツールを使用して画像を最適化できます。何年にもわたって存在する最高のものの1つは、 TinyPNG.com。画像をアップロードして、作成されるはるかに小さいバージョンをダウンロードするだけです。これらの画像を WordPress にアップロードするときの 2 つのヒント:

まず、ばかげているように思えますが、新しく最適化されたバージョンを「ダウンロード」フォルダーから Web サイトに必ずアップロードしてください。デスクトップや画像を保存している場所から、間違った画像をアップロードするのは非常に簡単です。次に、新しい画像のタイトルに少し異なる名前を使用します。これはキャッシングが原因です。同じファイル名で画像をアップロードすると、WordPress インストールで新しい画像サイズがしばらく認識されない可能性があります。

これを完了したら、さらに一歩進んで、新しく最適化された画像を WEBP 形式に変換できます。アップロードする前にこれを行ってください。に行きます クラウド変換 Webサイト。 TinyPNG とまったく同じプロセスに従いますが、WEBP への変換を選択する点が異なります。次に、ファイルをダウンロードしてサーバーにアップロードします。

Imagify などのソフトウェアを使用する方がはるかに簡単ですが、最終的には生の最適化された画像がアップロードされるため、画像変換ツールを使用したり、WEBP 変換を常に実行したりする必要はありません。

WEBP は、Google によって開発された新しい画像形式です。その画像は従来の JPG や PNG 形式よりもはるかに小さいため、サーバーが従来の画像から WEBP への変換をサポートしている場合には、これらを使用する必要があります。

WEBP は実際には 2010 年に誕生しましたが、それにもかかわらず、依然として「新興」フォーマットとみなされています。 WEBP 形式だけでなく、フォールバックとして元の JPG / PNG 画像も必要であると書かれているかもしれませんが、実際には、Chrome、Firefox、Safari およびその他すべての主要なブラウザーがそれをサポートしているため、現在は WEBP バージョンのみで問題ありません。

私のサーバーは動作しますか サポート 彼ら？

Imagify には、サーバー上で有効にするための自動設定があります。 WEBP に変換する画像オプティマイザーのほとんどはこれを行います。サーバーが WEBP 画像を提供していないかどうかを確認し、通知します。基本的に必要なことは、WordPress が動作するために 2 つの方法のいずれかで画像ファイルを書き換える必要があるということです。一部のサーバーでは許可されていますが、一部のサーバーでは許可されていません。

最良の方法は、画像タグを使用することです。これは、 一部に鬼ごっこ。これは非常に単純ですが、すべてのサーバーがサポートしているわけではありません。 2 番目の方法は、.htaccess ファイルを介してファイルを書き換える方法です。これは、ページロード時にサーバーリクエストが増えるため、推奨される方法ではありません。ただし、この方法で実行する必要がある場合は、WEBP を使用する方が有益です。

Kinta は NGINX であり、互換性のないサーバー設定がある場合に備えて、すでに WEBP 用に設定されています。

Imagify は、非常に高速な自動プロセスです。所要時間は実際に使用している画像のサイズによって異なります。 1MB 未満の通常の画像の最適化には数秒かかります。

すべてのレスポンシブ サイズが最適化されるように、メディア ライブラリに表示される画像の量を 4 倍にすることを忘れないでください。たとえば、100 枚の画像があるとすると、400 枚が最適化されます。これにそれぞれ平均 5 秒を掛けると、そのアイデアがわかります。完了するまでに 30 分強かかります。

画像が大きいほど時間がかかる場合があり、ショップが完了するまでに非常に長い時間がかかる場合があります。たとえば、メディア ライブラリ画像が 10,000 個ある場合、40,000 個のレスポンシブ画像を最適化する必要があります。これに 5 秒ずつ掛けると、画像の最適化に 2 ～ 3 日かかることになります。

ただし、平均的な Web サイトにはこれに近い量の画像は含まれていないため、このプロセスは 1 時間ほどで完了するはずです。

これですべてのイメージが完成しました。もう一度すべてのキャッシュをクリアし、ページ速度テストを実行します。特にモバイルデバイス上で、Web サイトの読み込みが大幅に速くなっていることがわかります。

画像に満足したら、次の段階に進みます。最適化プロセスの次の部分は WP-Rocket キャッシュ セクションで、スコアがさらに向上します。