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

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



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

Visual Studio Codeの使い方

1. Visual Studio Codeをダウンロードして、インストール。
2. FileタブからPreferences、Keyboard Shortcutsを選択。
   Emmet: Update Image Sizeを検索する。
   Emmet: Update Image Sizeをダブルクリックして、自分の好きなショートカット（例：[CTRL] + [K]）を登録。
   ※既存のキーボードの組み合わせと被らないようにして下さい。
   
3. ブログ記事のファイル（.md以外にも、.xmlなど）を、Visual Studio Codeで開く。
4. imgタグが、ファイル内に1つのみの場合には、imgタグ内にカーソルを移動。
   複数ある場合には、imgタグを選択後に[CTRL] + [Shift] + [L] を押すと、全てのimgタグが選択されます。
5. 手順2で設定した、ショートカット（例：[CTRL] + [K]）を押す。
6. 自動で画像の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. マークダウン記法 では、当然ですがwidthとheightは入りません。
2. 一つでも画像のリンク切れがあると、Emmet: Update Image Sizeが働きません。
3. ファイル内に30個程度のimgタグでは問題がありませんでしたが、imgタグが多過ぎる場合には選択する数を減らす必要があるかも。

※Visual Studio Codeは、フォルダ内の複数ファイルで、一括検索・置換も可能です。
imgタグに、一括でloading=”lazy”を追加するのも簡単でした。

更新日：2022-11-04