Image SEO for Google Images: alt text, file names, formats, responsive markup and image sitemaps

Why does image SEO matter for traffic, trust and conversions?

Images attract clicks in Google Images and in regular results, help searchers judge pages quickly and carry key product, location and process information. Done well, image SEO adds a discovery channel and improves the quality of every page that includes pictures.

Where do images show up in Google?

In Google Images, in rich and visual results such as product listings, in recipe, video and article features, in Discover, in Lens-style visual searches and as thumbnails beside web results. Each surface relies on the same basics: Google must be able to crawl the image, understand what it shows and judge that the page it sits on is relevant.

Is Google Images traffic valuable?

It depends on the business. Visual industries such as furniture, fashion, food, travel and home improvement gain much more than a law firm. For service businesses, images mainly build trust on the page and in the Business Profile.

How do images support conversions and trust?

Real photographs of your team, premises and completed work signal that the business exists and does what it claims. Original product photos reduce returns and questions. Stock imagery has a place, but it carries less trust than genuine photographs, which also connects to the first-hand experience described in the guide to E-E-A-T for local professionals.

Should you use stock photos?

Sparingly, with accurate alt text and honest captions. This site uses licensed photographs and credits their source in its image data, while never presenting them as the business's own work.

How do images relate to page experience?

Images are often the largest files on a page, so they drive Largest Contentful Paint and layout stability. Well-optimized images improve user experience and indirectly help SEO, as the explanation of Core Web Vitals shows.

Can an image hurt a page?

Yes. Oversized files slow loading, missing dimensions cause layout shifts and irrelevant or misleading images reduce trust.

How should you add images so that Google can find them?

Use standard HTML image elements with a src attribute that points to a real image file. Google's guidance says it crawls images through these elements and reads the src, and that it does not index images referenced only in CSS.

Which image techniques are safe and which are risky?

Technique	Discoverable by Google?	Notes
img element with src	Yes	The standard approach
picture element with source and img fallback	Yes	Always include an img with src as the fallback
img with srcset	Yes	Keep a normal src as well
CSS background-image	No	Use only for decoration, never for content images
Image loaded only after a click or script event	Risky	Google does not trigger interactions
Image inside canvas or generated client-side	Unreliable	Serve a real image file for important visuals

Why do CSS background images not count?

Because CSS describes presentation, not content. If an image carries meaning, such as a product photo or a diagram, it belongs in an image element so that it can have alt text and a crawlable URL.

How do you handle images in JavaScript frameworks?

Make sure the rendered DOM contains image elements with real src values, not placeholders that load later through an event. Verify in the URL Inspection tool's rendered HTML. The rendering checks in the guide to Googlebot, rendering and the DOM apply directly to images.

What about lazy-loaded images?

Standard lazy loading, using the loading attribute or an Intersection Observer, is fine because images load as they enter the viewport. Do not lazy-load the main hero image, which should load immediately, and do not require interaction to load images, which matters for mobile as the notes on mobile-first indexing explain.

Where should the image live on the page?

Near the text that explains it. Google uses surrounding text, captions, headings and the page's topic to understand an image. An image placed in a section about the subject gives stronger relevance than one dropped in a footer.

Do you need a caption for every image?

No, but captions are read by many visitors and give extra context. Use them when they add information, such as what the image shows and why it matters.

How do you write alt text that helps users and search engines?

Write alt text that describes what the image shows and why it appears on this page, in a short natural phrase. Google calls alt text the most important image metadata, and its guidance asks for useful, information-rich text that fits the context and avoids keyword stuffing.

What does good alt text look like?

Image	Weak alt text	Better alt text
Photo of a technician repairing a boiler	boiler repair boiler service best boiler repair near me	Gas engineer testing the pressure valve on a wall-mounted boiler
Product photo of hiking boots	boots	Brown leather waterproof hiking boots, side view
Chart of monthly organic clicks	chart	Line chart showing organic clicks rising from 1,200 to 2,100 over six months
Decorative divider	divider line image	(empty alt attribute, because the image is decorative)
Team photo	team	The Leeds clinic team standing outside the entrance

When should alt text be empty?

For purely decorative images that add no information, use an empty alt attribute so that screen readers skip them. Do not leave the attribute out entirely, because assistive technology may read the file name instead.

How long should alt text be?

Short enough to be useful, usually a single phrase or sentence, and long enough to convey the point. There is no strict limit, but very long alt text becomes noise. Complex charts and diagrams can have a short alt text plus a longer description in the page body.

Should alt text start with "image of"?

No. Screen readers already announce an image, so start with the content itself.

How do you use keywords and entities in alt text responsibly?

Include the main subject and relevant entities naturally, such as a product name, a place or a tool, because that is what the image shows. Avoid repeating the same phrase across every image on a page, or listing keywords, which Google's guidance specifically warns against. If the description would make sense to a person who cannot see the image, it is probably right.

Does alt text help accessibility as well?

Yes, and accessibility is the original purpose. Good alt text serves screen reader users first, and search benefits follow naturally.

Which file names and formats work best?

Use short, descriptive file names with words separated by hyphens, choose a supported format that suits the image and make sure the file extension matches the real type. Google lists BMP, GIF, JPEG, PNG, WebP, SVG and AVIF as supported formats.

How should you name image files?

Prefer "gas-boiler-pressure-valve.jpg" over "IMG_4821.jpg" or "image1.jpg". Google's guidance asks for short, descriptive names, and recommends translating file names when you localize a page. Avoid stuffing keywords into long names, and avoid changing file names after publication, because the URL changes and can cause a temporary loss of visibility.

Do file names affect rankings strongly?

They are a small signal, but a helpful one, and they make your media library easier to manage. The value is clarity more than ranking power.

Which format should you choose?

Format	Best for	Notes
JPEG	Photographs	Widely supported, adjustable quality
WebP	Photographs and graphics	Smaller files than JPEG or PNG at similar quality
AVIF	Photographs, high compression	Very efficient, with a fallback for older browsers
PNG	Graphics with transparency or sharp edges	Larger files, use sparingly for photos
SVG	Logos, icons, simple illustrations	Scales without loss, tiny files
GIF	Simple animations	Large files, consider video instead

Should you convert everything to AVIF?

Not necessarily. Use modern formats where your tooling and browser support allow, and keep a JPEG or PNG fallback through the picture element. Consistency and correct delivery matter more than the newest format.

How do you size and compress images?

Resize images to the largest size they will display at, compress them to a sensible quality, strip unnecessary metadata and serve different sizes to different screens with srcset. A hero image of 1,280 pixels wide at moderate quality is plenty for most layouts. Oversized originals waste bandwidth and hurt loading, which matters for responsiveness and interaction metrics as well as Largest Contentful Paint.

What is a sensible quality setting?

Test by eye. Many photographs look fine at a quality setting around 75 to 85 for JPEG, and the savings over maximum quality are large.

How do responsive images, srcset and the picture element work?

Responsive images let the browser pick the best file for each device. Google's guidance recommends srcset or the picture element, and insists on a fallback src on the img element so that every crawler and browser has a usable default.

What does responsive markup look like?

<img src="/images/gas-boiler-800.jpg"
     srcset="/images/gas-boiler-400.jpg 400w,
             /images/gas-boiler-800.jpg 800w,
             /images/gas-boiler-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="533"
     alt="Gas engineer testing the pressure valve on a wall-mounted boiler"
     loading="lazy">

The example is illustrative. Replace file names, sizes and alt text with your own, and remove lazy loading for the main hero image.

Why are width and height attributes important?

They let the browser reserve space before the image loads, which prevents layout shifts and protects your Cumulative Layout Shift score.

When should you use the picture element?

When you want different formats or crops for different conditions, for example AVIF with a JPEG fallback, or a tighter crop on mobile. Always include an img element inside the picture element with a normal src, because that is what Google reads and what older browsers display.

Does changing image URLs between desktop and mobile cause problems?

It can. Google's mobile-first indexing guidance warns that different image URLs on mobile may cause a temporary image traffic loss. Prefer one set of URLs and let srcset choose sizes.

How do content delivery networks fit in?

A CDN serves images quickly from nearby servers and can resize and convert formats on the fly. Google accepts images hosted on other domains, and image sitemaps can list them. Keep URLs stable, allow Googlebot to crawl them and avoid access rules that block it. The delivery principles in the notes on server response time and crawl frequency apply to image hosts as well.

Should you block image hotlinking?

You may, but make sure the rules still allow Googlebot to fetch the images, and consider the lost exposure.

When do image sitemaps and structured data help?

Image sitemaps help Google discover images it might otherwise miss, such as those loaded by scripts or hosted on a CDN, and structured data with an image property helps pages qualify for visual badges and rich results. Both are supporting tools, not substitutes for good HTML.

How do image sitemaps work?

You can add image entries to an existing XML sitemap, listing the page URL and the image URLs on it. Google's guidance says image sitemaps can include URLs from other domains, which suits CDNs. They do not guarantee indexing, but they improve discovery. The principles of keeping sitemaps accurate appear in the guide to XML sitemap best practices.

Do small sites need an image sitemap?

Usually not, if images are in standard image elements on crawlable pages. They are most useful for large catalogs and script-heavy pages.

Which structured data matters for images?

