HtmlHow-ToBeginner · 4 min read

How to Optimize Images for SEO in HTML: Best Practices

To optimize images for SEO in HTML, always use the alt attribute with descriptive text, choose appropriate file formats like JPEG or WebP, and ensure images are properly sized and compressed. Additionally, use loading="lazy" to defer offscreen images and improve page speed, which helps SEO.

📐

Syntax

The basic syntax for adding an image in HTML with SEO optimization includes the <img> tag with src, alt, and optional attributes like width, height, and loading.

src: URL or path to the image file.
alt: Descriptive text for screen readers and SEO.
width and height: Define image dimensions to help layout stability.
loading="lazy": Defers loading images until needed to improve speed.

html

<img src="image.webp" alt="A scenic mountain view" width="600" height="400" loading="lazy">

Output

💻

Example

This example shows how to add an optimized image with descriptive alt text, proper size, and lazy loading to improve SEO and user experience.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SEO Optimized Image Example</title>
</head>
<body>
  <h1>Beautiful Landscape</h1>
  <img src="https://example.com/images/landscape.webp" alt="Sunset over a mountain lake with pine trees" width="800" height="533" loading="lazy">
  <p>This image uses WebP format, descriptive alt text, and lazy loading.</p>
</body>
</html>

Output

A webpage with a heading 'Beautiful Landscape', an image of a sunset over a mountain lake, and a paragraph describing the image optimization.

⚠️

Common Pitfalls

Common mistakes when optimizing images for SEO include:

Missing or empty alt attributes, which hurts accessibility and SEO.
Using large, uncompressed images that slow down page loading.
Not specifying width and height, causing layout shifts.
Using inappropriate file formats like BMP or TIFF instead of web-friendly formats.

html

<!-- Wrong way: Missing alt and large image -->
<img src="large-photo.jpg" alt="">

<!-- Right way: Descriptive alt, compressed WebP, and lazy loading -->
<img src="photo.webp" alt="City skyline at night with lights" width="700" height="467" loading="lazy">

📊

Quick Reference

Tip	Description
Use `alt` text	Describe the image clearly for SEO and accessibility.
Choose modern formats	Use WebP or optimized JPEG for smaller file size.
Set width and height	Prevent layout shifts by defining image dimensions.
Enable lazy loading	Use `loading="lazy"` to speed up page load.
Compress images	Reduce file size without losing quality.

✅

Key Takeaways

Always include descriptive alt text for every image to improve SEO and accessibility.

Use modern, compressed image formats like WebP to reduce file size and speed up loading.

Specify width and height attributes to avoid layout shifts during page load.

Implement loading="lazy" to defer offscreen images and enhance page speed.

Avoid large, uncompressed images that slow down your website and hurt SEO rankings.