⭐ Beginner — No coding experience needed
Image SEO Basics: Formats, Alt Text and Lazy Loading
Learn how to optimise images for SEO — correct file formats, alt text, dimensions and lazy loading. Step by step for complete beginners.
What you will learn in this guide
- How images affect your page speed and Core Web Vitals
- What alt text is and why it matters for both SEO and accessibility
- What WebP format is and why you should switch to it
- What lazy loading means and how to add it
- How to find image issues on your pages
- How to fix oversized images without being a developer
1 How images affect your rankings
Large images are one of the most common causes of slow page load times. A slow page hurts your Core Web Vitals score — particularly LCP (Largest Contentful Paint), which Google uses as a direct ranking factor. Images without alt text miss an indexing opportunity and fail accessibility standards.
| Issue | Impact |
|---|---|
| Large file size | Slow LCP, poor Core Web Vitals, lower rankings |
| Missing alt text | Not indexed by Google Images, accessibility fail |
| Wrong format (JPG vs WebP) | WebP is 25-35% smaller — faster load times |
| No width/height attributes | Causes layout shift (CLS) as images load |
| No lazy loading | Loads images not yet visible — wastes bandwidth |
2 How to write good alt text
Alt text describes what an image shows. Screen readers read it aloud for visually impaired users. Google uses it to understand and index the image.
❌ Bad alt text
alt="image1.jpg"✅ Good alt text
alt="Red leather sofa in a modern living room"Rule: Describe the image as if you were explaining it to someone on the phone. Keep it under 125 characters. Do not stuff keywords.
3 How to run an image audit
- 1Open the Image Optimisation AuditorGo to audit-tools.html#image-opt and enter a page URL.
- 2Fix missing alt text firstThe tool lists every image without alt text. Add descriptive alt attributes to each one in your CMS or HTML editor.
- 3Add lazy loading to below-fold imagesAdd
loading="lazy"to every img tag that is not in the first visible section of the page:<img src="photo.jpg" alt="description" loading="lazy"> - 4Convert large images to WebPUse a free tool like Squoosh.app to convert JPEG and PNG files to WebP format. Upload the WebP versions to your site and update the src attributes.