You spend hours on your title tags, your meta descriptions and your content, then upload a hero image called IMG_4392.jpg with no alt text and a 4MB file size. That one habit quietly drags down your page speed, hides your images from Google Images, and gives search engines nothing to read. The fix is not complicated, and most of your competitors still get it wrong. This guide walks you through every step, from naming a file to adding schema, so your images help your rankings instead of holding them back.

What Is Image SEO?

Image SEO is the practice of optimising the images on your website so search engines can find, understand and rank them, and so your pages load fast for users. Done well, it earns you visibility in Google Images and visual search, and it strengthens the ranking of the page each image sits on. It covers file names, alt text, formats, compression, structured data and delivery.

There are two payoffs. Your images can rank in image results and pull in their own traffic, and faster, well-labelled images help the whole page perform better in normal search.

Why Image SEO Matters (and Where Images Show Up in Search)

Images are not decoration. They are a ranking asset, a speed lever and, increasingly, a signal that AI search reads to understand your page. Google itself runs several features that surface images, and the advice for ranking in them is broadly the same across all of them.

If you run a Singapore business competing on crowded local terms, image SEO is one of the easier on-page wins left, precisely because so few sites do it properly.

Google Images and Image Packs

Many people search visually first. Google Images is its own search engine, and Google also drops image packs into standard results when a query looks visual. Ranking there puts your brand in front of people before they have even clicked a blue link.

Visual Search (Google Lens) and Multisearch

Visual search lets people search using a photo instead of words. Someone can point Google Lens at a product and get results for similar items, or add text to refine what they are after. Clear, well-labelled images give you a better chance of showing up in these results.

AI Overviews and AI Search

Search results increasingly open with an AI-generated summary. Google’s own guidance now includes optimising for generative AI search, and descriptive alt text plus image structured data help multimodal AI read what your images show. If you want to be the source an AI cites, your images need to be legible to it.

Accessibility and Conversions

Alt text was built for accessibility. It lets screen readers describe an image to people who cannot see it, and it shows when an image fails to load. That same description is what search engines read too, so accessibility and SEO pull in the same direction here. Clear product images also help people decide to buy, which is why image work often lifts conversions as well as rankings.

How to Optimise Images for SEO: The Full Workflow

Here is the full workflow, in order. Each step below is a link in the chain, and you can work through them from sourcing an image to checking your delivery.

  1. Find or create the right image
  2. Name the file descriptively
  3. Choose the right format
  4. Resize to display dimensions
  5. Compress to cut file size
  6. Serve responsive images
  7. Write effective alt text
  8. Add captions where they help
  9. Implement lazy loading
  10. Specify width and height
  11. Add image structured data
  12. Create an image sitemap
  13. Optimise Open Graph tags
  14. Speed up delivery with a CDN and caching
  15. Apply on-page SEO around the image

Step 1: Find or Create the Right Image

Start with an image that actually supports the point you are making. Photos show products and break up text, graphics and illustrations explain abstract ideas, charts display data, icons aid navigation, and screenshots give clear instructions.

Original images beat stock. Your team page needs photos of your real team, not a stranger from a stock library. Original visuals give users something unique and give Google more reason to rank you. If you do use someone else’s image, check you have the right to, or you may be breaking copyright law.

Place each image near the text it relates to. Google extracts meaning from surrounding content, so an image sitting next to relevant copy is easier for it to understand.

Step 2: Name the Image File Descriptively

Image SEO starts before you upload. Google says the filename gives it light clues about an image’s subject, so use names that are short but descriptive. A file called red-running-shoes.jpg tells Google far more than IMG00023.JPG or generic names like image1.jpg.

Separate words with hyphens rather than spaces or underscores, and keep the name concise. If you run a multilingual site, translate your filenames too, and mind the URL encoding rules for non-Latin characters.

Step 3: Choose the Right Image Format

Google Search supports several formats in the src of an <img> element: BMP, GIF, JPEG, PNG, WebP, SVG and AVIF. Pick the one that fits the job, and make sure the file extension matches the real file type.

JPEG for Photographs and Detailed Images

JPEG handles photos and complex, colourful images well, giving good quality at a reasonable file size. It is the safe default for photography where you do not need transparency.

PNG for Transparency, Text and Sharp Graphics

PNG preserves transparency and keeps text and sharp edges crisp. Use it for logos on coloured backgrounds, screenshots with fine text, and graphics where quality matters more than file size.

WebP as the Modern Default for Most Images

WebP usually produces smaller files than JPEG or PNG at similar quality, and it supports both transparency and animation. For most website images, it is the sensible modern default. You can convert images to WebP with a free tool like Squoosh.

