freeseobot

Image SEO: Alt Text, File Names, Size and Formats

A practical image SEO guide: write alt text for people, name files clearly, use WebP or AVIF, size and lazy-load images well, and help Google Images find them.

By freeseobot Editorial · Published · 6 min read

Image SEO means helping search engines understand your images and keeping them from slowing your pages down. Give every meaningful image a short, descriptive alt text and file name, serve it in a modern format at the size it is displayed, and never lazy-load the main image at the top of the page. Those few habits cover most of what Google's image guidelines ask for.

Images matter for two reasons. They can bring visitors from Google Images, and they are usually the heaviest part of a page. Google's Image SEO best practices call images "often the largest contributor to overall page size".

Alt text: write it for people

Google's documentation calls alt text "the most important attribute" for giving it information about an image. Alt text is also what screen readers announce to people who cannot see the image, so write it for them first.

Google's own example shows the difference:

Alt text Verdict
(missing) Bad. Google and screen readers get nothing
puppy dog baby dog pup pups puppies doggies... Bad. Keyword stuffing, which Google says can be treated as spam
puppy Better
Dalmatian puppy playing fetch Best

How to write good alt text:

  • Describe what the image shows in the context of the page. A photo of your shop front on a contact page could be "Blue shop front of Rana Bakery on Lakeside Road".
  • Keep it short. One plain sentence or phrase is usually enough.
  • Use a keyword only if it describes the image. "Gluten-free chocolate cake" is fine if that is what the photo shows.
  • Leave decorative images empty. The W3C accessibility tutorial says purely decorative images should have an empty alt="" so screen readers skip them. Without any alt attribute, some screen readers read out the file name instead.
  • For inline SVGs, Google says to use a <title> element instead of alt.

Our free SEO check lists every image on a page with missing alt text, with no sign-up needed.

File names: short and descriptive

Google's guidance says filenames should be "short, but descriptive". Its example: my-new-black-kitten.jpg is better than IMG00023.JPG. Generic names like image1.jpg tell Google nothing.

  • Use lowercase words separated by hyphens: chocolate-birthday-cake.webp.
  • Rename images before you upload them, not after.
  • If you translate your site, Google suggests translating image file names too.
  • Make sure the file extension matches the real file type.

Formats: WebP and AVIF first

Google Search supports images in BMP, GIF, JPEG, PNG, WebP, SVG and AVIF. For speed, MDN's image format guide recommends preferring WebP or AVIF for photos and other raster images, because they compress better than JPEG, PNG and GIF.

Format Best for Notes from MDN
AVIF Photos Lossy AVIF files are around 50% smaller than JPEG. Supported in Chrome, Edge, Firefox, Safari and Opera. No progressive rendering
WebP Photos, graphics with transparency Lossy WebP is on average 25-35% smaller than JPEG. Broadly supported
JPEG Photo fallback Most compatible
PNG Screenshots, diagrams, line art Lossless; the fallback when you need transparency
SVG Logos and icons Scales to any size with no quality loss

To serve a modern format with a fallback, use the <picture> element. The browser picks the first format it supports:

<picture>
  <source srcset="cake.avif" type="image/avif">
  <source srcset="cake.webp" type="image/webp">
  <img src="cake.jpg" alt="Chocolate birthday cake with candles"
       width="800" height="600">
</picture>

Google recommends always including the <img> with a src as the fallback. Many website builders and image plugins convert uploads to WebP or AVIF for you, so check your platform's settings before doing it by hand.

Size, lazy loading and Core Web Vitals

Images affect two of the three Core Web Vitals. Our Core Web Vitals guide explains each metric; here is what images change.

Largest Contentful Paint (LCP)

On many pages the largest element at the top of the screen is a hero image or product photo. web.dev says a page's LCP resource, if it has one, is either an image or a web font. To keep it fast:

  • Never lazy-load the main image. web.dev says lazy-loading the LCP image "will always lead to unnecessary resource load delay".
  • Add fetchpriority="high" to that one image. web.dev advises using it on only one or two images; more cancels out the benefit.
  • Compress it and serve it at the size it is shown. A 4,000-pixel-wide camera photo displayed at 800 pixels wastes most of its download.

Cumulative Layout Shift (CLS)

web.dev recommends adding width and height attributes to every <img>. Without them the browser does not know how much space to reserve, and text jumps when the image loads.

Responsive sizes

Use srcset and sizes so phones download a small file and large screens get a larger one. Google's image guidelines describe both, and many platforms generate the extra sizes automatically.

Lazy loading below the fold

For images further down the page, add loading="lazy". web.dev says browser-level lazy loading is well supported in all major browsers, and browsers that do not support it ignore it. Google's lazy-loading documentation lists it as a recommended method, and warns that Google Search does not scroll or click, so avoid JavaScript lazy loading that waits for a user action.

Quick checklist:

Image loading fetchpriority width/height
Main image at the top Default (eager) high Yes
Images further down lazy Default Yes

Help Google find your images

  • Use real <img> elements. Google says it does not index images set as CSS background images.
  • Place images near related text. Google uses the surrounding text, captions and page title to understand an image.
  • Use the same URL for an image that appears on several pages, so Google can reuse it.
  • Add an image sitemap if Google might miss images, for example ones loaded by JavaScript. Google's image sitemap documentation says each page entry can list up to 1,000 images and only <image:loc> is required. Google has removed the caption, title, geo location and licence tags from its documentation. You can add image tags to your existing sitemap; our XML sitemap guide covers the basics.
  • Add structured data for products, recipes and articles. Google says the image property is required for its rich results and badges in Google Images.

Check your progress in Search Console: in Performance > Search results, change Search type to Image to see clicks from the Google Images tab.

Images and AI answers

Google's documentation on AI features says there are no extra requirements to appear in AI Overviews or AI Mode, and that normal SEO best practices still apply. One of the practices it lists is "supporting your textual content with high-quality images and videos". Traffic from these features is counted in the Performance report under the "Web" search type. In short: the same clear images, alt text and nearby text that help Google Images also help AI features understand your page.

To check alt text, image sizes and page speed across your whole site every week, connect your site to freeseobot. It takes one line of code, and suggested fixes wait in your dashboard until you approve them.

Questions

How long should alt text be?

Long enough to describe the image in context, usually a short sentence or phrase. Google's best example, "Dalmatian puppy playing fetch", is four words.

Should every image have alt text?

Every meaningful image should. Purely decorative images, such as background patterns or divider lines, should have an empty alt="" so screen readers skip them.

Is WebP or AVIF better?

MDN says AVIF generally compresses better, but it does not support progressive rendering. Both are supported in current major browsers. Use whichever your platform supports, with a JPEG or PNG fallback in a <picture> element if you serve files yourself.

Should I lazy-load all images?

No. Lazy-load images below the fold only. The main image at the top of the page should load straight away, ideally with fetchpriority="high".

Sources

More guides