Forem

Cover image for Quick VS Code tip: Automatically add image width and height to images
Christian Heilmann
Christian Heilmann

Posted on • Originally published at christianheilmann.com

1

Quick VS Code tip: Automatically add image width and height to images

One thing that keeps amazing me about Visual Studio Code is how much it helps you automate annoying tasks when you write code. For example, if you add an img tag to the document you need to know the src and find out the width and height to avoid reflow issues when the image was loaded. You also need to add an alt attribute either to provide an alternative text or to prevent assistive technology to read out the src attribute instead.

You can do this by following these steps:

  • Start the img tag
  • As soon as you write src=" VS Code gives you an autocomplete for local images.
  • Close the img tag (this is important)
  • Use the Command Palette (CMD + Shift + P on Mac or Ctrl + Shift + P on Linux / Windows) and type "size" to trigger the Emmet size script that automatically adds width and height.

You can see it in this screencast:

emmet-image-size

My setup also warns me when I have images without any alt attribute. It puts a wavy line under any element with a problem like the img tag and shows the error right next to it. I am using two extensions for this: webhint for VS Code and Error Lens.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay