Image SEO: file names, alt text and size that work

Image SEO comes down to four things: the file has a short descriptive name, the alt text says what is in the photo, the image is light and in the right format, and it sits next to the text it belongs to. Google says it understands an image from its alt text, from the content of the page around it and with its own computer vision algorithms, while the file name gives it "very light clues" [1]. It sounds like a lot, but in practice it takes about a minute per photo.

Why images matter for SEO at all

Photos work for you in three places. First, in Google Images and in the thumbnails next to normal results: someone searching for "bathroom renovation" often looks at pictures before clicking. Second, in speed: Google writes that images are often the largest contributor to a page's size and can make it slow [1]. Third, in accessibility: alt text is what a person with a screen reader hears, and what shows up when an image fails to load.

There is also one technical condition many templates miss: Google indexes images placed as a normal <img> element, but not images set as a CSS background [1]. If your best photos are section "backgrounds", Google simply does not see them as images.

1. The file name: short and descriptive

A phone photo arrives as IMG_4823.jpg. Rename it before you upload it. Google's own example is that my-new-black-kitten.jpg is better than IMG00023.JPG, and it advises against generic names like image1.jpg [1].

Use lowercase letters and hyphens between words. If your site is in another language too, Google suggests translating the file names of localised images [1].

2. Alt text: describe the photo as you would over the phone

Alt text is the most important piece of text an image has for Google [1]. Good alt text describes what is in the picture in a few words, in the context of the page. Google gives exactly this kind of example: "puppy" is better than nothing, but "Dalmatian puppy playing fetch" is best. It also warns explicitly against stuffing alt text with keywords, because that may cause your site to be seen as spam [1].

• Bad: no alt text.
• Bad: "bathroom renovation cheap renovation bathrooms tiles london".
• Good: "Bathroom after renovation, white tiles and a walk-in shower".

Not every image needs a description. The W3C has a simple alt text decision tree [2]:

3. Format and size: light, but sharp

Google wants both good photos and a fast page: sharp images appeal more than blurry ones, but heavy ones make the site slow [1]. Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF [1]. How to choose, according to MDN (Mozilla) [3]:

Two rules apply to every format:

1. Resize the photo to the size it is shown at. A 4,000-pixel image in an 800-pixel frame is just extra weight.
2. Compress it. Most photo apps and free online tools do it in one click.

If your site is slow and you do not know where to start, read why is my website slow.

4. The first big image and lazy loading

The large image at the top of a page is usually what Google uses to measure how fast the page loads. The metric is called Largest Contentful Paint (LCP), images are among the elements it considers, and a good score is 2.5 seconds or less [4].

Images further down the page can load "lazily", only when the visitor gets near them (loading="lazy"). But web.dev explicitly warns not to do this with images that are visible as soon as the page opens, especially the largest one [5]. That one should start loading straight away.

The first image on the page loads immediately; everything below it waits for the visitor. Doing it the other way round makes the site slow exactly where people look most.

5. Where the photo sits: next to the right text

Google also understands an image from the page around it: the heading, the caption and the text next to it [1]. So a photo of new brakes belongs on the brake repair page, not in a general gallery with no text at all. A short caption under the photo ("The bathroom before and after the renovation") helps both people and Google, as long as it is true.

The same goes for the image a page shows when it is shared (og:image): Google advises that it should be relevant to the page, high resolution, and not your logo or an image with text [1]. For the title and description themselves, see page titles and meta descriptions that get clicks.

How we do it on our own site

On studiov1.com every JPG and PNG photo in the blog and the projects automatically gets a lighter WebP version. The browser loads the WebP, and the original stays as a fallback for older browsers, exactly the <picture> pattern Google shows as an example [1]. The share image stays PNG. Nobody converts photos by hand: we upload the photo and the site does the rest. You can see screenshots of real sites in our projects.

Copyable checklist

1. The photo is yours and real, not stock: what photos to use on your website.
2. The file is renamed: lowercase, hyphens, 3–5 words.
3. The alt text describes the photo in a few words, with no keyword list.
4. Decorative images have an empty alt.
5. The photo is resized to its real display size and compressed.
6. The format is WebP (with JPEG or PNG as the fallback), or SVG for the logo.
7. The photo is an <img> element, not a CSS background, if you want Google to see it.
8. The first big image is not lazy; the ones below it are.
9. The photo sits next to the text it belongs to, with a caption if you like.
10. The same good photos are on your Google Business Profile: how to set it up.

Image SEO is one small part of the whole. For the bigger picture, start with SEO for a business website: where to start. And if you would rather someone else thought about sizes and formats, with Studio V1 it is part of building every site: a developer reviews the site before it goes live, and you just send us your photos.

References

1. Google Search Central. "Google image SEO best practices." developers.google.com/search
2. W3C Web Accessibility Initiative. "An alt Decision Tree." w3.org/WAI
3. MDN Web Docs (Mozilla). "Image file type and format guide." developer.mozilla.org
4. web.dev (Google). "Largest Contentful Paint (LCP)." web.dev/articles/lcp
5. web.dev (Google). "Browser-level image lazy loading for the web." web.dev/articles