How to Optimize Images for SEO

To optimize images for SEO, make them discoverable in HTML, serve appropriately sized responsive files, use descriptive filenames and contextual alt text, and keep image weight in balance with useful quality. Add representative metadata when appropriate, then measure the whole page. These practices help search systems and people understand and access your images; none guarantees indexing, a particular preview, or higher rankings.

1. Make images discoverable to search engines

Use a standard HTML <img> element for content images. Google can find images referenced in an image element’s src, including an img nested inside picture. Google says it does not index CSS background images, so reserve backgrounds for decoration rather than images that matter to the page.

<img src="/images/ceramic-coffee-mug.webp"
     alt="Blue ceramic coffee mug on a wooden table"
     width="900" height="600">

Keep image URLs accessible to crawlers and users. If the images on a site may be hard to discover through page links, an image sitemap can expose their URLs. Image sitemap entries can use image URLs hosted on another domain; if you use a CDN, Google encourages verifying that CDN domain in Search Console so you can receive crawl-error information. When the same image is reused across a larger site, a consistent URL can help Google cache and reuse it.

2. Serve responsive image variants

A desktop-sized image need not be downloaded by every mobile visitor. Use srcset to offer width variants, or use picture when you need source selection by format or media condition. In both cases, provide a fallback img with a src.

<img
  src="/images/ceramic-coffee-mug-900.webp"
  srcset="/images/ceramic-coffee-mug-480.webp 480w,
          /images/ceramic-coffee-mug-900.webp 900w,
          /images/ceramic-coffee-mug-1400.webp 1400w"
  sizes="(max-width: 600px) 100vw, (max-width: 1100px) 80vw, 900px"
  width="900" height="600"
  alt="Blue ceramic coffee mug on a wooden table">

The browser uses the candidates and the sizes hint to select an appropriate source for the layout and display. Make sure each file’s real dimensions match the width descriptor you declare. A mismatched descriptor can lead to poor source selection.

Use picture if offering alternate formats or art direction. Keep a working fallback:

<picture>
  <source type="image/avif" srcset="/images/mug.avif">
  <source type="image/webp" srcset="/images/mug.webp">
  <img src="/images/mug.jpg" width="900" height="600"
       alt="Blue ceramic coffee mug on a wooden table">
</picture>

3. Choose a suitable format, size, and quality

Google lists BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF as supported image formats when referenced in an img src. There is no single format that is best for every image and site. Choose based on the image’s useful detail, file weight, audience, and delivery setup. Keep the filename extension consistent with the actual format.

Resize files to dimensions appropriate for their rendered use; avoid sending a huge original when a smaller variant preserves the needed detail.
Compare visual quality and file size at the export settings you intend to ship.
Use responsive variants when different devices or layouts call for substantially different dimensions.
Do not convert every asset blindly: inspect the result, especially for graphics where sharp edges, transparency, or fine detail matter.

Data URIs can reduce HTTP requests, but Google notes that inlining images can considerably increase page size. Consider the total document weight before embedding large image data directly into HTML.

4. Write useful filenames and alt text

Use short descriptive filenames when practical, such as blue-ceramic-coffee-mug.webp, instead of generic names like image1.jpg. Place images near relevant text on a page that is genuinely about the image subject.

Write alt text that describes the image usefully in its page context. For example, if the image shows the result of a tutorial step, describe that result rather than stuffing in search phrases. Alt text helps search systems interpret the image and supports people using screen readers or low-bandwidth connections. If an image is purely decorative and conveys no information, use an empty alt value (alt="") so assistive technology can skip it.

<!-- Informative image -->
<img src="/images/mug-glazing.webp"
     alt="A blue glaze being brushed onto the mug before firing">

<!-- Decorative flourish -->
<img src="/images/section-divider.svg" alt="">

Google identifies alt text as important image metadata and also notes its accessibility value. Avoid repeating keywords that do not help someone understand the image.

5. Add representative image metadata where it helps

