WordPressで画像を適切にサイズ設定する方法(PageSpeed Insights+GTmetrix項目)

PageSpeed InsightsまたはGTmetrixを使用してサイトを実行した場合、画像を適切にサイズ設定する推奨事項が表示されることがあります。

WordPressで画像のサイズを適切に設定するには、PageSpeed Insightsの項目を展開し、どの画像が大きすぎるかを確認します。 それらのサイズを正しいサイズに変更します(GTmetrix legacyレポートにあります)。 最後に、古い画像を新しい画像に置き換えます。 あなたのサイトを再テストし、それは100%でなければなりません。

適切なサイズの画像

PageSpeed Insightsには、テストしている単一のページの最適化されていない画像のみが表示されるため、ウェブサイト全体に表示されるサイト全体の画像(ロゴ、サイドバー、フッターの画像)のサイズを変更することから始めます。 次に、PageSpeed Insightsを介して他のページを実行し、それらの画像のサイズを変更します。

プラグインを使用して画像のサイズを自動的に変更できますか?
ありそうもない。 ほとんどの画像最適化プラグインでは、最大幅+高さを設定できます。 しかし、サイトのさまざまな領域では、特定の寸法が必要です(画像はそれに応じてサイズを変更する必要があります)。

画像寸法チートシートを作成します。
適切にサイズの画像のエラーを回避するための最良の方法は、あなたのウェブサイト(スライダー、ウィジェット、ロゴ、全幅のブログ画像など)の異なる領域の 次に、各領域の寸法を含む画像寸法チートシートを作成します。 アップロードする前に画像のサイズを変更したり、画像のサイズを変更したりする場合は、適切なサイズの画像エラーがないようにしてください。

GTmetrixレガシーレポートで特大の画像を検索

GTmetrixレガシーレポートでは、大きな画像の正しい寸法が表示されます。

無料のGTmetrixアカウントを作成し、Accounts>Default to Legacy Reports>enableに移動します。

GTmetrixを介してページを実行し、”スケーリングされた画像を提供する”セクションを表示します。 それらの推奨事項を展開すると、これらの画像のサイズを変更する必要があります正しい寸法が表示されます。

スケーリングされた画像を提供GTmetrix

画像が大きすぎるかどうかを手動で確認することもできます。 画像を右クリック>画像アドレスをコピーします。

画像アドレスをコピー

次に、画像のURLを新しいブラウザタブに貼り付けます。 あなたのウェブサイトに表示されている画像をあなたの画像のURLと比較すると、そのサイズに顕著な違いがあることがわかります。 これは、画像を拡大縮小する必要があることを意味します。 画像の2つのバリエーションを並べて比較することで、画像の実際の大きさ(およびページの読み込みが遅い理由)を確認できます。

スケーリングされた画像とスケーリングされていない画像

画像のサイズを変更して寸法を修正

古い画像をダウンロードし、選択した画像編集ツールgim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gim gimp GTmetrixが推奨する寸法に画像のサイズを変更および/またはトリミングします。 いくつかの画像編集ツールを使用すると、画像を圧縮してEXIFデータを削除して、画像の読み込みをさらに高速にします。

画像のスケーリングGIMP

WordPressで直接画像をトリミングしたり、サイズを変更したりすることもできます:

WordPress Media Editorでの画像の拡大縮小

古い画像を新しい画像に置き換えます

新しい画像をWordPressにアップロードし、古い画像を新しい画像に置き換えます。

スケーリングされたウィジェット画像

GTmetrixでページを再テスト

GTmetrix(またはPageSpeed Insights)でページを再テストし、エラーを修正する必要があります。

スケーリングされた画像を提供WordPress

モバイル上の適切なサイズの画像

モバイル上の適切なサイズの画像は異なります。

プレミアムGTmetrixアカウントにサインアップすると、Android上でモバイル速度をテストすることができます。 あなたのサイトが適応画像を使用していない場合、より多くのスケーリングされた画像エラーを提供することができますチャンスは、自動的にモバイルデバ

ステップ1:GTmetrixのAndroidテストを介してサイトを実行する:

GTmetrixモバイルテスト

モバイルでスケーリングされた画像を提供する

ステップ2:GTmetrixが提供するモバイル背景寸法を見つける:

背景の最大幅

ステップ3:Adaptive Imagesプラグインをインストールします(ShortPixelまたはAdaptive Imagesをお勧めします)。

ShortPixel Adaptive Images

ステップ4:背景の最大幅としてGTmetrixによって提供される寸法を設定します。

背景の最大幅

