画像要素でwidthとheightが明示的に指定されていない問題を解決する方法

8 min 11 views

Webサイトの表示速度やユーザー体験を改善するために、Google PageSpeed Insightsを利用している方も多いのではないでしょうか。その診断結果で「画像要素で width と height が明示的に指定されていない」という項目が表示されて、どう対処すべきか悩んでいる方も少なくありません。

この問題は単なる技術的な指摘ではなく、実はSEO対策やユーザー体験に直結する重要な要素なんです。今回は、この問題の本質から具体的な解決方法まで、初心者の方でもわかりやすく詳しく解説していきます。

目次

なぜ画像要素にwidthとheightの指定が必要なのか？

まず、なぜGoogleが画像要素へのwidthとheightの指定を重視しているのか、その背景を理解することが重要です。

Core Web Vitalsとの関係

GoogleがCore Web Vitals（コア ウェブ バイタル）という指標を検索ランキング要因に組み込んだことで、Webサイトの表示速度やユーザー体験がこれまで以上に重要視されるようになりました。

Core Web Vitalsは以下の3つの指標で構成されています：

  • LCP（Largest Contentful Paint）：ページの表示速度
  • INP（Interaction to Next Paint）：ページの応答性（2024年3月よりFIDと替わって評価指標に）
  • CLS（Cumulative Layout Shift）：視覚要素の安定性

この中で、「画像要素で width と height が明示的に指定されていない」問題は、特にCLS（視覚要素の安定性）の改善に直結します。

レイアウトシフトという問題

画像要素にwidthとheightの指定がない場合、ページの読み込み時に「レイアウトシフト」という現象が発生します。これは、画像が読み込まれるまでその領域が確保されないため、画像が表示された瞬間に他の要素の位置がずれてしまう現象です。

具体的には、こんな経験をしたことがあるはずです：

  • 記事を読んでいる最中に、突然画像が表示されて文章が下にずれた
  • ボタンをクリックしようとしたら、広告が表示されて意図しない場所をクリックしてしまった
  • ページが読み込まれた後も、要素の位置がガクガクと動いて見にくかった

これらの問題は、ユーザーにとって非常にストレスフルな体験となり、サイトの離脱率増加にも繋がってしまいます。

レスポンシブデザインとの矛盾？

「でも、レスポンシブデザインのサイトでは画像サイズを固定しちゃダメなんじゃないの？」と思う方も多いでしょう。確かに、これまでのレスポンシブデザインの常識では、画像のサイズを固定せずに柔軟に対応することが推奨されてきました。

レスポンシブデザインの変遷

昔のWebサイト制作では、デスクトップ版とモバイル版で別々のHTMLファイルを作成し、画像サイズもガチガチに指定していました。その後、レスポンシブデザインの普及により、1つのHTMLファイルで複数のデバイスに対応する方法が主流となり、画像サイズの指定も緩くなっていったのです。

しかし、Core Web Vitalsの登場により、再び画像サイズの明示的な指定が重要視されるようになりました。これは技術の後退ではなく、ユーザー体験を向上させるための進化と捉えるべきです。

レイアウトシフトの原因と確認方法

レイアウトシフトの主な原因

CLSに影響を与えるレイアウトシフトの主な原因は以下の通りです：

  1. 画像や動画、iframe、広告などの埋め込み要素にwidthとheightが指定されていない
  2. Webフォントの読み込みの遅れや代替フォントの表示

レイアウトシフトを目視で確認する方法

Google Chromeのデベロッパーツールを使用することで、レイアウトシフトを視覚的に確認できます：

  1. Google Chromeで対象のページを開く
  2. F12キーを押してデベロッパーツールを開く
  3. 右上の「︙」メニューをクリック
  4. 「More tools」→「Rendering」を選択
  5. 「Layout Shift Regions」にチェックを入れる

この状態でページを読み込むと、レイアウトシフトが発生した部分が紫色で表示されます。通信速度が良好な環境では一瞬の表示になりますが、どの部分でレイアウトシフトが起きているかを把握できます。

具体的な改善方法

それでは、実際に「画像要素で width と height が明示的に指定されていない」問題を解決する具体的な方法をご紹介します。

1. 固定サイズの画像の場合

画像のサイズが固定されている場合は、以下の2つの方法があります：

方法1: HTMLのimg要素にwidthとheight属性を指定

修正前：

<img src="sample.jpg" alt="サンプル画像">

修正後：

<img src="sample.jpg" width="600" height="400" alt="サンプル画像">

方法2: CSSでサイズを指定

CSS：

