WordPressで画像を最適化する方法は？

公開: 2021-09-08

画像はウェブサイトの重要な部分です。それらは、ムードを作成したり、製品を披露したり、ページに視覚的な興味を追加したりするために使用できます。ただし、サイトに最適な画像がない場合もあります。

幸い、WordPressにはいくつかの機能が組み込まれているため、画像の読み込みが速くなり、品質を損なうことなくサイトのスペースを節約できます。

GTmetrix + PSIで最適化されていない画像を検索する

サイトで最適化が必要な画像を見つける最良の方法は、GTmetrixやPSIなどの無料のオンラインツールを使用することです。これらのツールはどちらも、Webサイトのファイルをクロールし、ロードを高速化するために最適化する必要があるものについて、わかりやすいレポートを提供します。

WordPressプラグインとサービスを使用して画像を最適化する

EWWW Image OptimizerなどのWordPress画像最適化プラグイン（有料と無料の両方）もかなりあります。これらのプラグインは、画像を圧縮してWebサイトにすばやくロードするのに非常に効果的です。

TinyPNGやKrakenImage Optimizerなど、品質にまったく影響を与えずに画像を圧縮するサービスもあります。

正しい画像サイズを使用する

アップロードする前に、WordPressエディターでブログの幅に合わせてグラフィック、ビデオ、その他のメディアのサイズを変更する必要があるのと同様に、画像ファイルのサイズも変更する必要があります。これを行うことで、どの画像も必要以上のスペースを占有しないようになります。

画像をキャッシュする

画像を最適化するもう1つの方法は、画像をキャッシュすることです。これにより、複数のユーザーが同時にサイトにアクセスしている場合でも、サイトの読み込みが速くなります。キャッシュされた画像を含むページにアクセスした訪問者は、ファイルがダウンロードされるのを待ってから何かを見る必要がないためです。

WP Smushプラグインは、インストールしてアクティブ化すると、実際には自動的にこれを実行します（そして、これらの両方を確実に実行する必要があります！）。 AutoptimizeやWpSuper Cacheなどのプラグインを使用することもできます。これらのプラグインは、コードをキャッシュするだけでなく縮小します。

LazyLoadを使用してオフスクリーン画像を延期する

LazyLoadは、WordPressの新しくてあまり知られていない機能であり、ユーザーがサイト上の自分の位置にスクロールするまで、画像の読み込みを延期できます。その場合、これらの画像は、ページが最初にフェッチされたときに読み込まれなかったため、すばやく読み込まれます。

画像圧縮を使用する

LZWまたはJPEGの2種類の画像圧縮を使用できます。それらの違いは、他の何よりもどのタイプのグラフィックファイルに入るかに関係しているので、状況に合ったものを選択してください。

これがどのように機能するかは、画像で使用される色の数を減らすことです。つまり、ブラウジング中にサーバー側からクライアント側に転送する必要のあるデータが少なくなります。これにより、帯域幅の使用量とロード時間が削減されます。

画像圧縮はどのサイトでも不可欠な部分であり、WordPressには、パフォーマンスを損なうことなく高品質の画像を使用してサイトを簡単に作成できるようにする圧縮プラグインが多数あります。

次世代フォーマットで画像を提供する

世の中にはさまざまな画像形式があり、それらすべてがサイトでうまく機能するとは限らないことを理解することが重要です。 Webサイトのパフォーマンスを向上させたい場合は、WebPやJPEG XRなどの次世代フォーマットを使用する必要があります。これらのフォーマットは通常、他のタイプよりも圧縮率が高くなっています。

画像サイズを指定する

画像のサイズを指定することで、サイトに画像を配置するときに使用するスペースをWordPressに指示します。これは帯域幅への負担を軽減するため重要です。つまり、ページの読み込み時間が短縮されます。

CDNから画像を提供する

CDNは、地理的に近いサーバーからWebサイトの画像を提供するための高速で効率的な方法です。これにより待ち時間が短縮され、ユーザーの読み込み時間が短縮されます。

CSSスプライトを使用して画像を組み合わせる

CSSスプライトは、実際にはすべての小さな画像を1つの大きなファイルに結合する画像の一種です。これは、ファイルのリクエスト数を減らすので便利です。これは、特にモバイルデバイスでの読み込み時間が短縮されることを意味します。 CSSスプライトジェネレーターを使用して作成し、CSSを使用してテーマに追加できます。

モバイル向けのアダプティブ画像を使用する

アダプティブイメージは、さまざまなデバイスのユーザーにさまざまなイメージサイズを提供するための優れた方法です。これにより、帯域幅の使用量と読み込み時間が短縮されます。 WordPressプラグインを使用してこれを行うことができますが、自分で無料で行う方法は他にもたくさんあります。

画像のホットリンクを無効にする

画像をホットリンクする場合、基本的には、他の人のサーバー上の元のファイルにリンクします。これを無効にすると、他の人があなたの帯域幅を盗むのを防ぐことができるので、それはあなたがやりたいことです。

これは、WPRocketなどの多くのWordPressプラグインで実行できます。通常、ホストにこれを行うように依頼することもできます（優れたホストを使用している場合）。

EXIFデータを削除する

EXIFデータは、WordPressエディターでは表示できない非表示の情報ですが、他のユーザーには表示される可能性があります。カメラのメーカーやモデル、日付と時刻の設定などの情報が含まれています。これを削除すると、帯域幅の使用量が減ります。

このプロセスには、JPEGsnoopやjheadなどの画像スクラバーツールを使用することが含まれます。これにより、最初に画像をダウンロードしなくても、サイト上の画像からすべてのEXIFデータを削除できます。

低速接続のユーザーに低品質の画像を提供する

これは画像でできることですが、すべてのテーマにこれを非表示にするオプションがあるわけではありません。基本的に、それが行うことは、低速接続（モバイルまたはその他）の人々に低品質の画像を提供することです。 Optimoleプラグインを使用してこれを行うことができます。

最適化された画像を使用することが重要なのはなぜですか？

画像はサイトのパフォーマンスの大きな部分を占める可能性があるため、画像を最適化することが重要です。これにより、画像が可能な限り迅速かつ効率的に読み込まれるようになります。

ウェブサイトの読み込みが速いほど、ユーザーと検索エンジンの両方にとって優れています。最近、Googleのランキングで読み込み時間が重視されていますが（わずかですが）、これが当てはまらない場合でも、すべてができるだけ速く読み込まれていることを確認する必要があります。

人々はサイト、特にモバイルユーザーで待つことを嫌います。これにより、画像の最適化はWordPressサイトの重要な部分になります。また、Googleは高速読み込みのWebサイトも気に入っているため、SEOにも役立ちます（正当な理由があります）。

結論

結論として、画像はどのWebサイトでも重要な部分です。それらは、ムードを作成したり、製品を披露したり、ページに視覚的な興味を追加したりするために使用できます。

ただし、元の画像が十分に最適化されておらず、必要以上のスペースを占める場合があります。 WordPressには、これらのファイルを最適化するための多くの機能があり、品質を損なうことなくファイルの読み込みが速くなります。最善の方法は、LazyLoadやPSIなどの画像圧縮プラグインをインストールすることです。このプラグインは、必要に応じて画像を自動的に圧縮およびサイズ変更します。また、画像のサイズを指定したり、CSSスプライトを使用したり、画像のキャッシュを使用したりして、画像を最適化することもできます。