Image SEO: 12 Practical Tips for More Organic Traffic

A lot of people think image SEO is just putting a keyword in the alt attribute. In practice, there are at least twelve factors that influence how Google finds, understands, and ranks your site's images. Ignoring these factors means losing traffic that could easily be captured — including from Google Images, which accounts for a significant share of global searches.

Google itself keeps advancing machine-learning image recognition. But that doesn't make image SEO obsolete — on the contrary, Google keeps using every available signal (file name, alt text, page context, load speed) to accurately interpret and rank images.

1. Name files descriptively

The file name is one of the first signals Google uses to understand an image's subject. Cameras and phones generate generic names like IMG_0023.JPG or DSC_4817.jpg — which communicate absolutely nothing to the search engine.

Google itself states in its official guidelines that the file name is a clue about the image's content. The recommendation is simple: use descriptive keywords, separated by hyphens, without overdoing it:

• Good: chocolate-cake.jpg
• Bad: IMG_2947.jpg
• Also bad: chocolate-cake-recipe-dessert-sweet.jpg (keyword stuffing)

Renaming images before uploading is a simple habit that makes a difference — especially for e-commerce sites, cooking blogs, portfolios, and any site that relies on traffic from image search.

2. Write useful alt text

The alt attribute describes an image to the browser. It's displayed when the image fails to load, read by screen readers for people with visual impairments, and used by Google to understand the page's visual content.

The syntax is simple:

<img src="dalmatian-puppy.jpg" alt="Dalmatian puppy playing in the park">

Google uses alt text alongside computer vision algorithms and the page's context to understand the image's subject. The guidance is to create useful, information-rich descriptions, using keywords contextually — never stacking words meaninglessly (keyword stuffing).

A shortcut that works well: complete the sentence "This is a photo of ___". The result, slightly adjusted, tends to make good alt text. Examples:

• "This is a photo of a chocolate cheesecake with strawberry sauce." → alt="Chocolate cheesecake with strawberry sauce"
• "This is a photo of a laptop with a cracked screen on a desk." → alt="Laptop with cracked screen on an office desk"

For product images, including the model number or SKU in the alt text can help you show up for specific technical searches. Don't forget captions either — Google extracts information about an image's subject from the text around it, including captions visible on the page.

3. Choose the right file format

The format you choose directly impacts file size — and, consequently, page load speed. The three most common formats on the web are JPG, PNG, and WebP, each with distinct characteristics:

The general rule: use JPG for photographs, PNG for images that need a transparent background and sharp text, and WebP whenever possible for the web — the format offers superior compression with equivalent quality. Use ImageTools' Image Converter to convert between formats before uploading.

4. Resize images to their actual display dimensions

Uploading a 4000px-wide photo to a site that displays images at 800px is a waste of bandwidth. The browser downloads the entire image and then discards the excess pixels — the user waits longer, with no visual benefit.

Identify the maximum display width for images in your layout (usually between 800px and 1440px, depending on the image type and site) and resize before uploading. To cover Retina (HiDPI) displays, use double the display width. Use ImageTools' Resize Image tool to precisely adjust dimensions.

5. Compress images with no visible quality loss

Compression is the process of reducing a file's size without changing the image's dimensions. For JPG photos, reducing quality from 100% to 80% can shrink the file 5 to 10 times with an imperceptible difference on screen.

Load speed is a ranking factor confirmed by Google — on both desktop and mobile. Images are often the largest component of a web page's weight. Compressing every image before uploading is the technical SEO optimization with the best return for the effort.

Practical weight targets by image type:

• Full-width banner / hero: under 200 KB
• Product photo or blog image: 60–150 KB
• Thumbnail: 15–40 KB
• PNG/WebP logo: under 30 KB

Use ImageTools' Image Compressor to reduce JPG, PNG, and WebP directly in your browser — with nothing sent to external servers.

6. Create an image sitemap