img {
  width: 600px;
  height: 400px;
}

一般的には、HTMLのimg要素に直接指定する方法1が推奨されます。

2. レスポンシブデザインの場合

レスポンシブデザインでは、画像を可変サイズで表示する必要があります。この場合は以下の方法が効果的です：

HTML + CSSの組み合わせ

HTML：

<img src="sample.jpg" width="1200" height="675" alt="サンプル画像">

CSS：

img {
  width: 100%;
  height: auto;
}

HTMLには元画像の実際のサイズを記載し、CSSでレスポンシブ対応します。これにより、ブラウザは画像が読み込まれる前に適切な領域を確保できます。

calc()を使用した高度な対応

より精密なレスポンシブ対応には、calc()関数を使用します：

img {
  width: 100%;
  height: calc(100vw * (元画像の高さ / 元画像の幅));
}

例えば、元画像が横600px、縦400pxの場合：

img {
  width: 100%;
  height: calc(100vw * (400 / 600));
}

3. aspect-ratioを使用した方法

CSS3のaspect-ratioプロパティを使用することで、より簡潔に対応できます：

img {
  aspect-ratio: 3 / 2;
  width: 100%;
}

この方法は、すべての画像を統一した比率で表示したい場合に特に有効です。

実際の改善事例

実際にこの改善を行った結果、どのような効果があったのか、具体的な事例をご紹介します。

PageSpeed Insightsスコアの改善

あるWebサイトで28個の画像にwidthとheightを指定した結果：

  • PageSpeed Insightsのスコアが14から25に改善
  • 「画像要素で width と height が明示的に指定されていない」項目が改善項目から合格項目に移行
  • CLSスコアが安定化

長期的なSEO効果

継続的な改善により、以下のような効果が確認されています：

  • CLSスコアの長期的な改善
  • オーガニックセッションの増加（前年同月比120%超）
  • ユーザー体験の向上によるサイト滞在時間の延長

高速化と効果的なランディングページの作成

画像最適化は、Webサイトの表示速度向上の一部に過ぎません。本格的なパフォーマンス改善や効果的なランディングページの作成には、より包括的なアプローチが必要です。

そこでお勧めしたいのが、LandingHubです。LandingHubは、表示速度に最適化されたランディングページを簡単に作成できるプラットフォームで、画像の最適化はもちろん、コンバージョン率を最大化するための様々な機能を提供しています。

LandingHubの表示速度最適化機能

  • 自動画像最適化：アップロードされた画像を自動的に最適化し、適切なサイズ指定を行います
  • CDN配信：世界中のサーバーから高速配信
  • レスポンシブ対応：あらゆるデバイスで最適な表示を実現
  • Core Web Vitals対応：Google の指標を満たす高速ページを自動生成

その他の改善ポイント

広告や埋め込み要素の対応

画像以外にも、広告やYouTube動画の埋め込み、SNSウィジェットなどもレイアウトシフトの原因となります。これらの要素にも適切なサイズ指定を行うことが重要です。

広告の場合

広告は表示内容が動的に変わるため、CSSで最小高さを設定します：

.ad-container {
  min-height: 250px;
}

iframe要素の場合

YouTube動画などのiframe要素にも明示的なサイズ指定が必要です：

<iframe width="560" height="315" src="https://www.youtube.com/embed/..." frameborder="0"></iframe>

Webフォントによるレイアウトシフトの対策

Webフォントの読み込みもレイアウトシフトの原因となります。以下の方法で対策できます：

フォントのプリロード

HTMLの<head>タグ内に以下を追加します：

<link rel="preload" href="/fonts/customfont.woff2" as="font" type="font/woff2" crossorigin>

font-displayプロパティの活用

CSSでフォントの表示方法を制御します：

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/customfont.woff2') format('woff2');
  font-display: swap;
}

CLSスコアの理解と目標設定

CLSスコアの評価基準

CLSスコアは以下の3段階で評価されます：

  • 良好（Good）：0.1未満
  • 改善が必要（Needs Improvement）：0.1〜0.25未満
  • 悪い（Poor）：0.25以上

理想的には0.1未満を目指し、最低でも0.25未満に抑えることが重要です。

CLSスコアの計算方法

CLSスコアは、「影響係数」×「距離係数」で計算されます：

  • 影響係数：レイアウトシフトの影響を受けた領域の割合
  • 距離係数：要素が移動した距離の割合

この理解により、どの要素の改善が最も効果的かを判断できます。

実装時の注意点とベストプラクティス

画像フォーマットによる違い

WebP形式の場合

WebP形式の画像では、img要素にwidthとheightを指定することで、自動的に縦横比が保たれます：

<img src="sample.webp" width="600" height="400" alt="WebP画像">

SVG形式の場合

SVG画像の場合も同様にサイズ指定が可能です：

<img src="icon.svg" width="100" height="100" alt="SVGアイコン">

CMS利用時の対応

WordPress の場合

WordPressでは、functions.phpに以下を追加することで自動的にwidth/height属性を追加できます：

function add_image_dimensions($content) {
    $content = preg_replace('/]*?)>/i', '', $content);
    return $content;
}
add_filter('the_content', 'add_image_dimensions');

その他のCMS

多くのCMSで類似の機能が提供されており、プラグインやテーマの機能を活用することで効率的に対応できます。

モバイルファーストな対応

モバイルデバイスでのユーザー体験がより重要視される現在、モバイルファーストなアプローチが必要です。

モバイル向けの最適化

  • 画像サイズの最適化：モバイル向けに小さめの画像を使用
  • 遅延読み込み：スクロールに応じて画像を読み込む
  • 適応的配信：デバイスに応じて最適な画像を配信

レスポンシブイメージの活用

HTML5のsrcset属性を使用して、デバイスに応じた画像を配信：

<img src="image-800.jpg" 
     srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
     sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
     width="800" height="600" alt="レスポンシブ画像">

継続的な改善とメンテナンス

定期的な監視

画像の最適化は一度行えば終わりではありません。定期的な監視と改善が必要です：

  • PageSpeed Insightsでの定期チェック
  • Google Search Consoleでの Core Web Vitals 監視
  • 実際のユーザー データ（CrUX）の分析

新しい技術への対応

Web技術は常に進化しています。新しい画像フォーマットや最適化技術にも対応していく必要があります：

  • AVIF形式の導入検討
  • Container Queries の活用
  • 新しいCSS機能の活用

よくある質問と解決方法

Q1: 既存サイトの大量の画像を一括で修正する方法は？

A1: 大量の画像を効率的に修正するには、以下の方法があります：

  • スクリプトによる一括置換：正規表現を使用してHTML内の画像タグを一括修正
  • CMSの機能活用：WordPressなどのCMSのプラグインを使用
  • ビルドツールの活用：Gulp や Webpack などのビルドプロセスに組み込み

Q2: 動的に生成される画像への対応は？

A2: 動的画像の場合は、以下のアプローチが効果的です：

  • APIから画像情報を取得：画像の実際のサイズを事前に取得
  • プレースホルダーの使用：統一されたサイズのプレースホルダーを表示
  • JavaScript での動的設定：画像読み込み時にサイズを設定

Q3: レスポンシブデザインで複数ブレークポイントがある場合は？

A3: 複数のブレークポイントがある場合は、メディアクエリを組み合わせて対応します：

img {
  width: 100%;
  height: calc(100vw * (400 / 600));
}

@media (min-width: 768px) {
  img {
    height: calc(100vw * (300 / 800));
  }
}

@media (min-width: 1024px) {
  img {
    height: calc(100vw * (200 / 1200));
  }
}

まとめ

「画像要素で width と height が明示的に指定されていない」という問題は、単なる技術的な指摘ではなく、ユーザー体験とSEOの両方に大きく影響する重要な要素です。

この記事で紹介した方法を実践することで：

  • レイアウトシフトの解消によるユーザー体験の向上
  • CLSスコアの改善によるSEO効果の向上
  • ページ表示速度の改善による離脱率の低下
  • モバイルユーザビリティの向上

これらの効果を実感できるはずです。

ただし、本格的なWebサイトの最適化やコンバージョン率の向上を目指すなら、画像最適化だけでは限界があります。そんな時は、表示速度に最適化されたランディングページを簡単に作成できるLandingHubの活用も検討してみてください。

LandingHubなら、今回紹介した画像最適化はもちろん、Core Web Vitals対応やコンバージョン最適化まで、包括的にサポートしてくれます。

最後に、Web技術は常に進化しており、新しい最適化手法も次々と登場しています。今回の改善を行った後も、定期的な監視と継続的な改善を心がけることで、より良いユーザー体験を提供し続けることができるでしょう。

まずは手軽に始められる方法から実践して、段階的に改善を進めていくことをお勧めします。きっと、サイトのパフォーマンス向上を実感できるはずです。

<PREV
ファサードでのサードパーティリソースの遅延読み込みについて解説！PageSpeed Insightsの改善へ
NEXT>
レイアウトが大きく変わらないようにする対策は？累積レイアウトシフト（CLS）の改善方法
関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です