画像要素で明示的な幅と高さを使用する方法

画像などのビジュアルは、Web サイトのコンテンツをより魅力的にすることができます。 ただし、その寸法が適切に構成されていない場合は、良いことよりも害を及ぼす可能性があります。 画像要素で明示的な幅と高さを使用する方法を学ぶことは、サイトのパフォーマンスと美観を維持するために不可欠です。

まず、PageSpeed Insights などのオンライン ツールを使用すると、寸法が欠落している画像を特定できます。 その後、これらの属性を手動で追加するか、プラグインを使用してプロセスを簡素化できます。

画像要素に幅と高さを明示的に追加する必要がある理由

サイトに追加されるすべての画像には、幅と高さが定義されている必要があります。 これらの属性が欠落している場合、ブラウザは関連するページを読み込むときに、各画像を表示するために必要なスペースを「推測」する必要があります。

その結果、ブラウザが画像のサイズ変更とレンダリングを完了するまで、さまざまな要素がページ上に押し込まれる可能性があります。 こうしたレイアウトの変更により、サイトの見た目がプロフェッショナルらしくなくなり、ユーザー エクスペリエンスにも悪影響を及ぼす可能性があります。

たとえば、要素がページ上で動き回っている場合、ユーザーが誤って間違った要素をクリックしてしまう可能性があります。 これにより、訪問者が Web サイトをナビゲートして、探しているものをすぐに見つけることが難しくなります。

さらに、Cumulative Layout Shift (CLS) は、Google の Core Web Vitals の重要な指標の 1 つです。 ページの読み込み時のコンテンツの動きを測定します。 CLS スコアが高い場合は、ユーザーがサイトにアクセスしたときにレイアウトの変更が多く発生し、ページのランキングに悪影響を与える可能性があることを示します。

この問題を解決するには、画像要素で明示的な幅と高さを使用する必要があります。 これは、ブラウザがメディア ファイルに割り当てる必要がある正確なスペースの量を判断するのに役立ちます。

この簡単な方法は、レイアウトの変更を減らすだけでなく、「メインスレッドの作業」を最小限に抑えるのにも役立ちます。 この用語は、ページを読み込むときにブラウザが実行する必要があるタスクを指します。 ブラウザーが画像のサイズを把握する必要がある場合、その作業負荷が増加し、読み込み時間が遅くなります。

したがって、画像のサイズを定義することで、ブラウザーの推測 (および追加のタスク) が排除されます。 これにより、コンテンツの読み込みがより速く、より効率的になり、よりスムーズなユーザー エクスペリエンスが実現します。

WordPress で画像の幅と高さを明示的に使用する方法

次に、WordPress の画像要素で明示的な幅と高さを使用する方法を見てみましょう。 次の 2 つの手順では、不足している寸法を画像に追加する方法を説明します。

ステップ 1: 寸法が欠落している画像を特定する

まず、サイト上のどの画像にサイズが欠けているかを確認する必要があります。 通常、WordPress メディア ライブラリまたはブロック エディター経由でアップロードしたすべての画像には、幅と高さの属性が自動的に割り当てられます。

ただし、コードまたはページビルダーを使用して画像を追加した場合、画像の寸法が欠落している可能性があります。 サイトを別のプラットフォーム (Wix など) から WordPress に移行するときにも、この問題が発生する可能性があります。

幸いなことに、これらの画像を識別するのは非常に簡単です。 最初のステップは、PageSpeed Insights を使用してパフォーマンス テストを実行することです。

サイトの URL を入力し、 「分析」をクリックします。 サイトの Core Web Vitals に関するレポートが得られます。これには、累積的なレイアウト シフトのスコアが含まれます。

理想的には、各エリアで緑色のスコアを目指すことをお勧めします。 ただし、たとえ良好な CLS スコアが得られたとしても、いくつかの場所で画像要素に明示的な幅と高さを使用する必要がある場合があります。

これに該当するかどうかを確認するには、監査まで下にスクロールし、 [CLS]タブを選択します。 このセクションでは、ページ上にサイズが不足している画像があるかどうかを示します。

[画像要素には明示的な幅と高さがありません]をクリックすると、どの特定の画像を修正する必要があるかも表示されます。

添付の URL をクリックすると、各画像を詳しく見ることができます。

ステップ 2: 画像の寸法を手動またはプラグインを使用して追加する

次に、画像要素で明示的な幅と高さを使用する 2 つの方法を見てみましょう。 コードを使用してサイト (またはその一部) を構築している場合は、これを手動で行うことができます。

まず、値が欠落している画像を含むサイトのページまたはセクションに移動します。 次に、画像を見つけて、その幅と高さの属性を指定します。

たとえば、画像ファイルの HMTL コードは次のようになります。

<img src="https://themeisle.com/blog/use-explicit-width-and-height-on-image-elements/chocolatecake.jpg" width="640" height="360" alt="Chocolate Cake.">

寸法が欠落している画像が複数ある場合、または単にプロセスを高速化してエラーを回避したい場合は、時間を節約するために WP Rocket などの最適化プラグインを使用するとよいでしょう。 このツールはすべての作業を行ってくれます。

サイトにプラグインをインストールして有効化したら、 [設定] > [WP Rocket]に移動し、[メディア]タブを選択します。

次に、ページを下にスクロールして、不足している画像の寸法を追加するチェックボックスをオンにします。

最後に、 「変更を保存」をクリックします。 WP Rocket はサイトの HTML をスキャンして、 widthとheight属性が欠落している画像を見つけます。 次に、PHP 関数getimagesizeを使用して画像サイズを取得し、それらの値を使用して属性を追加します。

WordPress に画像を追加するためのその他のベストプラクティス

WordPress 画像を最適化する方法は他にもたくさんあることは注目に値します。 たとえば、サイトのパフォーマンスをさらに向上させるために、画像のサイズ変更を開始することもできます。

もちろん、WordPress にアップロードするすべての画像のサイズを変更したり圧縮したりするには、多大な労力がかかります。 幸いなことに、このタスクを処理してくれるプラグインが数多くあります。

たとえば、Optimole では、画像をアップロードするとすぐに画像を拡大縮小できます。 また、各訪問者のブラウザとデバイスに応じて、表示する適切な画像サイズが選択されます。

さらに、このサービスは完全にクラウドベースです。 つまり、サーバーに負担がかからず、ストレージ容量の節約に役立ちます。

結論

要約すると、不足している属性を画像に簡単に追加する方法は次のとおりです。

1. PageSpeed Insights でテストを実行して、値が欠落している画像を特定します。
2. 幅と高さの寸法を手動で追加するか、WP Rocket などのプラグインを使用して追加します。

画像要素で明示的な幅と高さを使用する方法について質問がありますか? 以下のコメントセクションでお知らせください。