WordPressでスケールされた画像を簡単に提供する方法（ステップバイステップ）

サイトを訪れて数秒で離れたことがありますか？画像の読み込みが遅すぎるからです。WordPressサイトで画像をスケールして提供していない場合、訪問者はまさにそのような体験をしているでしょう。. 

画像が表示サイズに対して大きすぎるとこの問題が発生し、サイトの読み込みが遅くなり、ユーザー体験に悪影響を与えます。.

でも心配しないでください、私たちがサポートします！以下の簡単なチュートリアルに従って、スケールされた画像を簡単に提供する方法を学びましょう！

なぜスケールされた画像を提供しなければならないのですか？

スケールされた画像とは、ウェブページ上で表示される正確なサイズに合わせてリサイズされた画像のことです。これは、通常ははるかに大きなサイズと解像度を持つ元のアップロードとは異なります。.

例えば、元の注目画像は4000×3000ピクセルかもしれませんが、ウェブサイトでは800×600ピクセルで表示されます。縮小版ではなく元の画像を使用すると、サイトの読み込みが遅くなります。.

画像が適切にスケールされていない場合、ブラウザはリアルタイムで手動でサイズ変更しなければなりません。これによりページの読み込みが遅くなり、ユーザーは待たされ、直帰率が上がる可能性があります。.

スケールされた画像を使用することは重要です。そうしないと、いくつかの問題が発生する可能性があります：

• 不要な読み込み時間、ユーザーは必要以上に大きなファイルをダウンロードしなければならないため。
• ピクセル化した画像またはぼやけた画像、画像が小さすぎて引き伸ばされる場合。
• 処理時間の増加、ブラウザが画像をリアルタイムでリサイズしなければならず、コンテンツ表示が遅れる原因となります。

ステップバイステップガイド

1. 画像編集ツールを使用する

この方法は、編集ツールを使用することで、より高速な画像リサイズを提供します。Adobe Photoshop のようなツールを使用して、適切にスケールされた画像を作成できます。Photoshop は幅広いカスタマイズが可能で、サイズ要件に基づいてピクセル寸法を決定できます。.

無料の代替手段を探している場合、PhotoPea のようなオンラインツールが良い選択肢です。ただし、このチュートリアルでは、包括的な機能があるため Photoshop に焦点を当てます。.

アップロード前に画像をリサイズするには、以下のチュートリアルに従ってください：

• 画像を開く Photoshop。
• クリック画像タブを選択し画像サイズ。

• 表示されるダイアログボックスで、ウェブページの表示要件に従って画像サイズを変更します。. 

例えば、元の画像が1281 x 493 ピクセルで、3600 x 2400 ピクセルに拡大したい場合は、新しい寸法を入力してください。. 

• 変更解像度をウェブ用に72 PPI、または高品質印刷が必要な場合は300 PPIに設定します。
• 次に、リサンプリング方法を選択してください。ウェブ最適化に最も適した2つのオプションは次のとおりです：

• クリック OK をクリックして変更を適用します。画像がリサイズされました。
• 画像を保存するには、ファイル タブを開き、エクスポート。

• クリックエクスポート形式任意のファイル形式を選択し、設定を調整して、画像品質を大幅に損なうことなく、可能な限り小さいファイルサイズを実現します。

2. WordPress の組み込み画像サイズを活用する

サードパーティ製ソフトウェアをインストールしたくない場合は、WordPress に組み込まれている画像エディタを使用できます。このツールを使って、トリミング、フリップ、リサイズなどの基本的な画像編集作業を行うことができます。.

投稿またはメディアライブラリ内の任意の画像をクリックすることでこの機能にアクセスできます。また、テーマの functions.php ファイルを変更することでカスタム画像サイズを定義できます。.

シンプルに保つために、let's 以下の基本ガイドから始めましょう：

• 画像を WordPress の投稿にアップロードしてください。. 

• 画像を選択し、次にクリック 置換、そして選択 メディアライブラリを開く メニューから。

• サイドバーで、クリック 画像を編集。

• 画像エディタに移動します。クリックしてください Scale 画像のサイズを変更する

• 入力してください 新しい寸法 画像のために。例として、次のように変更します 1198 × 744 px から 805 x 500 px。アスペクト比は固定されているため、入力した幅または高さに基づいてもう一方の値が自動的に調整されます。

• クリックしてください スケール 変更を適用するボタン。
• 画像は現在拡大され、投稿で使用できるようになりました。.

3. プラグインを活用する

• WordPressサイトに WP Meta SEO をインストールして有効化してください。.

• WordPressダッシュボードから、 WP Meta SEO > 画像エディタへ移動します。.

