Optimizing images for SEO: the nine step checklist

Optimizing images for SEO is nine things done in order: give the file a descriptive name, export it at the size it will actually display, save it as WebP or AVIF with JPEG as the fallback, compress it until quality is still clean, serve responsive sizes with srcset, set explicit width and height, write alt text that describes the image for somebody who cannot see it, place the image next to the text it illustrates with a caption where one helps, and list your images in a sitemap. Two of those nine produce most of the gain: correct dimensions with compression, which fixes page speed, and honest alt text with nearby text, which is how search engines work out what the image shows.

This page covers image optimisation for both ordinary web search and Google Images. The steps apply equally on WordPress, Shopify and a hand built site, and the markup examples are copyable.

1. Name the file before you upload it

A file called IMG_4471.jpg tells a crawler nothing. Rename it to a short, hyphenated description of the subject: oak-dining-table-six-seater.jpg. Use lower case, hyphens rather than underscores, no spaces and no accented characters. Do not stack keywords into the name. One accurate phrase is the whole job.

2. Export at display size, not at camera size

The most common cause of a slow page is a 4000 pixel wide photograph displayed in a 800 pixel wide column. Find the widest the image is ever shown at, then export at twice that width at most, for high density screens. Hero images rarely need to be wider than about 2000 pixels. Thumbnails rarely need more than about 600.

3. Choose the format deliberately

Format	Use it for	Notes
AVIF	Photographs, where the smallest file matters most	Smallest files of the common formats, supported in current Chrome, Firefox and Safari
WebP	Photographs and graphics, the safe default	Broad support, supports transparency and animation
JPEG	Fallback for photographs	Universal support, larger files at the same quality
PNG	Screenshots, flat graphics, anything needing sharp edges and transparency	Lossless, so files get large quickly on photographs
SVG	Logos, icons, diagrams, charts	Scales to any size, tiny, editable as text. Strip editor metadata before uploading

Serve a modern format with a fallback rather than picking one for everything:

<picture> <source type="image/avif" srcset="table-800.avif 800w, table-1600.avif 1600w"> <source type="image/webp" srcset="table-800.webp 800w, table-1600.webp 1600w"> <img src="table-800.jpg" srcset="table-800.jpg 800w, table-1600.jpg 1600w" sizes="(max-width: 700px) 100vw, 800px" width="800" height="600" alt="Solid oak dining table seating six, in a bay window" loading="lazy" decoding="async">
</picture>

4. Compress to a target, then look at the result

Quality around 75 to 85 on a JPEG or WebP export is where most photographs stop losing anything a visitor would notice. Useful targets: under 150 KB for a full width hero, under 80 KB for an in article image, under 25 KB for a thumbnail. Always open the compressed version at full size and check the areas that show artefacts first: skies, skin, flat gradients and text inside the image.

5. Set width and height on every image

Width and height attributes let the browser reserve the space before the file arrives, which stops the text jumping as images load. That jump is measured as Cumulative Layout Shift in Core Web Vitals. Set the attributes to the image's real pixel dimensions and control the display size in CSS.

6. Lazy load everything except what is on screen first

Add loading="lazy" to images below the fold. Do not add it to the main image at the top of the page: that one is usually the Largest Contentful Paint element, and lazy loading it delays the single measurement Google uses for loading speed. Give that image fetchpriority="high" instead and leave loading off.

7. Write alt text as a description, not as a keyword slot

Alt text has one job: describe the image to somebody using a screen reader. Good alt text reads naturally, is usually five to fifteen words, and mentions the keyword only when the keyword is genuinely what the picture shows.

• Good: alt="Technician replacing a cracked iPhone screen with a suction tool"
• Weak: alt="iphone repair phone repair screen repair cheap phone repair near me"
• Decorative images that add nothing get alt="", which tells a screen reader to skip them.
• Images that are links get alt text describing the destination, not the picture.
• Text inside an image goes in the alt text word for word, and ideally also as real text on the page.

8. Give the image context on the page

Search engines read the words around an image to work out what it shows: the heading above it, the sentence before it, the caption and the file name. An image dropped into a gallery with no surrounding text has almost nothing to be ranked on. Put each image next to the paragraph it illustrates, add a caption where a reader would want one, and keep one subject per image.

9. Make images findable and licensable

• Image sitemap: most SEO plugins add image entries to the XML sitemap. Confirm yours does, so new images get discovered quickly.
• Structured data: product, recipe, article and video markup all take an image property, and that image is what gets shown in a rich result. Use the largest version, at least 1200 pixels wide.
• Licence metadata: ImageObject markup with licence and acquireLicensePage fields lets Google show licensing details in Google Images.
• CDN: serve images from a CDN with long cache headers. Many CDNs convert formats and resize on the fly, which removes most of steps two to four.

{ "@context": "https://schema.org", "@type": "ImageObject", "contentUrl": "https://example.com/images/oak-table-1600.jpg", "license": "https://example.com/image-licence", "acquireLicensePage": "https://example.com/contact", "creditText": "Example Furniture Ltd", "creator": {"@type": "Organization", "name": "Example Furniture Ltd"}
}

How to check your work

Run one page through PageSpeed Insights and read the "properly size images", "efficiently encode images" and "serve images in next gen formats" items, which name the exact files costing you time. In Google Search Console, the Performance report has a Google Images search type that shows which images already bring visits. In your browser's network panel, sort by size and look at anything over 200 KB.

Does alt text help rankings?

It helps the image rank in Google Images, it helps the page by describing a part of its content, and it is required for accessibility. Treat it as a description first. Images with honest alt text and relevant surrounding copy are the ones that appear in image results.

How many images should a page have?

As many as the content genuinely needs, which for most articles is one every few hundred words, each one showing something the text describes. Pages padded with stock photography carry the loading cost without the benefit.

Is WebP better than JPEG for SEO?

WebP files are smaller at the same visual quality, so the page loads faster, and that speed is what search engines measure. Keep a JPEG fallback in the markup and let the browser choose.

Should image file names include my city or keyword?

Include them when they describe the image. A photograph of your Leeds showroom is reasonably called leeds-showroom-interior.jpg. A stock photo of a laptop is not called best-seo-agency-leeds.jpg, and naming it that way earns nothing.

What about images on product pages?

Use multiple angles, a consistent background, real pixel dimensions large enough to support zoom, and alt text that names the variant shown. Feed the largest version into your product structured data, because that is the image that appears in shopping and rich results.

Do I need to compress images already on my site?

Yes, and it is usually the fastest win available. Most platforms have a bulk tool that regenerates existing media at modern formats and sizes without changing the URLs, so no links break.

One place images are read differently

Every step above assumes a crawler that indexes a picture and a visitor who sees it. A growing share of buyers now asks an assistant instead of scanning a results page, and ChatGPT, Gemini, Perplexity, Claude and Google's AI Overviews answer in text, drawn from the words on your page and from the sources they trust. In that context the alt text, the caption and the sentence next to the image do the work the image used to do alone, which is one more reason to write them properly rather than fill them.

It is worth knowing what those assistants currently say when somebody asks for a business like yours, because each of the five answers differently and cites different sources. AI Knows Us runs that check and shows which sources the answers come from.