AVIF for the Best Compression (With Support Caveats)

AVIF pushes compression further than WebP, often cutting file size again at the same quality. Google Search does support it. Check current browser support on Can I Use before you rely on it, and serve a fallback for older browsers.

SVG for Logos, Icons and Line Art

SVG is a vector format, so it scales to any size without losing quality and can be styled with CSS. Use it for logos, icons and simple line art, not for photographs.

GIF for Simple Animations (and Why to Use It Sparingly)

GIF suits simple animations, but the files are heavy and can slow a page down. Keep animated GIFs to a minimum, since the movement also distracts readers from your content.

Step 4: Resize Images to the Dimensions You’ll Display

Do not upload a 2,500-pixel image to display it at 250 pixels. The browser still loads the whole thing, which wastes bandwidth and slows the page.

Resize to the size you actually show. The right maximum depends on the container width, the image’s purpose (a zoomable product shot needs more detail than a thumbnail) and the screens your audience uses. You can check visitor screen resolutions in your analytics.

Step 5: Compress Images to Cut File Size

Compression shrinks the file without a visible drop in quality. Lossy compression removes data you are unlikely to notice and saves the most space; lossless saves less but keeps every pixel. For most web images, lossy at a quality factor of around 75 to 85 is a good balance.

Tools like Squoosh, TinyPNG and ShortPixel handle this for you. Stripping EXIF data trims a little more. Google notes that images are often the largest contributor to page size, so this step matters. Test the result in PageSpeed Insights.

Step 6: Serve Responsive Images

Responsive images let the browser pick the right version for each screen, so a phone does not download a desktop-sized file. You do this with the srcset attribute or the <picture> element.

Google recommends you always include a fallback src, because some browsers and crawlers do not read these attributes. Here is the pattern from Google’s own responsive images guidance:

				
					<img decoding="async"
  srcset="cat-320w.jpg 320w, cat-480w.jpg 480w, cat-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="cat-800w.jpg"
  alt="A cat napping in front of a fireplace">

If you use WordPress, responsive srcset has been added automatically since version 4.4, so much of this is handled for you.

Step 7: Write Effective Alt Text

Alt text is the most important piece of metadata you can give an image. It describes the image for people who cannot see it, and Google uses it, alongside computer vision and the surrounding page, to understand what the image shows.

Write useful, specific descriptions. Google’s own example ranks “Dalmatian puppy playing fetch” above a plain “puppy”, and both above no alt text at all. Keep it accurate and concise, describe what matters in context, and skip phrases like “image of” since it is already an image.

Do not stuff alt text with keywords. Google treats keyword-stuffed alt attributes as spam, and it makes for a poor experience on a screen reader. Decorative images that add no information can take an empty alt=”” so assistive tech skips them.

Alt Text vs. Title Text vs. Captions (What Each Is For)

These three get confused. Alt text describes the image for accessibility and search, and shows when the image fails to load. The title attribute appears as a tooltip on hover, is unreliable across browsers and screen readers, and you can usually leave it out. A caption is the visible text near the image, and readers often scan captions, so use them where they genuinely help.

Using AI to Write Alt Text and File Names (and Where It Fails)

AI tools can generate alt text and filenames in bulk, which saves time on large libraries. They are a useful starting point, but they miss context. AI cannot know which detail matters for your specific page, and it can produce generic or slightly wrong descriptions. Treat AI output as a first draft you review, not a finished job, especially for product images where the differentiator matters.

Step 8: Add Captions Where They Help Scanning

Captions are the text that sits with an image on the page. People scan headings, images and captions as they move down a page, so a good caption can pull a reader in.

You do not need a caption on every image. Add one only where it helps the visitor, and think about the reader first rather than adding captions purely for SEO.

Step 9: Implement Lazy Loading

Lazy loading holds back off-screen images until the user scrolls near them, so the initial load is faster. The simplest way is the native loading=”lazy” attribute on your <img> tag.

Only apply it to images below the fold. There is one important exception, covered next: never lazy-load the main image at the top of the page.

Step 10: Specify Width and Height (and Protect Core Web Vitals)

Always set width and height attributes on your images. Without them, the browser does not know how much space to reserve, so it lays out the page, then shoves everything down when the image arrives. That jump is a layout shift, and unsized images are the biggest cause of it.

This ties into two of Google’s Core Web Vitals, the metrics it uses to judge page experience.

How Images Affect LCP

Largest Contentful Paint measures how quickly the main content of the page renders. It is often a hero image, and Google wants LCP at 2.5 seconds or less for most visits. Never lazy-load your LCP image, because that delays the very thing the metric is timing. Instead, you can hint its priority with fetchpriority=”high”:

				
					<img decoding="async" fetchpriority="high" src="hero-image.webp" alt="..." title="hero image">

