There's a lot more to Search than 10 blue links. Images show up across the results page, in Google Images, and more and more often as the search itself. Google says people now use Google Lens for nearly 20 billion visual searches every month.

That's an enormous amount of potential website engagement for brands. Yet many website creators don't spend time optimizing the images they use for their site. They believe that a simple alt text line is enough to please Google's complex image SEO algorithm.

But Google's algorithm grows smarter every day.

Fortunately, optimizing your website images for search doesn't require countless hours of implementing complex SEO strategies and formulas. Image optimization for SEO requires a few easy steps. By focusing on such factors as image size, speed, description, and content, you can provide a better user experience and help Google define and organize your images.

Image Optimization for User Experience

While all SEO strategists want their content to rank high on Google, it's important to create content that provides great UX (user experience). The better UX you provide, the higher likelihood of engagement and conversions. That's why the best image optimization includes context, relevance, and site quality.

Let's look at how you can optimize images for user experience.

Consider image placement

Selecting where you place an image on a webpage influences context and relevance the most. Many site creators throw in an image or two in random sections of their web page as a way of breaking up text.

But doing this can end up confusing and distracting your audience.

Images should be placed near the most relevant text to provide context to visitors. This also helps Google serve appropriate images to related search queries.

Use high-quality and unique images

Stock photos are many website owners' go-to's. After all, they're often free, easy to use, and there's bound to be one or two that are relevant to your site.

The problem is that every other website creator is likely doing the same thing, so the stock images you use are probably on ten other sites like yours.

As Google's John Mueller explains, "if you're trying to rank in Google Images, then using the same image as lots of other sites won't do you much good."

As part of your optimization workflow, consider creating your own unique images that are used purely for your site. Investing in high-quality photos can lead to a much higher engagement rate, especially if you have an eCommerce shop where alluring product photos are a necessity.

Make images mobile-friendly

Mobile devices account for more than 60% of global web traffic, so your images have to work on a phone. Google retired its standalone Mobile-Friendly Test in December 2023. Lighthouse and PageSpeed Insights now cover the same ground, flagging oversized images and other mobile issues. For pages that struggle, consider using responsive images that scale to size depending on which device a user accesses it with.

Typically, a combination of HTML, CSS, and Javascript is used to serve the correct size of image based on the device. In HTML, that usually means the srcset and sizes attributes or the <picture> element, with a plain img src as the fallback.

Most sites are already mobile-friendly.

If you're working on a very old site or aren't sure, just adjust the width of your web browser. You should see the images scale as the browser window size changes. You can read more about creating responsive images in this guide.

Don't forget site quality

Image optimization is just one part of a great user experience. Having other high-quality content on your web page further increases its relevance and usefulness. Google's guidance on creating helpful, reliable, people-first content asks whether a page shows real expertise, offers original value, and earns the reader's trust. The more developed your web page is as a whole, the greater the benefit to people, and the more likely that Google will take an interest.

How to Optimize Images for Speed

Images are usually the biggest factor in how fast a page appears to load. The HTTP Archive's 2025 Web Almanac found that an image is the Largest Contentful Paint (LCP) element on 76% of mobile pages and 85% of desktop pages.

LCP is one of Google's Core Web Vitals, so a slow hero image hurts both your visitor and your page experience.

Luckily, there are a number of ways that you can optimize your image for better page load speed.

Choose the right image format

Choosing the right image format is the first step toward an image that loads both swiftly and properly. But how do you determine which image format is best for speed optimization? Start with the Google-supported image formats and pick from there.

  1. WebP: A strong default for photos and graphics. Files are smaller than JPEG or PNG at similar quality, and WebP supports transparency and animation.
  2. AVIF: Often compresses even smaller than WebP. All major browsers now support it, so serve it wherever your CMS or CDN can generate it.
  3. JPEG: The most widely supported format and a safe fallback for photos.
  4. PNG: For screenshots and graphics that need sharp edges or background transparency, when WebP isn't an option.
  5. SVG: Best for any custom logos or icons that can be viewed in different sizes.
  6. GIF: Still supported, but a poor choice for animation (more on that below).

Google can also index BMP files, but there's no reason to use them on the web today. Many sites use the <picture> element to offer AVIF or WebP first, with JPEG as the fallback for older browsers.

Animated GIFs deserve a special warning. They're usually far larger than the same clip saved as video. Google's Lighthouse recommends replacing animated GIFs with MP4 or WebM video, set to autoplay, loop, and stay muted so it behaves like a GIF.

Save GIF for very short, small animations where the file stays light.

Remember image compression rate

Once you have the right format picked out, you also have to consider the image compression rate. Too much image compression can lead to poor image quality, while too little compression will make for an enormous file size. Many photo-editing sites and apps allow you to experiment with compression sizes. Google has provided a guide on compression methods that you can apply to your images, covering terms like lossy compression.

There's no "right answer" for compression. But I'd start at eighty percent quality. You're very unlikely to notice any degradation in image quality, except in the most critical of cases.

Consider using an image optimization plugin if your CMS supports it. Many options can automatically compress images as they are uploaded, creating an efficient workflow.

Pick the right image dimensions

Serving images at the right dimensions keeps them from dragging down page load speed and user-friendliness. Serving over-sized images is a waste of bandwidth and adds unnecessary overhead. Most content management systems will take care of this for you, but you still need an appropriately sized original image to begin with.

The Chrome browser inspection tool can help you quickly determine the appropriate size. The rendered size is the dimensions at which the image is displayed, and the intrinsic size is the size of the image that was uploaded to your CMS. Usually, the intrinsic width shouldn't be more than the rendered one.