Google says the image property is required for eligibility for Google Images badges and rich results on relevant types, such as Product, Recipe and Article. Provide high-resolution images in multiple aspect ratios where the feature guidelines ask for them, keep markup consistent with visible content and validate with the Rich Results Test. For products, align feed and markup images as the comparison of Merchant Center feeds and structured data explains.

What about the og:image tag?

It controls the image shown when pages are shared and can also be a signal for the page's primary image. Use a high-quality image that matches the page, with accurate alt text in the page itself.

How do you signal the main image of a page?

Place the key image prominently near the top, mark it up where relevant types allow, and make sure it is crawlable and not blocked by robots.txt. Google may use it as the thumbnail in results, so choose an image that communicates the page's topic.

Can you stop images from appearing in search?

Yes, with robots.txt rules for image files or noindex-style controls, but use them only for images you really want hidden, since they reduce visibility.

How do images affect speed, Core Web Vitals and mobile users?

Images are usually the heaviest assets on a page, so they dominate loading time and layout stability. Optimizing them is often the quickest way to improve Largest Contentful Paint and Cumulative Layout Shift, and it helps mobile visitors on slow connections.

How do you protect Largest Contentful Paint?

Identify the largest above-the-fold image, usually the hero, serve it at the right size, do not lazy-load it, preload it where useful and avoid render-blocking resources ahead of it. Use a fast server and CDN. Lazy-load images further down the page instead.

Should you use fetchpriority for hero images?

It can help the browser prioritize the main image. Test the effect with real measurements before and after.

How do you prevent layout shifts from images?

Set width and height attributes, or use CSS aspect-ratio, so space is reserved. Avoid inserting images above existing content after load, and be careful with ads and embeds that resize.

How do you audit image weight?

Use Lighthouse, PageSpeed Insights and a crawl that reports image file sizes. Sort by size, fix the biggest files first and set a budget for template pages.

What is different for mobile?

Serve smaller files to small screens, avoid hiding content images on mobile, keep the same alt text and file names across versions and test on real devices. The advice in mobile-first indexing best practices covers the parity requirements that apply to images.

Does image compression reduce quality too much?

Not when done sensibly. Compare original and compressed versions at actual display size, and choose the smallest file that still looks right.

How do images work for local businesses and online stores?

Local businesses use images to prove they are real and capable, while online stores use them to sell products and earn visual search traffic. Each needs a slightly different approach, built on the same technical basics.

What should local businesses focus on?

Authentic photographs of the premises, the team, vehicles and finished work, uploaded both to the website and to the Business Profile, with accurate alt text and consistent naming. Add location context in captions and surrounding copy instead of stuffing place names into every alt attribute. A steady flow of new photographs also keeps the profile looking active, which supports the engagement patterns discussed in the diagnosis of falling calls with stable rankings.

Should website photos match Business Profile photos?

They should show the same real business, but they do not need to be identical. Use the profile for fresh, informal photos and the site for curated, well-optimized ones.

What should online stores focus on?

Multiple high-quality product images per item, consistent backgrounds, zoomable views, descriptive file names that include the product name and key attribute, alt text that mentions colour, material and view, and image URLs that stay stable across product updates. Keep product markup and feed images aligned, and give each variant its own image where the variant looks different.

How do you handle thousands of product images?

Generate file names and alt text from product data fields, review the top sellers by hand and use automated compression and resizing in your pipeline. Spot-check quality rather than trusting automation blindly.

How do category and listing pages use images?

Thumbnails should be compressed, sized correctly and lazy-loaded below the fold, with alt text that identifies the product. Avoid loading hundreds of full-size images in a grid, which harms speed and responsiveness, a problem that the analysis of JavaScript-based filters and content visibility touches on for filtered grids.

Should category lifestyle banners be images or CSS?

If the banner carries meaning, use an image element with alt text. If it is purely decorative, a CSS background is fine.

What about licensing, originality and safe content?

Use images you have the right to use, credit them where the license requires and prefer original photographs for pages that need to show real experience. Google also applies SafeSearch filtering, so inappropriate imagery can limit visibility.

How should you handle licensed and stock images?

Keep a record of where each image comes from, its license terms and any attribution requirement. Free libraries such as Pexels allow commercial use without attribution under their license, but you should still check each license and avoid implying that stock photos show your own work. A simple data file listing source, alt text and caption keeps this manageable, as we do for the photographs on this site.

Can you mark up image license information?

Google supports licensable image metadata for some features. Use it where it applies and keep it accurate.

Why do original images matter?

Original photographs show real experience, which supports trust. They are also harder for competitors to copy. For local businesses, authentic images of the team, premises and completed work, tied to the Business Profile, support the signals described in the guides to Business Profile optimization and map pack visibility.

