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タグにカーソルを合わせる

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

VS Codeのコマンドパレット

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

画像のwidth, height属性が入力された様子

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

この方法を使用するには、画像のsrc属性が完全な文字列で入力されている必要があります。
例えば、WordPressで使用するようなPHPのコード等が含まれている場合は使用できません。

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

以下のようにimgタグにsrcset属性が含まれている場合も、src属性に指定した画像のサイズを元にwidth, height属性が自動入力されます。

<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を、画像ファイル名の末尾に記入するだけです。

ファイル名の例
  • image@2x.jpg
  • image@3x.jpg

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

2倍サイズの画像の例

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

2倍サイズの画像をimgタグで表示する

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

2倍サイズの画像にwidth, height属性が1/2の値で自動入力された様子

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

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

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

<img loading=

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

全てのimgタグが選択された様子

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

全てのimgタグにwidth, height属性が自動入力された様子

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

まとめ

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

内容が良かったらSNSでシェアしていただけると嬉しいです!
目次