How to Add Images in HTML the Right and Optimal Way

Basic Image Syntax

1<img src="images/photo.jpg" alt="A description of the image" />

• src → the path or URL of the image (required)
• alt → alternative text that describes the image (very important)

Why the alt Attribute Matters

The alt text is shown if the image fails to load. It also helps:

• Screen readers describe the image to visually impaired users
• Search engines understand what the image is about

1<!-- Good -->
2<img src="cat.jpg" alt="Orange cat sleeping on a sofa" />
3
4<!-- Bad -->
5<img src="cat.jpg" alt="image" />
6<img src="cat.jpg" />

If the image is purely decorative, you can use an empty alt:

1<img src="decoration.png" alt="" />

Setting Width and Height

Always include width and height when possible. This helps the browser reserve space and prevents layout shifts while the image loads.

<img src="https://i.pinimg.com/736x/cb/5c/4b/cb5c4b83975929d9866454bcc3d7d29e.jpg" 
height="300" 
width="300"
alt="Lazy cat"
></img>

You can still control the display size with CSS later. The important thing is telling the browser the original dimensions.

Lazy Loading for Better Performance

Lazy loading tells the browser to only load images when they’re about to enter the viewport. This makes the page load faster.

<img
  src="https://i.pinimg.com/1200x/90/63/60/906360fe7313197f5a060249ff10a182.jpg"
  alt="Cat Bro"
  width="300"
  height="300"
  loading="lazy"
/>

Use loading="lazy" for images that are lower on the page. For important above the fold images (like a hero image), it’s usually better to load them normally.

Quick Tips

Always write meaningful alt text. Include width and height to avoid layout shifts. Use loading=“lazy” for images below the fold. Prefer modern formats like WebP when possible (with fallbacks if needed). Don’t use huge image files, compress them before uploading. Avoid using images for text that should be real HTML text.

By using the <img> tag correctly with alt, dimensions, and lazy loading, your images will look good, load faster, and be friendlier for both users and search engines.