WordPressで画像にwidthとheightを追加する方法

最終更新日:

WordPressで投稿内の画像にwidthとheight属性を追加する方法を紹介します。widthとheight属性の説明からメリットや注意点、WordPressで画像サイズを追加するコードも掲載しています。

画像のサイズを指定する

HTMLのimg要素においてwidth属性とheight属性を追加すると、画像の表示サイズを指定できます。

width属性とheight属性

width属性とheight属性
属性説明値
width画像の幅を指定するピクセル（px）またはパーセント（%）

例）width=”300″
例）width=”30%”
height画像の高さを指定するピクセル（px）またはパーセント（%）

例）height=”300″
例）height=”30%”

記述例

<img src="xxx.png" width="300" height="250">

対応ブラウザ

width属性とheight属性は以下のブラウザでサポートされています。

widthとheightを付けるメリット

画像にwidth属性とheight属性を付けるとどのような利点があるのか説明します。

レイアウトシフトを回避できる

FirefoxやChromeなどのメジャーなブラウザでは、img要素にwidthとheight属性を指定することで、画像が読み込まれる前に画像のサイズを計算してレイアウトを確保します。

画像の遅延読み込みをしている場合、画像のサイズを指定しておかないと画像が読み込まれた後にレイアウトが動いてしまう可能性があります。

レイアウトが動いてしまうことでユーザーに不要なクリックを誘発したり、アンカーリンクのスクロール位置がズレてしまうことがあります。

ページ評価の低下を防ぐ

Googleが提唱しているCore Web Vitals（コアウェブバイタル）にはLCP、FID、CLSの3つの指標があります。

CLSはCumulative Layout Shiftの略で、ページ読み込み時にどれぐらいレイアウトが移動したかを表します。

2021年以降、Core Web Vitalsが検索ランキングの要因になることが公表されています。

画像のサイズを指定することでCLSの減少につながります。

widthとheightを指定する際の注意点

画像にwidth属性とheight属性を付ける際、どのような注意点があるのか説明します。

適切なサイズを指定する

実際の画像のサイズより大きい値をwidth、heightに指定すると画像が荒くなって表示されます。実際に表示させたい画像のサイズを指定しましょう。

また表示したいサイズより元の画像のサイズが大きいと読み込むためのデータ量が増えてしまいます。画像編集ソフトなどを使って適切なサイズにリサイズしましょう。

画像の比率を崩さない

元の画像サイズと指定するwidth、heightの比率が異なると画像がゆがんで表示されてしまいます。比率は崩さないようにしましょう。

WordPressで画像のサイズが付いていない？

ブロックエディターで投稿内に画像を挿入した場合、imgタグにwidthとheight属性が付きません。

ただしWordPressの今後のバージョンアップでwidthとheight属性が追加される可能性があります。

WordPressで画像のサイズを追加する方法

WordPressで投稿内に画像を挿入した時、imgタグにwidthとheightを付ける方法は以下の2通りがあります。

クラシックエディターにする

プラグインのClassic Editorをインストールするとクラシックエディターに変更できます。

Classic Editor

Classic Editorを有効化すると画像挿入時、imgタグにwidthとheightが付きます。

Classic Editorを有効化する前の投稿は手動で修正する必要があります。

テーマをカスタマイズして自動で追加する

テンプレートファイルをカスタマイズすることで投稿内の画像に自動でwidthとheight属性を追加できます。

テーマ内のfunctions.phpに下記のコードを追加します。カスタマイズする際は事前にバックアップをとった上で実施ください。

function add_img_size($content){
  $pattern = '/<img [^>]*?src="(https?:\/\/[^"]+?)"[^>]*?>/iu';
  preg_match_all($pattern, $content, $imgs);
  foreach ( $imgs[0] as $i => $img ) {
    if ( false !== strpos( $img, 'width=' ) && false !== strpos( $img, 'height=' ) ) {
      continue;
    }
    $img_url = $imgs[1][$i];
    $img_size = @getimagesize( $img_url );
      
    if ( false === $img_size ) {
      continue;
    }
    $replaced_img = str_replace( '<img ', '<img ' . $img_size[3] . ' ', $imgs[0][$i] );
    $content = str_replace( $img, $replaced_img, $content );
  }
  return $content;
}
add_filter('the_content','add_img_size');

投稿内のimgタグを検索してwidthとheightがない場合は画像URLからサイズを取得し、コードを置換することでサイズを追加します。

go to top