Image SEO — Alt Text, File Size and Lazy Loading
Optimise website images with effective alt text, compressed file sizes, and lazy loading techniques to improve rankings, speed, and user experience.
Why image SEO matters beyond just the images
Images affect SEO in ways that go far beyond whether they appear in Google Image Search. Unoptimised images are the single most common cause of slow page load times — which directly affects Core Web Vitals scores, which are a ranking factor. An article with brilliant writing, perfect keyword placement, and strong backlinks will underperform its potential if large, unoptimised images cause it to load in 8 seconds on mobile.
Image optimisation is therefore both a technical SEO task (improving speed) and an on-page task (alt text for relevance and accessibility). Getting both right is essential for any page that includes images — which is most pages on most websites.
Every unoptimised image on your page adds load time, hurts Core Web Vitals, and reduces your ranking potential. A page with 5 unoptimised images that loads in 7 seconds could rank significantly higher after image optimisation brings it to 1.8 seconds — without any other changes.
Alt text — accessibility, relevance, and ranking
Alt text (alternative text) is an HTML attribute that describes an image. It serves three purposes: it allows screen readers to describe the image to visually impaired users, it provides context to Google when it crawls your images, and it appears in place of the image when an image fails to load. Writing good alt text serves all three purposes simultaneously.
Rules for effective alt text:
- Describe the image accurately— Alt text should describe what is actually in the image. "Screenshot of Google Search Console Performance report showing 47 queries" is correct. "SEO tool" is too vague. "SEO screenshot" is better but still imprecise.
- Include your target keyword naturally— For the primary image on a page, include your primary keyword in the alt text where it fits naturally. "Keyword research spreadsheet showing 200 target keywords organised by intent" for a keyword research page image. Do not force it awkwardly.
- Keep it concise— Under 125 characters ideally. Screen readers typically stop reading alt text after 125 characters.
- Do not start with "Image of..." or "Photo of..."— Screen readers already announce "image" before reading the alt text. "A graph showing organic traffic growth" becomes redundant. Just describe the content: "Graph showing organic traffic growing 340% over 12 months".
- Leave decorative images empty— Purely decorative images (dividers, icons, backgrounds) should have empty alt attributes (alt=""). This tells screen readers to skip them.
File size and format — the biggest impact on page speed
Image file size is the dominant factor in how much images slow down page loads. A page with a single 2MB hero image can take 6–8 seconds to load on mobile — failing all three Core Web Vitals thresholds. Reducing that image to 120KB can cut load time to under 2 seconds — passing all three.
The image format determines the baseline file size for equivalent quality:
| Format | Best for | Relative file size | Browser support |
|---|---|---|---|
| WebP | Everything — photos, illustrations, screenshots | 25–35% smaller than JPEG | All modern browsers |
| AVIF | Photos where maximum compression is needed | 40–50% smaller than JPEG | Chrome, Firefox (not Safari fully) |
| JPEG | Photographs when WebP not available | Baseline | Universal |
| PNG | Images requiring transparency only | Larger than JPEG for photos | Universal |
| SVG | Logos, icons, simple graphics | Tiny for vector graphics | Universal |
Use WebP as your default format for all images except SVG graphics. Most CMS platforms (WordPress with plugins, Shopify natively) can serve WebP automatically. For WordPress, plugins like ShortPixel, Imagify, or WebP Express convert and serve images in WebP format.
Lazy loading — serve images only when needed
Lazy loading not only improves page speed but also reduces unnecessary bandwidth usage, especially on image-heavy pages such as blogs, eCommerce stores, and portfolio websites. Since users often do not scroll to the bottom of every page, loading all images immediately wastes server resources and increases data consumption. By loading images only when they enter the user's viewport, websites deliver a faster and more efficient browsing experience. This can lead to lower bounce rates, improved user engagement, and better overall performance metrics. Modern browsers support native lazy loading, making implementation simple while providing measurable improvements to loading speed and user experience across both desktop and mobile devices.
Adding lazy loading is simple: add the attribute loading="lazy" to your <img> tags. Most modern CMS platforms (WordPress 5.5+, Shopify) do this automatically. Do not apply lazy loading to the hero image or any image that appears above the fold — these need to load immediately for a good LCP score.
Image file names and additional optimisation
- Descriptive file names— "keyword-research-spreadsheet.webp" ranks better in image search than "IMG_2847.jpg". Use hyphens between words, include descriptive terms, and keep it concise.
- Compression before upload— Use Squoosh.app (free, browser-based) or TinyPNG to compress images before uploading to your CMS. Even if your CMS applies compression, starting with an already-compressed file reduces the baseline further.
- Appropriate image dimensions— Never upload a 4000px wide image for a 800px wide content area. Resize images to the maximum size they will be displayed before uploading. Serving an oversized image wastes bandwidth even if the browser shrinks it visually.
- Image sitemaps— For sites where images are important ranking assets (photography, eCommerce), submit an image sitemap to Google Search Console to help Google discover and index all your images.