How should you handle photos of people?

Get written permission, especially for patients, clients and children, and follow the rules of your profession on testimonials and before-and-after images.

What about AI-generated images?

Label generated illustrations honestly and avoid presenting them as real photographs of your work, particularly for health, legal and financial services. Google's guidance on helpful content also advises disclosing how content was created where readers might wonder.

Do you need to disclose edited photos?

If an edit changes what the image claims to show, such as results or products, disclose it or avoid it.

What is a practical image SEO audit?

Crawl the site for images, check alt text, file names, formats, dimensions and file sizes, confirm that important images appear as image elements in the rendered HTML and review Search Console for image-related search data. The audit finds quick wins quickly.

What are the steps?

1. Crawl with image reporting on, and export image URL, file size, dimensions, alt text and the pages that use each image.
2. Flag images with missing or duplicate alt text, generic file names and files over your size budget.
3. Check the rendered HTML for content images that appear only as CSS backgrounds or after interaction.
4. Confirm formats, fallbacks and responsive markup on key templates.
5. Review lazy loading: hero images should not be lazy, lower images should be.
6. Inspect a few URLs with the URL Inspection tool to confirm Google sees the images.
7. Review the Performance report with the Image search type for impressions and clicks.

Which fixes bring the biggest return?

Compressing the largest hero and product images, adding missing dimensions and writing meaningful alt text for important images. Start with templates that carry the most traffic.

How do you track results?

Use the Search Console Performance report with the search type set to Image, compare periods, and watch Core Web Vitals for improvements in loading and stability. Keep a log of changes, because image changes can take weeks to be reprocessed.

How long until image changes show up?

Google needs to recrawl and reprocess images, which can take days to weeks, and longer for large sites. Set expectations accordingly, in line with the realistic timelines in the guide to how long SEO takes.

What does an image SEO clean-up look like in practice?

This is a fictional example that illustrates the method. The outcomes are invented.

What was the situation?

A fictional furniture retailer had 4,000 product images. Many had names such as IMG_2231.jpg, alt text was missing on about half, the hero images were 3 MB each, and the category grid used CSS background images for lifestyle photos.

What did the audit find?

A crawl showed the average product page transferring 6 MB of images, with Largest Contentful Paint over four seconds on mobile. Search Console showed little Google Images traffic for products that should have been visual winners.

What did they change?

They renamed images with product names and attributes, wrote alt text from product data, converted heroes to WebP with JPEG fallbacks through the picture element, served three sizes with srcset, added width and height attributes, replaced CSS background lifestyle images with image elements, stopped lazy-loading hero images, added an image sitemap for the CDN-hosted catalog and aligned feed and markup images. They monitored image impressions, page speed and enquiries for three months and recorded that other seasonal changes also affected traffic.

What did they learn?

Most of the gain came from fixing what Google could not see and what visitors had to wait for, not from clever tricks.

Which image SEO mistakes should you avoid?

Most mistakes are about hiding images from Google or making users wait. All are fixable with templates and a short checklist.

What do sites get wrong most often?

Using CSS background images for content, leaving alt text empty or stuffed with keywords, keeping camera file names, serving oversized files, lazy-loading the hero image, omitting dimensions, changing image URLs without redirects, blocking images in robots.txt and using different images on mobile and desktop.

Which mistake is the most common?

Missing or generic alt text. It is easy to fix at the template level by generating alt text from structured product or content data, then editing important images by hand.

How do you keep images healthy over time?

Add image rules to your publishing checklist: descriptive name, compressed size, dimensions, alt text and license record. Review the largest images quarterly. The routine fits within the technical SEO audit checklist.

Who owns image quality?

Content editors choose and describe images, and developers enforce formats, sizes and responsive delivery in templates.

How does AH SEO Agency help with image SEO?

We crawl your images, fix alt text, file names, formats and responsive markup in your templates, set up image sitemaps and structured data where they help, and measure the effect on speed, Google Images visibility and enquiries. We use only images you have the right to use and describe them honestly.

Where do you start?

Ask for a technical SEO review, add on-page SEO improvements or request a free SEO audit that includes an image check.

Summary: how do you win with image SEO?

Use real image elements, write useful alt text, name files descriptively, serve modern formats at sensible sizes with responsive markup, list important images in a sitemap and keep pages fast.

• Google crawls images in HTML image elements and does not index CSS images.
• Alt text is the most important image metadata.
• Supported formats include JPEG, PNG, WebP, SVG, AVIF, GIF and BMP.
• Responsive images need a fallback src, and hero images should not be lazy-loaded.
• Audit images regularly for size, alt text and discoverability.