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.

Why this lesson matters

Neglecting image optimisation directly impacts user experience and conversion rates. Imagine an e-commerce site selling high-end furniture. If their product images are unoptimised – large files, no lazy loading – the page loads slowly, especially on mobile. Potential customers, accustomed to fast browsing, abandon the site before products even appear, leading to lost sales and a high bounce rate. This signals poor user experience to search engines, negatively affecting rankings for crucial product keywords and brand visibility.

Conversely, a well-optimised image strategy provides significant SEO advantages. Properly structured alt text not only enhances accessibility for screen readers but also offers contextual signals to search engines about the image and the surrounding content, boosting visibility in image search and potentially organic web results. Combined with efficient lazy loading and compressed files, pages load swiftly, improving core web vitals and overall site performance, which are increasingly critical ranking factors for competitive industries.

Strategic Image Placement for SEO Impact

Beyond technical optimisation, the strategic placement and context of images profoundly influence their SEO value. Images should reinforce the primary topic of the surrounding text, not merely decorate the page. For instance, a detailed infographic on 'sustainable manufacturing processes' should be embedded near text discussing that specific process, with its alt text and file name reflecting this precision. This contextual relevance helps search engines understand the image's role and its contribution to the page's authority on the subject.

Consider image carousels or galleries: while visually appealing, ensure that each image within them still adheres to optimisation best practices. For hero images, which dominate the viewport upon load, the file size is paramount as they directly impact Largest Contentful Paint (LCP). Prioritise these images for maximum compression and consider modern formats like WebP. Avoid placing critical textual information *within* images unless absolutely necessary, as search engines cannot reliably read text embedded in graphics.

Key considerations for placement:

• Embed images directly within relevant content sections.

• Ensure hero images are aggressively optimised for LCP.

• Avoid using images purely for text display; use HTML instead.

• Contextualise images with relevant headings and paragraphs.

Do it now

Open RankAudit for your primary website and perform a full crawl. Navigate to the 'Images' report. Identify any images flagged for missing alt text, excessively large file sizes, or those impacting Core Web Vitals. This immediate diagnostic step will highlight the most critical areas needing attention on your site, providing a clear roadmap for implementation based on the principles discussed.

1. Log into RankAudit for your primary domain.

2. Initiate a fresh crawl if your data isn't recent.

3. Go to the 'Images' report in the left-hand navigation.

4. Filter by 'Missing Alt Text' and 'Large File Size' to prioritise fixes.

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.