• 画像SEO & HTMLリサイズ設定を開きます。.

• 動的画像リサイズオプションを有効にして、 WP Meta SEO が表示サイズに基づいて画像を自動的にリサイズできるようにします。.

• フロントエンドで画像がどのようにリサイズされるかを制御するために、最大幅と高さの値を定義します。.

有効化すると、 WP Meta SEO はサイト上に画像が表示される際に自動的に画像サイズを調整し、手動での介入なしに最適な画像サイズを確保します。このアプローチはページ速度を向上させ、SEO パフォーマンスを強化し、より良いユーザー体験を提供します—特に画像が多いウェブサイト向けです。. 

詳細については、公式ドキュメントと機能概要をご覧ください：

• WP Meta SEO 画像 SEO & HTML リサイズ機能
• ダイナミック 画像リサイズのドキュメント

4. srcset 属性を使用してレスポンシブ画像を実装する

この srcset属性は、HTMLのタグで使用され、さまざまな画面解像度に対応する異なる画像ソースを提供します。この属性を追加することで、ブラウザはユーザーのデバイスに基づいて最も適切な画像を選択できます。

例えば、ユーザーが低解像度ディスプレイのモバイルデバイスでウェブサイトにアクセスした場合、ブラウザはよりスムーズな体験を提供するために低解像度の画像を読み込みます。.

スケールされた画像を手動で提供する方法を知りたい場合は、以下の手順に従ってください：

• コードエディタでウェブサイト'の HTML ファイルを開く。.
• 最適化したい画像の タグを見つけてください。

• タグを編集し、図のように srcset 属性を追加してください。. 

この例では、100w と 400w は各画像の実際の幅を示しています。ブラウザはこの情報を使用して、ユーザー'のデバイスにロードする画像を決定します。.

• 変更を保存し、結果を見るためにウェブサイトをリロードしてください。.

スケールされていない画像の識別方法

画像の最適化方法を学んだ後、どの画像がまだサイズ変更が必要で、どの画像がすでに最適化されているかを特定することも重要です。.

スケールされていない画像を確認する一般的な方法は2つあります。ツールを使用するか、定期的なサイト監査を実施するかです。以下のチュートリアルに従ってください：

1. Google PageSpeed Insights の使用

これは、ウェブサイトを高速化するための提案を提供する必須ツールです。これらの提案は、Google Lighthouse を使用した詳細な分析に基づいて生成されます。一般的な提案の一つは、未スケールとしてフラグ付けされた画像を適切に拡大縮小することです。.

簡単なチェックを行うには、以下の手順に従ってください：

• Google PageSpeed Insight を開く https://pagespeed.web.dev.

• 完全な ウェブページの URL を入力フィールドに貼り付けてください。
• クリック 分析してプロセスを開始してください。
• 完了するまで待ってください。PSI はその後、パフォーマンスレポートを提供します。.
• スクロールダウンして、ラベル付けされたエントリを見つけます 画像を適切なサイズにする。
• 存在する場合、サイト上で見つかったスケールされていない画像のリストが表示されます。.

画像の一つがスケールされていないとフラグ付けされた場合、Google PageSpeed Insights はいくつかの提案を提供することがあります。その中には次が含まれます：

• 次世代フォーマットで画像を提供する、たとえば WebP、AVIF、JPEG XR、または JPEG2000。
• 画像を適切にリサイズして、さまざまなサイズ要件を満たすようにします。たとえば、商品詳細ページでは1000 x 1000ピクセル、商品一覧ページでは400 x 400ピクセルにリサイズします。.
• lazy loadingを使用することで、ユーザーの画面に表示されている画像だけがすぐに読み込まれます。.

2. 定期的なサイト監査の実施

定期的なサイト監査を実施することで、サイトの健全性とパフォーマンスに関する深い洞察が得られます。.

監査を行う際は、潜在的な問題を発見するために、サイト構造とユーザーエクスペリエンスのレビューを優先してください。.

このプロセスは画像最適化の機会も明らかにすることがあります。モバイル、タブレット、デスクトップなど、さまざまなデバイスでサイトをテストし、一貫した体験を確保してください。.

また、画像が適切にスケーリングされているかに注意してください。もし適切でない場合は、上記のチュートリアルを忘れずに参照してください。.

結論

スケーリングされた画像を使用することは、特にモバイルデバイスでサイトのパフォーマンスを最適化するために不可欠です。ページの読み込みが速くなり、直帰率を低減します。.

しかし、大量の画像をスケーリングすることは時間がかかります。次のようなプラグインの使用を検討してください WP Media Folder、自動的にサイズ変更、整理、置換を行い、パフォーマンスが最適化された状態を保ちます。