Image SEO: File Names, Alt Text, Compression and Formats
A Shopify store selling handmade jewellery once asked me why their product pages loaded so slowly on mobile. The answer was a single hero photo: a 6 MB JPEG straight off a camera, scaled down with CSS. Nobody had noticed because it looked fine on office Wi-Fi. That's image SEO in a nutshell. Half of it is helping Google understand your images, and the other half is making sure they don't wreck the page.
Why images matter for SEO
- Image search traffic. For visual products, recipes, home decor, travel and fashion, Google Images and image results inside regular search can send real visitors.
- Page experience. Images are often the largest element on a page. Heavy images slow down load times and hurt Largest Contentful Paint, one of the Core Web Vitals.
- Context. Alt text and surrounding content help Google understand the page as a whole.
- Accessibility. Screen reader users rely on alt text. This is a reason on its own, quite apart from rankings.
File names
Name the file before you upload it. IMG_20240314_0932.jpg tells Google nothing. blue-pottery-vase-jaipur.jpg tells it exactly what's in the image.
- Use lowercase and hyphens.
- Describe the image in a few words.
- Don't stuff keywords:
vase-vases-buy-vase-online-cheap-vase.jpghelps no one.
On large stores, renaming thousands of existing files isn't worth the effort. Do it for new uploads and for your most important pages.
Alt text
Alt text is the description that appears when an image can't load and that screen readers read aloud. Write it for a person who can't see the image.
| Image | Weak alt text | Useful alt text |
|---|---|---|
| Product photo | "vase" | "Hand-painted blue pottery vase with floral pattern, 30 cm" |
| Recipe step | "cake" | "Rava cake batter poured into a greased steel tin" |
| Chart | "chart" | "Bar chart of monthly organic visits rising from January to June" |
| Team photo | "team" | "Five members of the design team in the Jaipur studio" |
A few rules:
- Be specific, but keep it to a sentence.
- Include the keyword only if it naturally describes the image.
- Purely decorative images, like background patterns or divider lines, should have empty alt text (
alt="") so screen readers skip them. - Don't start with "image of" or "picture of". Screen readers already announce it as an image.
Compression and size
This is where most of the gains are.
Resize before uploading
If your content area is 800 pixels wide, uploading a 4,000-pixel image wastes bandwidth. Export at roughly the largest size it will be displayed, or twice that for sharp screens if you're serving responsive images.
Compress
Tools like Squoosh, TinyPNG, or your CMS's built-in optimiser can cut file sizes dramatically with little visible loss. For most photos, a quality setting around 75 to 85 looks fine.
Use modern formats
WebP is supported by all major browsers and is usually much smaller than JPEG at similar quality. AVIF can be smaller still, though encoding takes longer and some older tools don't handle it. Many CDNs and platforms like Shopify and Cloudflare can convert formats automatically, which is the easiest route.
Serve responsive images
The srcset attribute lets the browser pick a smaller file for a phone and a larger one for a desktop. Most modern themes and frameworks do this for you; check that yours does.
Loading behaviour
- Lazy load images below the fold with
loading="lazy". The browser fetches them only as the user scrolls. - Don't lazy load the main image at the top of the page. That delays your largest visible element and can worsen LCP. This is a common mistake with lazy-loading plugins that apply to everything.
- Set width and height attributes so the browser reserves space. This prevents layout shift as images load.
Getting images indexed
Google needs to find your images in the HTML. Images loaded only through CSS backgrounds or certain JavaScript galleries may not be indexed as images. For important product or portfolio images, use a standard <img> element.
Place images near relevant text. A photo of a blue pottery vase next to a paragraph about blue pottery gives Google more context than the same image floating in a carousel with no copy.
If you have many images, include them in your XML sitemap or a separate image sitemap. Most SEO plugins can do this; our sitemap generator creates a basic sitemap you can extend.
Original images vs stock photos
Stock photos aren't penalised, but they don't help you stand out either, and the same image appears on hundreds of sites. Original photos of your products, your shop, your team or your process are more likely to show up in image search and give readers a reason to trust the page. For a travel blog, your own photos from the trail are worth far more than a generic sunset.
A quick image audit
- Run your key pages through PageSpeed Insights and look for image-related suggestions.
- Check the largest image on each page and its file size.
- Spot-check alt text on product and category pages.
- Confirm the hero image is not lazy-loaded.
Image work is part of broader page speed optimization, and it belongs on every pre-publish on-page SEO checklist. Start with the five pages that get the most traffic and fix their largest images first.