An image sitemap tells Google about images it might not discover on its own — especially images loaded via JavaScript or embedded in complex galleries. Unlike a regular sitemap, an image sitemap can include URLs from other domains (like CDNs).

If your site uses WordPress with the Yoast SEO plugin, images are already automatically added to the sitemap. For custom sites, the image sitemap can be added manually following Google's official documentation. The main tags available are image:loc (the image URL), image:title, and image:caption.

7. Use structured data for product images

Google supports structured data (Schema.org) for images in several contexts — recipes, products, articles, events. When implemented correctly, this data allows images to appear in Google's rich results, with extra visual emphasis that increases click-through rate.

For e-commerce sites, product markup with an image is especially valuable: products with correctly marked-up images can appear in Google Shopping and in product cards in Google's knowledge panel.

8. Implement lazy loading

Lazy loading is the technique of loading images only when they're about to enter the visible screen area, instead of downloading them all at once on initial load. On pages with lots of images (long blog posts, product listings), lazy loading can reduce the page's initial weight by 60–80%.

The simplest implementation is native to HTML:

<img src="product.webp" alt="Blue sneakers" loading="lazy">

Important: never apply loading="lazy" to the main image above the fold (the first image visible without scrolling). This delays the LCP — Largest Contentful Paint, one of the Core Web Vitals metrics — and directly hurts ranking.

9. Set width and height on every image tag

When the browser doesn't know an image's size before loading it, it doesn't reserve the correct space in the layout — and when the image loads, the page's content "jumps." This phenomenon is what Google measures as CLS (Cumulative Layout Shift), another Core Web Vital.

The solution is to always declare width and height on image tags:

<img src="product.webp" alt="Blue sneakers" width="800" height="800" loading="lazy">

The values don't need to match the displayed visual size — they just define the aspect ratio so the browser reserves the correct space before the image loads.

10. Use responsive images with srcset

The srcset attribute lets you provide different versions of the same image for different screen sizes. The browser automatically chooses the most suitable version — serving a smaller image for phones and a larger one for desktops. On sites with heavy mobile traffic, this can reduce the volume of transferred data by 40–60%.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Blue sneakers"
  width="800" height="800"
  loading="lazy"
>

11. Optimize the featured image for Open Graph and social media

When someone shares a URL on WhatsApp, Instagram, LinkedIn, or any other platform, the image shown in the preview comes from the Open Graph meta tags. If these tags aren't configured, the platform picks any image from the page — often with a poor result.

Always configure the og:image tag with a 1200×630px image on every important page of your site:

<meta property="og:image" content="https://seusite.com.br/imagens/artigo-preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

A well-built preview image — with legible title text, the brand's visual identity, and a relevant image — significantly increases the click-through rate on shares.

12. Consider the context of the entire page

Google doesn't evaluate images in isolation. It analyzes the whole picture: the text around the image, the page title, the semantic context, the other visual elements, the caption below the image, and even the anchor text of links pointing to the page. An image of a red shoe on a page about women's fashion has a completely different context than the same image on a cooking page.

Good context practices:

• Place images close to the text that describes or refers to them
• Use visible captions below images whenever possible
• Make sure the image's subject is relevant to the page's topic
• Use page titles and headings that reinforce the subject of the main images

Image SEO checklist

• ☑ Descriptive file name with keywords (hyphenated, no keyword stuffing)
• ☑ Descriptive, contextual alt attribute on every image
• ☑ Correct format for each type: WebP or JPG for photos, PNG/SVG for logos and icons
• ☑ Dimensions adjusted to the actual display size (max. 2× for Retina)
• ☑ Compression applied — weight below the targets for each type
• ☑ width and height declared on every <img> tag
• ☑ loading="lazy" on below-the-fold images
• ☑ LCP image with no lazy loading, with fetchpriority="high" if possible
• ☑ Image sitemap configured (or checked whether the plugin already does this)
• ☑ og:image meta tag configured on every main page
• ☑ Structured data for product images where applicable
• ☑ Images contextualized with relevant text, captions, and headings

Frequently Asked Questions