Most websites are full of images: product photos, team pictures, charts, logos. But many beginners upload them straight from the phone or camera and never think about them again. Then they ask me: "Can my images bring visitors from Google, and can they slow my site down?" The answer to both is yes.
In this lesson, I will explain how Google understands images, how to write alt text, how to name image files, which formats and sizes to use, and how lazy loading and image sitemaps fit in. By the end, you will be able to take any image and prepare it properly before it goes on your site.
This lesson builds on the previous one about internal linking, because alt text also works as the link text when an image is a link.
Why does image SEO matter?
Image SEO means preparing your images so search engines can understand them and so they load fast for visitors. It helps in three ways:
- Visibility in Google Images and other results. Many people search with images, especially for products, recipes, designs and places. A well-prepared image can bring them to your page.
- Better understanding of your page. Images with good descriptions add context about what the page covers.
- Faster pages. Google's image SEO best practices note that images are often the largest contributor to overall page size. Heavy images make pages slow, and slow pages frustrate visitors.
There is also an accessibility side. People with poor sight use screen readers that read alt text aloud. Good image SEO and good accessibility usually go hand in hand.
How does Google understand an image?
Google can't "see" an image the way you do, so it collects clues. According to its image guidance, Google looks at the page content around the image, including captions and image titles, and at the image's own details like its alt text and file name.
Here are the basics Google asks for:
- Use a normal HTML image element. Google finds images in the
srcattribute of an<img>element. It doesn't index CSS background images. So if an image matters for search, don't set it only as a background in your design. - Place images near relevant text. Google suggests placing images near text that relates to them, on pages that are about the same subject.
- Use sharp, high-quality images. Google says clear, high-quality images appeal more to users and can attract more clicks from thumbnails.
Think of it like a museum. A painting with a clear label next to it, in a room about the same artist, is easy to understand. A painting with no label, hidden in a storeroom, isn't.
How do you write good alt text?
Alt text (short for "alternative text") is a short written description of an image, added in the code. Visitors don't usually see it, but screen readers read it aloud, browsers show it if the image fails to load, and Google uses it to understand the image. Google's image guidance calls alt text the most important attribute when it comes to adding image metadata.
In code, it looks like this:
<img src="royal-delicious-apples-crate.jpg" alt="Wooden crate of red Royal Delicious apples from Himachal">In WordPress, Shopify, Wix and most other platforms, you just fill in an "Alt text" field when you upload or edit the image.
Google's SEO Starter Guide says alt text should be short but descriptive, and explain how the image relates to your content. Here are my practical rules:
- Describe what is in the image, as you would to a friend on the phone.
- Be specific. "Dalmatian puppy playing fetch" is far better than "dog."
- Keep it short, usually one simple phrase or sentence.
- Don't stuff keywords. Google warns that keyword stuffing in alt text creates a bad experience and may make your site look like spam.
- Don't start with "image of" or "picture of." Screen readers already announce it as an image.
- Purely decorative images, like a divider line, don't need a description. Use an empty alt attribute (
alt="") so screen readers skip them. - For linked images, describe where the link goes, because Google uses the alt text as the link's anchor text.
| Image | Weak alt text | Better alt text |
|---|---|---|
| Product photo of a blue backpack | (missing) | Navy blue 30-liter hiking backpack with side pockets |
| A puppy playing | puppy dog puppies dog puppy cute puppy best puppy | Dalmatian puppy playing fetch on grass |
| Chart in a blog post | chart | Bar chart of monthly website visits from January to June |
| Team photo on About page | image of team | Five members of our support team in the Chandigarh office |
| Logo linking to home page | logo | GreenGarden home page |
| Decorative swirl | decorative swirl graphic design element | (empty alt, so screen readers skip it) |
All of these are invented examples. For more on writing alt text, read our post on alt text for SEO and accessibility.
File names, formats, sizes and loading
Give your files descriptive names
Google says file names can give it light clues about what an image shows. Its example is that my-new-black-kitten.jpg is better than IMG00023.JPG. So before uploading, rename the file in a few words, in lowercase, with hyphens between words, just like the SEO-friendly URLs you learned about. Avoid generic names like image1.jpg.
Choose a supported format
Google Search supports images in BMP, GIF, JPEG, PNG, WebP, SVG and AVIF formats. Google also suggests making the file name extension match the file type. Here is a simple way to choose:
| Format | Good for | Note |
|---|---|---|
| JPEG | Photos | Widely supported, small files at decent quality |
| PNG | Screenshots, graphics with sharp edges, transparency | Files can be large for photos |
| WebP | Photos and graphics | Modern format, usually smaller than JPEG or PNG at similar quality |
| AVIF | Photos and graphics | Newer format, often even smaller files |
| SVG | Logos, icons, simple illustrations | Stays sharp at any size |
| GIF | Simple animations | Large files; short videos are often lighter |
Many platforms and plugins now convert images to WebP or AVIF for you. Our post on WebP and AVIF image formats explains when to use each.
Resize and compress before uploading
A photo from a modern phone can be several megabytes and thousands of pixels wide. Your page probably shows it much smaller. Resize images to roughly the largest size they are shown on the page, then compress them with a free tool or plugin. Compression shrinks the file size with little visible change. Our guide to image compression for faster websites walks through the options.
For sites that show images at different sizes on phones and computers, Google's guidance shows how to use srcset or the <picture> element to serve different versions, always with a fallback image in src. Most modern platforms do this automatically. Image size also affects page speed scores, which you will learn about in the lesson on page speed and Core Web Vitals.
What is lazy loading?
Lazy loading means images further down a page only load when the visitor scrolls near them, instead of all at once. It makes the first view of a page appear faster. Google's lazy-loading guidance says it is fine, as long as the content loads whenever it is visible in the viewport (the visible part of the screen). Two important points:
- Don't lazy-load images that are visible right away, like the main image at the top of the page. Google advises against adding lazy loading to content that is likely to be immediately visible.
- Don't make loading depend on clicks or scrolling actions. Google says its methods don't rely on user actions, because Google Search doesn't interact with pages that way. The browser's built-in lazy loading for images, or the IntersectionObserver API, are safe choices.
Most modern platforms, including WordPress, add built-in lazy loading by default. Our post on lazy loading and SEO covers the details.
Do you need an image sitemap?
A sitemap is a file that lists your pages for search engines, which you will learn about in the lesson on XML sitemaps. Google's image sitemap documentation says you can add image details to help Google find images it might otherwise miss, such as images loaded with JavaScript. You can add image tags to your existing sitemap or create a separate one, and each page entry can list up to 1,000 images.
For most small sites using normal <img> elements, an image sitemap isn't essential. It becomes more useful for large stores, photo-heavy sites and sites that load images with scripts.
How to prepare an image for your site, step by step
Here is the simple routine I suggest for every image you upload:
- Choose a clear, relevant image. Use your own photos where you can. Avoid images full of text, since that text is harder for search engines and screen readers to read.
- Resize it to roughly the largest size it will appear on the page.
- Save it in a suitable format, usually WebP or JPEG for photos, PNG or SVG for graphics.
- Compress it with a free tool or your platform's plugin.
- Rename the file in a few descriptive words with hyphens, like
golden-apples-orchard-harvest.webp. - Upload it and write alt text that describes the image and its link to the page.
- Place it near related text, and add a caption if it helps the reader.
- Check lazy loading. Make sure the main image at the top isn't lazy-loaded, but images further down are.
Try it: fix the images on one important page
Pick one page that matters, like a product or service page. Then:
- Right-click each image and choose "Open image in new tab." Look at the file name in the address bar. Is it descriptive, or something like
IMG_4021.jpg? - Check the alt text in your website editor's media library. Note any missing, generic or stuffed alt text.
- Run the page through PageSpeed Insights (a free Google tool) and look for suggestions about image sizes or formats.
- Rewrite the alt text for every meaningful image on the page, using the rules above.
- Replace the two heaviest images with resized, compressed and renamed versions.
That one page is now a model for the rest of your site. For a complete list of image checks, see our longer post on how to optimize images for search.
Questions beginners ask about image SEO
Does the image title attribute matter?
Google's image guidance focuses on alt text, file names and surrounding text such as captions. The title attribute is the small tooltip some browsers show on hover. It's optional. Put your effort into good alt text first.
Can I use stock photos?
Yes, but original photos usually tell visitors more about your real business. If you use stock images, still write proper alt text and a descriptive file name, and choose images that actually match the page.
Should every image have alt text?
Every meaningful image should have descriptive alt text. Purely decorative images should have an empty alt attribute so screen readers can skip them. Don't leave the attribute out completely.
Can I control which image Google shows next to my page?
Partly. Google chooses automatically, but its image guidance says you can suggest a preferred image with structured data or the og:image meta tag. Choose a relevant, high-resolution image, and avoid generic ones like your logo.
What good image SEO looks like, and the next lesson
Good image SEO means using real <img> elements, placing images near relevant text, writing short and specific alt text, giving files descriptive names, choosing a modern format and keeping file sizes small. Lazy-load images further down the page but not the main one at the top, and consider an image sitemap if Google might miss some images. Do this for every new image, and fix your most important pages first.
In the next lesson, we move from pictures to moving pictures: video SEO basics, including watch pages and how Google finds videos.
If you'd like help speeding up an image-heavy site, our page speed optimization service covers it, or you can get a free quote.