The exception to the rule is screenshots where you want visitors to see all the detail that they'll miss in a smaller size image. In these cases, the original high-resolution image can be uploaded and served at a smaller display width, with the option to click through to the full size where details can be seen clearly.

Load images in the right order

How an image loads matters as much as how big it is. Three habits protect your Core Web Vitals.

  • Set width and height. Add width and height attributes (or a CSS aspect-ratio) to every image so the browser reserves space before the file arrives. Without them, text jumps around as images load, which counts against Cumulative Layout Shift (CLS).
  • Lazy-load below the fold, never the hero. loading="lazy" holds back offscreen images until a visitor scrolls near them. Applying it to the main image at the top of the page delays that image and makes LCP worse.
  • Prioritize the hero image. Add fetchpriority="high" to the image most likely to be your LCP element. It tells the browser to fetch that file early instead of waiting until layout is done.

When image compression isn't enough, consider using a CDN (content delivery network). A CDN is a geographically distributed group of servers which work together to provide fast delivery of Internet content. That difference in speed can be quite substantial and the cost is minimal and in some cases free. Read this guide by Cloudflare to learn more.

With a CDN, visitors far from your origin server download images and other static files from a node close to them. GTmetrix explains why that distance matters.

Image SEO for Discovery

Images can't rank on Google, or show up in AI-driven search, if they're not discovered and understood. An image sitemap, semantic markup, and clear context around each image all help.

Use image sitemaps

What's an image sitemap, and how does it help Google discover your images? An image sitemap is an XML sitemap dedicated to listing all the image URLs on a site. A sitemap is essentially a blueprint that helps Google find, understand, and crawl the relevant URLs on your site. Image sitemaps can also list images hosted on a CDN.

Do you need one? Technically, no. You can just submit URLs through Google Search Console. But it's far more efficient to have one, especially when it gets updated automatically as new content goes live.

Many SEO and CMS plugins handle sitemaps automatically among a host of other SEO tasks. This guide from Google on creating a sitemap can be helpful should you need to create one manually.

Consider semantic markup

The phrase "semantic markup" sounds more complicated than it is. It's not some overly complex software that you have to worry about. Semantic markup refers to the content markup, or HTML, of a specific page. It helps humans and search engines better understand the content on a page. That makes it ideal for image optimization.

All HTML should convey information that describes your site for both computers and human beings. Read Google's take on semantic markups for HTML for the best tips and tricks on the matter.

Search systems don't judge an image on its pixels alone. They read everything around it. According to Google's image SEO guidance, captions, image titles, and the text near an image all help Google work out what the image is about.

As more searches start with a camera or a screenshot, and more answers come from AI systems that summarize pages, that context does double duty. It helps image search rank the image, and it helps any system reading the page understand what the image shows and why it's there.

So name your files descriptively. blue-trail-running-shoe.jpg tells a crawler something. IMG_00023.jpg tells it nothing.

Write captions where they help the reader. A caption gives people context and gives machines a plain-language label for the image.

And keep each image next to the text it supports. An image that sits beside the paragraph explaining it borrows that paragraph's meaning. An image dropped in to break up text borrows nothing.

Unique images help here too. When ten sites use the same stock photo, nothing about it signals that your page is the source worth showing.

SEO Image Optimization for Indexing

There are a few things you can do to help Google index your images accurately.

Get descriptive

Descriptive titles, captions, and file names help Google and people understand your images. Write them in plain language that matches how someone would describe the image, and use the terms people actually type into a search engine where they fit naturally. Separate words in file names with hyphens rather than underscores, as Google recommends for URLs. Every word you use should help someone understand what they're looking at.

Incorporate structured data

To help you achieve rich results on Google, include structured data on pages with images where possible. With rich results, Google can provide badges that give users further relevant information about your page while they're performing an Image Search. Google introduced badges for products, videos, and recipes when it launched the feature, and each of these types needs the image property to qualify.

Google also has in-depth structured data guidelines that outline the entire process of incorporating structured data into your image SEO, which you can read more about here. The most important tips are to keep your information and data up-to-date, and don't make up irrelevant data that may be misleading to users.

Write alt text for people first

Alt text exists so people who can't see an image still get its meaning. Screen readers announce it, and browsers display it when an image fails to load. Google also uses it, along with the surrounding text, to understand what an image shows and how it relates to the page.

Write for the first group and you serve the other two.

Good alt text describes what the image means in context, not just what's in it. Our guide to alt text that makes meaning obvious to humans and machines breaks this into a simple formula: subject, action, attribute, and purpose.

There are a few key tips for writing good alt text.

  • Describe, don't stuff. Name what the image shows and why it's on the page. If the natural description includes a term your page is about, that's fine. Never add keywords that don't describe the image.
  • Keep it short. A sentence or less is usually enough. If an image needs a longer explanation, as a chart or diagram often does, put that explanation in the caption or body text.
  • Get rid of unnecessary phrases. Never start an alt tag with phrases like "This is an image of ____" or "This is a picture of ____." Screen readers already announce that it's an image, so the phrase is redundant. Go straight to the source of the image for brevity and clarity.
  • Leave decorative images empty. If an image is purely decorative, give it an empty alt attribute (alt="") so screen readers skip it. Don't leave the attribute out entirely. Without it, some screen readers read out the file name instead.

Does Google index CSS images? It's a common indexing question.

No.

Google doesn't index CSS images, and Google's John Mueller has said you're better off using normal image tags with an alt attribute that describes the image.

The Takeaway

Image SEO isn't a separate discipline. It's the same job as the rest of the page: make the meaning obvious, then get out of the visitor's way.

Get format, size, and load order right so your images arrive fast. Then write context and alt text for people, and search engines and AI systems will understand your images too.