imgタグにはwidth属性とheight属性を付けるべし

こんにちは！おがちゃんです！

ロード時のレイアウトが崩れるのを防ぐために、なんとなく「imgタグにはwidthとheightを付けた方がいい」というのは聞いたことがある方も多いのではないでしょうか？

Tip: Set width & height on your <img> elements. This now allows modern browsers to infer their intrinsic size pre-download, reducing layout shifts. pic.twitter.com/yhsIftiJzR

— Addy Osmani (@addyosmani) June 27, 2020

なぜ付与した方がいいのかは、わかりやすくまとめてあるサイトがあるので、リンク先をご参照ください。とてもかりやすい!!

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい

width属性とheight属性を一発で付与する方法

width属性とheight属性を付けた方がいいのはわかったんですが、毎回画像の幅と高さを確認して手打ちするのは面倒です。

簡単に付与する方法をメモしておきます。

Emmetで付与

VScodeに内臓されているEmmetで付与します。
imgタグにカーソルを合わせた状態で「編集」 → 「Emmet」を選択します。

Update Image Size と検索して選択します。

自動でwidth属性とheight属性が付与されました。

Emmetをキーボードショートカットに登録

imgタグごとにメニューバーから選択するのは大変なので、キーボードショートカットに設定します。

「基本設定」から「キーボードショートカット」を開きます。

「Update Image Size」と検索し、項目の左にある「＋」もしくは「鉛筆マーク」から任意のショートカットキーを登録します。（他のコマンドと被った場合は教えてくれます）

imgタグにカーソルを合わせた状態で、先ほどのショートカットを入力すると、自動でwidth属性とheight属性が付与されました。

複数タグに一括付与

既に作成してしまったページに対して一括で付与したい場合の手順です。
（1つでもパスが間違っていたり、コメントアウトしたimgタグがあるとうまくいきません）

imgタグにカーソルを合わせて「Command」+「Shift」+「L」で全てのimgタグが選択できます。

この状態で先ほど設定したショートカットを入力すると、全ての画像にwidthとheightが設定されました。

おわり

画像を差し替えた場合は改めて、ショートカットキーを入力しないと数値がアップデートされません。
私はコンパイル時に全自動できるように勉強していきます!!