ブログ記事のファイル作成時に、imgタグ内のsrcで指定した画像のwidthとheightを自動で取得して入力する方法を紹介します。
無料テキストエディタのVisual Studio CodeのEmmetは、ファイル内の複数のimgタグを一括で処理してくれる優れもの。
静的サイトジェネレーターJekyll等を利用している場合にお勧めです。
※マークダウン記法で画像を挿入している場合、当然ですがwidthとheightは入りません。

画像ファイルのwidthとheightを自動で取得して入力

ブログをレスポンシブデザインにしてから、imgタグ内のwidthとheight属性を省略するようになっていました。汗
しかし、ブラウザのレイアウトシフト解消、画像の遅延読み込みのloading属性を使用するには、widthとheight属性が必須みたいです。
これまでに既にブログで膨大な量の画像を使っていて、手作業でサイズを調べて入力するのは現実的に無理!!
この問題をお手軽に解決してくれるのが、Visual Studio Codeです。

Visual Studio Codeの使い方
  1. Visual Studio Codeをダウンロードして、インストール。
  2. ブログ記事のファイル(.md意外にも、.txtや.xmlなど)を、Visual Studio Codeで開く。
  3. imgタグが、ファイル内に1つのみの場合には、imgタグ内にカーソルを移動。
    複数ある場合には、imgタグを選択後に[CTRL] + [Shift] + [L] を押すと、全てのimgタグ内にカーソルが現れます。
  4. Editタブから、Emmetを選択。
    現れた一覧から、Emmet: Update Image Sizeを選択。
  5. 自動で画像のwidthとheightの値が入ったwidthとheight属性が入力される。
    元ファイルのwidthとheight属性の値に間違いがあった場合には、修正してくれる。
<img src="画像のURL1"><br>
<img src="画像のURL2" width="x2">
<img src="画像のURL3" width="間違ったx3" height="間違ったy3">
![代替テキスト](画像のURL4)

↓ Emmet: Update Image Size

<img src="画像のURL1" width="x1" height="y1">
<img src="画像のURL2" width="x2" height="y2">
<img src="画像のURL3" width="正しいx3" height="正しいy3">
![代替テキスト](画像のURL4)

注意点:
  1. マークダウン記法 ![代替テキスト](URL)では、当然ですがwidthとheightは入りません。
  2. 一つでも画像のリンク切れがあると、Emmet: Update Image Sizeが働きません。
  3. ファイル内に30個程度のimgタグでは問題がありませんでしたが、imgタグが多過ぎる場合には選択する数を減らす必要があるかも。
※Visual Studio Codeは、フォルダ内の複数ファイルで、一括検索・置換も可能です。
imgタグに、一括でloading=”lazy”を追加するのも簡単でした。