VS Codeでimgタグのwidth, height属性を自動入力する方法

ページのCLS対策のため、imgタグにwidth, height属性を記入することは重要です。
しかし、画像毎に一々サイズを調べながら、手動でwidth, height属性を入力していくのは非常に手間がかかります。

そんな時、VS Code（Visual Studio Code）のemmet機能を使うことで、width, height属性を自動で入力することが出来ます。（標準機能のため、拡張機能をインストールする必要もありません）

この記事で詳しいやり方を解説していきます。

VS Codeでwidth, height属性を自動入力する方法

VS Codeでwidth, height属性を自動入力する方法を解説していきます。

今回の例では、以下のように幅640px、高さ429pxの画像を使用しました。

まずは、この画像を呼び出すimgタグの行にカーソルを合わせます。（※画像のパスは正しく入力されている必要があります）

imgタグにカーソルを合わせた状態でcommand+shift+Pと入力します。
コマンドパレットの検索欄が表示されるので、「image」と入力します。

「Emmet: イメージ サイズの更新」のみが表示された状態になるので、Enterを押します。

VS Codeが画像の幅と高さを自動で取得し、width属性・height属性が自動で入力されました。

<!-- 自動入力できない例 -->
<img src="<?php echo get_stylesheet_directory_uri();?>/img/image.svg" alt="">

<img
  srcset="./img/image.jpg 1x, ./img/image@2x.jpg 2x"
  src="./img/image.jpg"
  alt=""
/>

Retia（高解像度）ディスプレイ用のwidth, height自動入力方法

以下の記事で解説している通り、Retinaディスプレイなどの対応のため、2倍や3倍サイズの画像を使用する場合があります。

その場合、2倍サイズの画像であれば、実際には1/2のサイズでWebページに表示したいため、widthとheight属性にも1/2の値が入力されることが望ましいです。

VS CodeのEmmet機能は、この辺りも上手く実行してくれます。
やり方はとても簡単で、2倍サイズの画像であれば@2x、3倍サイズであれば@3xを、画像ファイル名の末尾に記入するだけです。

例として、以下のように2倍サイズである「image@2x.jpg」を、imgタグで表示する場合を考えます。
この画像は、幅が1280px、高さが858pxです。

この画像をimgタグで呼び出します。

前述した手順通り、imgタグにカーソルを合わせた状態で、command+shift+Pでコマンドパレットを開き、「image」と入力 →「Emmet: イメージ サイズの更新」が表示された状態でEnterを押します。

すると、画像の幅と高さの1/2の値が、width, height属性にそれぞれ自動入力されます。

複数のimgタグに一括でwidth, heightを自動入力する方法

複数あるimgタグの内、任意のimgタグの<imgまでをドラッグして選択した状態にします。

この状態で、command+shift+Lを入力します。
すると、ファイル内の全てのimgタグが選択された状態になります。

その後は同様に、command+shift+Pでコマンドパレットを開き、「image」と入力 →「Emmet: イメージ サイズの更新」が表示された状態でEnterを押します。

以上で、選択した全てのimgタグに、width, height属性が自動で入力されます。

まとめ

VSCodeでimgタグのwidth, height属性を自動入力する方法について解説しました。
今回解説した方法を使用して、効率よくコーディング作業を進めましょう。

また、VSCodeでの作業をより効率化してくれる拡張機能を以下の記事で紹介しているので、是非ご覧ください。

あわせて読みたい

【2024年版】Web制作におすすめのVSCode拡張機能16選