コードエディターとして人気の高いMicrosoftの「Visual Studio Code」。無料で利用でき、当ブログの執筆作業もこのアプリケーションで行っています。
ただ、高機能ゆえにこういったことをしてほしい！となったときには、少し調べる必要が出てきます。
私が困ったのはimgタグに付けるwidthとheight属性で、画像までのパスを指定したら該当する画像の幅・高さを自動で取得して入力してくれたら便利だと思っていました。
調べてみたところ、それが可能なコマンドが標準で搭載されていると知りましたので、この記事でご紹介したいと思います。
「Emmet: イメージ サイズの更新」で自動入力が可能
Visual Studio Codeの中には「Emmet（エメット）」と呼ばれる入力補完ツールが標準搭載されています。HTMLやCSSを省略記法で入力してくれる機能で、数文字のキー入力だけで数行のコードが書けたり、定型文を呼び出したりするなど、コード入力をサポートしてくれます。
今回のwidth属性とheight属性の自動入力もEmmet内にある機能を使います。以下のページにも手順が記載されています。
手順は次のとおりです。
- 該当するimgタグにカーソルを合わせておく。
- コマンドパレットを開く。（Ctrl/Cmd + Shift + P）
- 「Emmet: イメージ サイズの更新」を選択する。
これだけでリンクさせた画像の幅・高さを取得し、自動でwidth属性とheight属性をimgタグ内に入力してくれます。
また、環境によってはこの動作にキーボードショートカットが割り当てられていることがあり、私の環境では「Ctrl + Alt + Iキーの同時押し」でした。このあたりは、お好みのキーを割り当てていただければ大丈夫です。
ちなみに、コマンドIDは「editor.emmet.action.updateImageSize」です。
変数などが入っていると難しいらしい
私は開発まではしていないので、詳細は別途確認していただければと思いますが、画像までのパスに変数が入っていると取得できないなど、いくつか制約があるようです。
そのあたりは以下のウェブサイトに記載されていましたので、一緒にご紹介させていただきます。
imgタグにwidthとheight属性は必要か
Visual Studio Codeでwidthとheight属性を自動入力したいという内容はここで終わりですが、コラム的な内容として、imgタグにこれらの属性は必要なのかどうかという話も少し書いてみます。
私は現状「width/height属性はimgタグに必要」と判断しています。
かつては画像（imgタグ）に対して、横幅である「width属性」、高さである「height属性」を入れるのが一般的でした。
しかし、スマートフォンやタブレット端末が普及したことで、パソコンのように横長のモニターだけでなく、縦長の画面でウェブサイトを閲覧することが増えました。これにより、特に横幅に応じてウェブサイトも最適な表示に自動調整される「レスポンシブデザイン」の重要性が増しました。
このとき、画像の大きさも固定せずに自動的に調整されるよう、widthとheight属性には値を入れず、CSSによって自動調整するコードが流行しました。
現在はレイアウトシフトの回避に効果的
現在では、検索エンジン大手の「Google」がコアウェブバイタル（Core Web Vitals）という指標を設け、ウェブページの表示速度や応答性、視覚的な安定性を評価しています。
このコアウェブバイタルでは、特にウェブサイトの表示速度や視認性、反応性について改善を求めており、良好なユーザー体験を提供できているかを判断する材料になります。
ここで先ほどの、CSSで画像の大きさを自動調整する方法に問題が出てきました。この方法では、どれくらいの大きさの画像が挿入されるのかが「実際に画像が読み込まれるまで不明」であり、やっと大きさが判明する頃には、ユーザーが内容を読み始めたり、マウスなどでクリックしようと動作を開始していたりする場合があります。
このとき、画像の大きさが後から決まってしまうことでウェブページの横幅・高さがいきなり変わってしまい、「今読んでいたのに画像が読み込まれたら移動してしまった」「別の記事を読もうとクリックしたら、関係のないリンクや広告をクリックしてしまった」という不快な動作や誤操作が発生しやすくなります。
いわゆる「レイアウトシフト」と呼ばれる現象で、コアウェブバイタルでは、このレイアウトシフトがなるべく起こらないよう改善を求めています。
このレイアウトシフトを回避する方法の一つが、imgタグにwidthとheight属性を付け加えることです。
この属性を付け加えることで、画像が読み込まれる前であってもウェブブラウザはあらかじめ画像の縦横比を計算でき、画像が表示されるスペースを確保しておきます。これにより、不用意な要素の移動が減り、レイアウトシフトの回避につながります。
Lazy Loadの実装でも重要
画像の遅延読み込み機能である「Lazy Load」ですが、現在のモダンなウェブブラウザでは標準実装されていることが多く、JavaScriptがなくてもimgタグに「loading=”lazy”」属性を加えることで簡単に実装できるようになりました。
特に画像が多いウェブサイトであるほど効果的で、「Lazy Load」が実装されたウェブサイトでは、ユーザーが画像を視認できる位置へ近づいてから画像が読み込まれるため、表示速度の改善やダウンロード容量の節約に役立ちます。
この「Lazy Load」を実装する場合も、imgタグに対するwidth/height属性の記述が重要です。
属性がなくても遅延読み込み自体は動作しますが、画像が遅れて読み込まれる中で大きさが事前に分からないと、スクロールするたびにレイアウトシフトが発生しやすくなり、ユーザー体験が損なわれてしまいます。
また、WordPressにはコンテンツ内の画像へ「loading=”lazy”」などの読み込み最適化属性を自動で付ける仕組みがあります。widthとheight属性は、ブラウザが画像の縦横比を事前に計算して表示スペースを確保するためにも重要です。
alt属性はどうするか
今回の記事とは直接関係のないalt属性ですが、imgタグとセットで書かれることも多いですから、私のスタンスのようなものを一応書いてみます。
私も悩んだところなのですが、最近の記事（書き直しを含む）ではalt属性を「空（alt=””）」にしています。
alt属性は画像の説明を記述することになっていますが、このブログでは画像の前後に最初から画像の説明が入っていることが多く、また、最近はfigure要素で囲み、figcaption要素で画像のキャプションを付けているため、HTML上にも画像の説明が入っています。
この状態でさらにalt属性へ同じ説明を付けると、スクリーンリーダーを使う際に説明が二重になり、かえってユーザビリティが下がる場合があると判断したためです。
実際、そのような場合は空でもよいそうですので、しばらくはこの運用でいきたいと思います。
まとめ
最後はwidth/height属性が必要なのかどうかについて私なりの考えを書いただけですが、私は必要だと考えているので、「Visual Studio Code」による画像サイズの自動取得方法を調査してみました。（alt属性の話はおまけです）
当ブログでは、この「イメージ サイズの更新」機能とスニペット機能があれば記事をスムーズに書けるので、これからも重宝するかと思います。
ちなみに、Adobe Dreamweaverにも標準で画像サイズの取得機能がありますので（プロパティインスペクターで可能）、こちらを使っている方はそれでも大丈夫かと思います。Dreamweaverは、このあたりの表示が分かりやすいのがよいですね。
