Image Optimisation Alt Text File Size and Lazy Loading

Writing useful alt text

Alt text is read aloud by screen readers and used by Google to understand image content when it cannot reliably interpret pixels alone. Write a short, literal description of what the image shows and its purpose on the page, for example 'red running shoe on white background, side profile', rather than stuffing it with unrelated keywords.

Purely decorative images, such as spacer graphics or background flourishes, should carry an empty alt attribute (alt="") so screen readers skip them, rather than a forced keyword that adds no information.

File size and format

Large uncompressed images are one of the most common causes of poor page speed scores. Convert photographic images to WebP or AVIF, which typically produce 25-50% smaller files than JPEG at equivalent visual quality, and use PNG only for images that need transparency or sharp flat colour, such as logos.

Serve images at the actual display size rather than shipping a 3000-pixel-wide file into a 400-pixel container, and use a srcset with multiple resolutions so mobile devices download a smaller variant automatically.

Lazy loading and layout stability

Add loading="lazy" to images below the initial viewport so the browser defers fetching them until the user scrolls near them, reducing initial page weight. Never lazy-load the hero image or any image visible without scrolling, since deferring it delays the Largest Contentful Paint metric and hurts the page speed score.

Always set explicit width and height attributes (or aspect-ratio in CSS) on every image so the browser reserves the correct space before the file loads, preventing the layout-shift jump that damages Cumulative Layout Shift.

• Write literal, purpose-driven alt text under ~125 characters
• Use empty alt attributes for purely decorative images
• Convert photos to WebP or AVIF and resize to display dimensions
• Lazy-load below-the-fold images only, never the hero image

Finding image issues in RankAudit

RankAudit's Images report lists every image missing alt text, every file above a configurable size threshold, and any image served at a resolution far larger than its rendered display size. Export the oversized-file list first, since compressing large hero and product images usually delivers the biggest single speed improvement per hour of work.

Key takeaways

• ✓Write short, literal alt text for informative images only
• ✓Compress and convert images to WebP or AVIF
• ✓Lazy-load everything below the fold, never the hero image
• ✓Always set width and height to prevent layout shift

Why this lesson matters

This lesson belongs to Content and Media Quality, the part of On-Page SEO where the goal is: make page content and images genuinely useful to both readers and ranking systems.

Read it once, then do it straight away on a real site inside RankAudit. Nothing here is theory for its own sake — every step produces something you can show a client.

Do it now

1. 1Open RankAudit with sample data already loaded, so you are not stuck on setup.
2. 2Crawl a site and triage the issue list.
3. 3Use RankAudit's content and image reports to find thin pages, missing alt text and oversized media files across your site, then fix the ten highest-impact items first.