Set this on one image at most. WordPress 6.3 and later already skip lazy loading on the first few images and add this hint to the likely LCP image for you.

How Images Affect CLS

Cumulative Layout Shift measures how much the layout jumps as the page loads. Setting explicit width and height lets the browser reserve the right space up front, so content below the image does not move. It is one of the simplest Core Web Vitals fixes there is.

Step 11: Add Image Structured Data (Schema)

Structured data is code that tells Google more about your page. Add it and Google can show your images in rich results, including a badge in Google Images that can drive better-targeted traffic.

For each supported type, the image attribute is required to be eligible for those richer image results. There is also an ImageObject type that lets you add licensing details, such as the creator and a link to the licence, which can appear in Google Images. Structured data does not directly raise your ranking, but it makes your listing richer.

Step 12: Create an image sitemap (or add images to your XML sitemap)

An image sitemap tells Google about images it might not otherwise find, such as those loaded by JavaScript. You can add image entries to your existing XML sitemap rather than building a separate file.

One useful detail: the <image:loc> element can point to images on another domain, so you can host images on a CDN and still list them. If you do, Google suggests you verify the CDN’s domain in Search Console. Most CMS platforms generate image sitemap entries automatically.

Step 13: Optimise Open Graph and Social Image Tags

The og:image tag sets the picture that appears when someone shares your page on social platforms. Google also reads og:image as one signal for choosing a preferred image for your page.

Pick an image that represents the page, avoid a generic logo or an image that is mostly text, and steer clear of extreme aspect ratios. Pair it with og:title, og:type and og:url so the shared preview looks right.

Step 14: Speed Up Delivery With a CDN and Browser Caching

A content delivery network stores your images on servers around the world, so each visitor loads them from a nearby location. That cuts load time, and many image CDNs also convert formats on the fly.

Browser caching tells a returning visitor’s browser to reuse an image it already downloaded rather than fetching it again. Since images rarely change, you can cache them for a long time. Check both with PageSpeed Insights.

Step 15: Apply On-Page SEO Around the Image

An image does not sit in isolation. The page’s title tag, its meta description and the copy around the image all help Google work out what the image is about.

Write a descriptive title tag and meta description, and make sure the body text near the image is relevant to it. The stronger the page’s own topical signals, the better the image tends to do.

Image SEO by Platform (CMS-Specific How-To)

The workflow above is the same everywhere. What changes is where you click. Here is where the image controls live on the major platforms.

WordPress

WordPress handles a lot for you: it generates responsive srcset markup, creates multiple image sizes on upload, and from version 6.3 manages lazy loading and LCP priority. You add alt text in the media library, and plugins fill the gaps.

Yoast SEO for Image Structured Data and XML Sitemaps

The Yoast SEO plugin adds relevant images to your page’s structured data and includes images in its XML sitemaps automatically, which covers two of the steps above without extra work.

RankMath Image Settings

RankMath is an alternative SEO plugin with its own image controls, including a feature that can add missing alt attributes based on the image title. Review anything it generates so the alt text stays accurate.

Compression Plugins (ShortPixel, Smush, Imagify)

WordPress does not compress aggressively on its own. Plugins like ShortPixel, Smush and Imagify compress images automatically on upload and can convert them to WebP, which handles the compression and format steps for you.

Shopify

Shopify serves images through its own CDN and can deliver WebP automatically. You set alt text in the product and media editors. Since themes control image markup, check that product images carry width and height and are not lazy-loading the main product shot. Our Shopify SEO work often starts with exactly this.

Wix

Wix compresses and serves images through its own infrastructure and lets you add alt text in the editor. You have less control over the raw markup, so focus on the levers Wix exposes: descriptive filenames before upload, and alt text on every meaningful image.

Squarespace

Squarespace handles responsive images and lazy loading within its templates. Add alt text through the image block or the image’s description field, depending on where the image sits, and keep uploaded files sensibly sized since your control over compression is limited.

Webflow

Webflow gives you more direct control over markup. You can set alt text per image, add responsive images, and control lazy loading and dimensions. It also supports WebP, so you can apply most of this guide directly.

Magento

Magento suits larger catalogues and supports WebP and image compression, often through extensions. With big product ranges, automate descriptive filenames and alt text where you can, and lean on the platform’s image optimisation settings. Image work usually sits inside a broader ecommerce SEO effort on stores this size.

Image SEO for Local and Multi-Location Businesses

If you serve specific areas, your images can carry local signals too. Use descriptive, location-aware filenames and alt text where it is genuinely accurate, such as a real photo of your Singapore premises rather than a stock skyline.