For a page’s representative preview image, you can provide an og:image tag and Schema.org image properties such as primaryImageOfPage attached to the main entity. Choose an image that represents the page, with a sensible aspect ratio; avoid using a generic logo as the only representative image.

<meta property="og:image" content="https://example.com/images/mug-guide.webp">

Metadata is a signal, not a command. Google selects image previews automatically, so these properties do not guarantee which image appears. Structured data may make a page eligible for certain Google Images rich result features when the relevant guidelines are met, but eligibility is not guaranteed display.

6. Measure image impact at page level

Images can contribute substantially to page size, so assess their effect on the complete page rather than treating the file format as the only performance factor. Google’s Core Web Vitals targets are LCP within 2.5 seconds, INP below 200 milliseconds, and CLS below 0.1. These are page experience targets, not image-specific ranking promises.

Use PageSpeed Insights to analyze the page and identify loading or layout issues.
Review the Core Web Vitals report in Search Console for page performance patterns.
Check that image dimensions and responsive variants fit the layout and device sizes you serve.
Recheck visual quality after compression; a smaller file is not useful if it loses important detail.

Set width and height attributes when the image’s intrinsic dimensions are known. This gives the browser layout information and helps avoid shifts as images load. Performance depends on the full page, its resources, and its delivery path; image optimization alone cannot promise a particular Core Web Vitals result.

7. Troubleshooting common image SEO problems

Symptom	Likely cause	What to check
Important image is not discoverable	It is only a CSS background, or the page does not expose a crawlable image reference.	Use an HTML `img` with a valid `src`; consider an image sitemap for URLs otherwise hard to discover.
The wrong responsive file loads	`srcset` width descriptors or the `sizes` layout hint do not match actual dimensions and display size.	Verify each candidate’s pixel width and that `sizes` reflects the rendered layout.
Image is missing in a browser or crawler	Broken URL, inaccessible host, or incorrect filename extension for the actual format.	Open the exact image URL, check server access, and align extension with file content.
Page remains heavy	Images are oversized, too many large variants are loaded, or data is inlined into the document.	Right-size files, provide responsive sources, and assess total page weight including inlined data.
Image preview differs from the preferred one	Search systems select previews automatically.	Use representative `og:image` and Schema.org image metadata as guidance, while recognizing selection is not guaranteed.
Alt text reads like a keyword list	Text was written for queries rather than to describe the image.	Rewrite it as a concise, contextual description; use empty alt for decorative images.
Layout shifts when an image appears	The browser did not have dimensions to reserve space before loading.	Provide the correct width and height attributes and check the page’s layout behavior.

8. A practical image SEO checklist

Content images use an HTML img element with a working src.
Responsive variants have correct descriptors and a fallback source.
Format, dimensions, and quality suit the asset and audience; no format is assumed universally best.
Filenames are descriptive where practical, and extensions match actual formats.
Alt text describes informative images in context and does not stuff keywords; decorative images have empty alt text.
Image placement is relevant to the surrounding page content.
Representative metadata is accurate, while preview selection expectations remain realistic.
Page speed and Core Web Vitals are measured with page-level tools.

Or skip the browser setup

If you are collecting reference screenshots while auditing image rendering, ScreenshotNeo can return a screenshot or PDF from one API request. It can also capture a full page with lazy images loaded or a selected element. See the API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, no card required.

FAQ

Does adding alt text guarantee that Google indexes an image?

No. Alt text provides useful image context and accessibility information, but it does not guarantee indexing or rankings.

Should every image have a non-empty alt attribute?

No. Describe informative images. For purely decorative images, an empty alt value helps assistive technology skip them.

Which image format is best for SEO?

There is no universally best format. Choose a supported format that preserves the image’s useful detail at a suitable file weight for your site.

Will `og:image` force a specific Google preview?

No. It can indicate a preferred representative image, but Google chooses previews automatically.

Can Google index images loaded through CSS?

Google says it does not index CSS background images. Use an HTML image element for content images you want it to discover.