SSquoosh Pro

Why image SEO matters

Search engines cannot see images the way humans do. They rely on file names, alt text, surrounding content, structured data, and page performance to understand what an image represents. At the same time, image files are often the largest part of a page payload, so they directly influence Core Web Vitals and mobile usability.

Image SEO is not a single fix. It is a repeatable workflow that starts before upload and continues after the page is live. The checklist below covers every step in order.

1. Use descriptive, keyword-aware file names

Rename your image file before uploading. Instead of IMG_4821.jpg, use a name such as organic-cotton-tote-bag.jpg. Separate words with hyphens, keep the name concise, and include the primary keyword when it is natural. A file name is a small ranking signal and also helps content management systems generate useful URLs.

2. Write alt text for meaning, not keywords

Alt text should describe what is in the image and why it matters in the context of the page. It helps visually impaired users and gives search engines a text description of the image. Good alt text is specific, concise, and useful:

  • Good: "A woman holding a reusable cotton tote bag at a farmers market."
  • Weak: "image1.jpg"
  • Over-optimized: "buy cheap cotton tote bags online free shipping best tote bag deals"

Decorative images that add no information should have empty alt text (alt="") so assistive technology can skip them.

3. Compress before you upload

Compression is the fastest way to improve image-related page speed. Start with the free image compressor to reduce JPG, PNG, or WebP file size before upload. For most web photos, a quality setting between 75% and 85% keeps the image sharp while significantly reducing the download size.

Set a file-size budget so the workflow stays consistent: hero images under 300 KB, content images under 150 KB, thumbnails under 50 KB, and decorative images as small as possible.

4. Convert to an efficient modern format

WebP is the safest modern format for production websites. Use the format converter to create WebP files from JPEG or PNG originals. If your audience is fully modern and your CMS supports it, AVIF can save even more bandwidth, but keep a WebP or JPEG fallback.

5. Match dimensions to the layout

Do not upload a 4000-pixel-wide photo to display at 700 pixels. Use the image resizer to prepare files at the exact layout width, plus a 2x version for high-density screens when needed. Common widths are 1920 px for heroes, 1200 px for featured images, 800 px for inline content, and 300-600 px for thumbnails.

6. Declare width and height attributes

Include width and height attributes on <img> elements. The browser reserves the correct space before the image loads, which reduces layout shift and improves Cumulative Layout Shift (CLS), one of the Core Web Vitals metrics.

7. Use lazy loading for below-the-fold images

Add loading="lazy" to images that are not visible in the initial viewport. The browser then waits until the image is close to the viewport before downloading it. Do not lazy-load the hero image; it should load immediately because it is usually the Largest Contentful Paint element.

8. Use responsive images with srcset and sizes

For responsive layouts, provide multiple widths and let the browser choose the best file for the device and viewport:

<img
  src="photo-800.webp"
  srcset="photo-800.webp 800w, photo-1200.webp 1200w, photo-1920.webp 1920w"
  sizes="(max-width: 800px) 100vw, 1200px"
  alt="Descriptive alt text"
  width="1200"
  height="800"
  loading="lazy">

9. Add descriptive captions and context

Search engines use the text around an image to understand its subject. Put the image in a relevant paragraph or figure caption, and make sure the image supports the page topic. Avoid using images as the only way to communicate an important fact.

10. Add image structured data

If your site publishes product images, recipes, articles, or events, use structured data such as Product, Recipe, Article, and ImageObject. Structured data helps search engines understand key details and may make your content eligible for richer search results with images.

11. Keep an image sitemap

For large media sites, submit an image sitemap that lists image URLs, captions, titles, and license information. A sitemap makes it easier for search engines to discover new images, especially when images are loaded by JavaScript.

12. Audit with real performance tools

After publishing, run a performance audit with Google PageSpeed Insights or Lighthouse. Review the "properly size images" and "serve images in next-gen formats" recommendations, then use the tools on this site to make the suggested fixes.

Image SEO quick checklist

  • Descriptive file name with hyphens.
  • Specific, concise alt text; empty alt for decorative images.
  • Compressed with quality between 75% and 85%.
  • WebP or AVIF with fallback where appropriate.
  • Dimensions match the responsive layout.
  • Width and height attributes present.
  • Lazy loading for non-hero images.
  • srcset and sizes for responsive delivery.
  • Captions and contextual text around images.
  • Structured data for product, article, or recipe images.
  • Performance audit after publishing.

Frequently asked questions

Does image SEO require a plugin?

No. Many fixes, such as compression, resizing, and WebP conversion, can be done before upload with free tools. Plugins can automate later, but the source files should already be optimized.

How long does image SEO take to show results?

Page speed improvements can be visible immediately in performance tools. Search visibility changes usually take several weeks because crawlers must recrawl, re-render, and re-evaluate the pages.

Should I use PNG for better image SEO?

No. Search engines care about the rendered content and page speed, not whether the file is PNG. Use the smallest high-quality format that supports the image's needs.