Optimise the images on your Google Business Profile as well, since those photos shape how people see your listing. For multi-location businesses, give each location page its own real, well-labelled images rather than reusing one set everywhere. This pairs naturally with your wider local SEO work.

How to Audit Your Existing Images

Once you know the steps, auditing is just checking your live site against them. It works well as part of a wider SEO audit rather than a one-off. A crawler like Screaming Frog or Sitebulb, or the reports in PageSpeed Insights, will surface most issues. Export a list of images with their file size, format, alt text and page.

What to Check (The Image SEO Audit Checklist)

Work through these in order. Each maps to a step above.

Missing or generic alt text

Find images with empty or unhelpful alt attributes. These are the quickest wins, so start here.

Oversized or uncompressed files

Flag large files and anything still served as JPEG or PNG where WebP would be smaller. These are usually your biggest speed drains.

Broken internal and external images

Look for images that no longer load, whether hosted on your domain or an external one. A broken image helps nobody and wastes crawl budget.

Images blocked in robots.txt

Check that you are not accidentally blocking image files or their folders, since a blocked image cannot be indexed. If you are debugging status codes while you are in there, our note on 401 vs 403 error codes may help.

Missing width and height, and next-gen formats

List images without width and height attributes, and those not yet in WebP or AVIF. Fixing these protects Core Web Vitals and cuts file size.

How to Prioritise Fixes (High-Traffic and LCP Images First)

You will rarely fix everything at once, so start where it counts. Prioritise images on your highest-traffic and highest-intent pages, and the LCP image on each key page, since those affect both users and rankings the most.

Common Image SEO Mistakes to Avoid

Most image SEO problems come down to a handful of repeat offenders. Here are the ones worth checking for.

Keyword-Stuffing Alt Text

Cramming keywords into alt text reads badly on a screen reader and can be treated as spam. Describe the image plainly instead.

Using Generic File Names

IMG_1234.jpg tells Google nothing. Rename files descriptively before you upload them.

Shipping Oversized, Uncompressed Images

Large files are the most common cause of a slow page. Resize and compress before upload, every time.

Lazy-Loading the Hero Image

Lazy-loading your main above-the-fold image delays your LCP and hurts your score. Load it eagerly and reserve lazy loading for images further down.

Replacing Text With Images

Text baked into an image cannot be read as text by search engines or screen readers. Keep important words as real text on the page.

Using Obvious Stock Photos

Generic stock images add little and can make a page feel impersonal. Use original visuals where you can.

Getting Alt Text Wrong on Functional and Decorative Images

Functional images that carry meaning need descriptive alt text; purely decorative ones should take an empty alt=”” so assistive tech skips them. Getting this backwards hurts both accessibility and clarity.

Frequently Asked Questions

Here are the questions people ask most often about optimising images for search.

SEO for images, or image SEO, is the practice of optimising your website's images so search engines can find, understand and rank them. It covers file names, alt text, formats, compression, structured data and delivery, and it helps both your images and their pages appear in search.

Start with a relevant, original image, name the file descriptively with hyphens before uploading, save it in a suitable format such as WebP, and compress it. Then add clear alt text and place it near related text on the page.

Work through the full workflow: descriptive filenames, accurate alt text, the right format, compression, responsive sizing, lazy loading below the fold, explicit width and height, structured data and an image sitemap. Then audit your live pages and fix the highest-traffic images first.

AI can help with parts of it, such as drafting alt text and filenames in bulk, which saves time on large libraries. It cannot judge which detail matters on a specific page, so treat AI output as a first draft to review rather than a finished job, and keep a human eye on anything customer-facing.

For most images, WebP is the best all-round choice because it gives small files at good quality. Use AVIF where you want even smaller files and have checked browser support, JPEG for straightforward photos, PNG for transparency and sharp graphics, and SVG for logos and icons.

Alt text helps search engines understand what an image shows, which supports how your image ranks in Google Images and adds context to the page. It also improves accessibility. It is not a magic ranking lever on its own, but it is one of the most important image signals you can control.

There is no single number. Resize each image to the largest size it is actually displayed at, keep most website images under a couple of thousand pixels wide, and compress the file so it loads quickly. The right size is the smallest one that still looks sharp where it appears.

Final Thoughts

Image SEO is one of the few on-page wins that is both straightforward and largely ignored, which is exactly why it is worth doing. Work through the steps once, build the good habits into how you upload, and your images will start pulling their weight in search instead of dragging your pages down.

If you would rather have this handled for you, our team can audit your images and fold the fixes into a wider plan. Take a look at our SEO services, and if you found this useful, share it with someone whose images could use the help.