ステップ5:エラーがないことを確認するためにGTmetrixのモバイルテストを介してサイトを再実行します。

GTmetrix Mobile Test

ステップ5:adaptive imagesプラグインで他の設定を構成します(ShortPixelにはWebPサポート、遅延読み込み画像、スマートクロップ、EXIFデータの削除が含まれます)。 これらはあまりにも助けることができます。

複数ページの画像のサイズ変更

複数のページ/投稿で同じ画像を使用し、修正する必要がある場合は、画像のサイズを変更し、HTMLをコピーしてから、より良い検索置換

ステップ1:Better Search Replaceプラグインをインストールします。ステップ2:古い画像のHTMLをコピーし、Better Search Replaceプラグインの「Search For」フィールドに貼り付けます。 WordPressのテキストエディターを使用して、画像のHTMLを表示できます。 メモ: Better Search Replaceは、プラグインに入力した正確なHTMLが含まれている場合にのみ画像を置き換えます。

画像を置換するより良い検索

ステップ3:新しい画像のHTMLをコピーし、”置換”フィールドに貼り付けます。

スケーリングされた画像HTMLを提供

ステップ4:テーブルを選択します(例。 投稿)スキャンしたい場合は、”ドライスキャンとして実行”のチェックを外します。”

ステップ5:”検索/置換”をクリックすると、プラグインは古い画像を新しい画像に置き換えます。

画像の寸法を作成するチートシート

先に述べたように、アップロードする前に画像のサイズを変更できるように、ウェブサイトのすべての領域の寸法を測定する必要があります。 あなたはGTmetrixでこれらの寸法を見つけることができます(あなたが適切にサイズの画像エラーを持っている場合にのみ)、またはあなたはまた、あなたのテー

:

  • スライダー画像:1900(w)x400(h)
  • カルーセル画像:115(w)
  • ウィジェット画像:414(w)
  • 全幅ブログ記事画像:680(w)
  • 注目の画像: 250(w)x250(h)
  • YoastフェイスブックOG画像:1200(w)x628(h)–ステップ11
  • Yoast Twitter Og画像1024(w)x512(h)–ステップfacebook Og画像:1200(w)x628(h)-ステップ11
  • Yoast Twitter Og画像:1024(w)x512(h)-ステップ11

680 ピクセル幅の長方形

私のブログの幅は680pxなので、この投稿のすべての画像は680pxにサイズ変更されています。

画像を適切にサイズ変更するWordPressプラグイン

ほとんどの画像最適化プラグインには画像のサイズを変更するオプションがありますが、GTmetrixのエラーを修正しようとすると、ウェブサイトのさまざまな領域が異なる寸法を要求しているため、これはあまり効果的ではありません。 それはあなたのイメージが絶対に巨大ではないことを確認するためのより多くのです。 Imagifyプラグインが言うように、最大幅は最大のサムネイルよりも小さくすべきではありません。

Smush

画像のサイズを変更Smush

Imagify

画像のサイズを変更Imagify

EWW Image Optimizer

画像のサイズを変更EWWW

画像を最適化する他の方法

私はWordpressで画像を最適化するための完全なチュートリアルを書きました:

  • 画像の圧縮
  • CDNから画像を提供する
  • GIFのサイズ変更
  • EXIFデータの削除
  • 画像+動画の遅延読み込み
  • Cloudflare Mirage、Polish、Hotlink Protection

GTmetrix画像の最適化

より多くの速度のチュートリアルをお探しですか?
ここに私が書いた他のチュートリアルがあります:

  • WordPressのスピードガイド(このガイドは永遠にかかりました)
  • WP Rocketを設定する方法(私がお勧めするキャッシュプラグイン)

私はまた、WordPressの速度の最適化に素晴らしいビデオを持っています:

よくある質問

画像のサイズを正しく修正するにはどうすればよいですか?

画像をダウンロードし、GTmetrix legacy reportsが提供する寸法を修正するようにサイズを変更し、古い画像を新しい画像に置き換えます。

プラグインを使用して画像のサイズを適切に設定できますか?

いいえ、あなたのウェブサイトの異なるセクションでは、異なる画像の寸法を求めています。 あなたはそれらのユニークな寸法に合わせて画像を拡大縮小する必要があります。

どの画像を最初にサイズ変更する必要がありますか?

まず、ロゴ、サイドバー、フッターの画像など、複数のページに表示される画像をスケーリングします。

画像の正しい寸法はどこにありますか?

GTmetrixレガシーレポートでは、PageSpeedタブで項目を展開すると、各画像の正しいサイズが示されます。

コメントを残す

メールアドレスが公開されることはありません。