Images help people understand a page. They can show a product, clarify a process, support a story, or make a website feel more complete. They also affect performance, accessibility, search visibility, and overall page quality.

Good image SEO is not only about adding keywords to alt text. It is a combination of image format, file size, responsive delivery, accessibility, crawlability, and page experience. When these pieces work together, images become easier for people to use and easier for search engines to interpret.

Choose the Right Image Format

The image format should match the purpose of the image. Choosing the wrong format can make images unnecessarily large, blurry, or difficult to maintain.

• JPEG: A practical choice for photographs and images with many colors, gradients, or complex details.
• PNG: Useful for images that require transparency or crisp edges, though PNG files are often larger than needed for photos.
• WebP: A modern image format that often provides strong compression while preserving good visual quality. WebP is widely supported and is often a good default for website images. See WebP images and SEO for more detail.
• AVIF: A newer format that can produce very small files with good quality. It can be useful, but testing browser support, visual quality, and workflow compatibility is still important.
• SVG: Best for logos, icons, and simple vector graphics. SVGs remain sharp at different sizes, but they should be sanitized and handled carefully for security.
• GIF: Usually best reserved for simple animations. For larger animations or video-like content, modern video formats are often more efficient.

There is no single best format for every image. The goal is to preserve the image’s purpose while reducing unnecessary file weight.

Resize Images Before Uploading

Images should be close to the dimensions needed by the page. An image that displays at 600 pixels wide does not usually need to be uploaded at 3000 pixels wide.

Oversized images still cost bandwidth, even if CSS displays them smaller. This can slow down the page, especially on mobile connections.

For example:

• If a logo displays at 120 × 120 pixels, the site should not rely on a 2000 × 2000 pixel file for that placement.
• If a blog image displays at 800 pixels wide in the content column, uploading a 5000 pixel wide version may add unnecessary weight.
• If high-resolution displays are important, provide appropriately scaled versions rather than one oversized file for every device.

In WordPress, image size handling may be partly automated through generated thumbnail sizes. Even so, uploading reasonably sized source images helps keep the media library cleaner and the site more efficient.

Compress Images Carefully

Image compression reduces file size. Smaller images generally load faster, which can improve user experience and support stronger performance signals.

Compression should be handled with care. Too little compression leaves the file heavier than necessary. Too much compression can create visible artifacts, blurry details, or poor-looking images.

Common approaches include:

• Using image optimization software before upload.
• Using a trusted WordPress image optimization plugin.
• Serving modern formats such as WebP or AVIF when appropriate.
• Testing important images visually after compression.

Compression is especially important for pages with many images, such as galleries, service pages, product pages, case studies, and long-form articles.

Use Descriptive Image Filenames

Image filenames should describe the image in plain language before the file is uploaded.

A filename like this is not very useful:

IMG_4827.jpg

A filename like this provides more context:

white-kitchen-cabinets-brass-hardware.jpg

Useful filenames can help with organization, accessibility workflows, and image search interpretation. They should be descriptive, concise, and readable.

Good filename practices:

• Use lowercase letters.
• Separate words with hyphens.
• Describe what is actually visible in the image.
• Avoid keyword stuffing.
• Avoid vague names such as image1.jpg, photo-final-final.jpg, or homepage-banner-new2.png.

Write Useful Alt Text

Alt text helps describe an image when the image cannot be seen. It is important for accessibility and can also help search engines understand image content.

Alt text should describe the image in context. It should not be treated as a place to force keywords.

Example:

<img src="white-kitchen-cabinets-brass-hardware.jpg" alt="White kitchen cabinets with brass hardware and a marble countertop">

This alt text is useful because it describes the image clearly. It does not overstate what the image shows, and it does not repeat unnecessary keywords.

When to Use Empty Alt Text

Not every image needs descriptive alt text. Decorative images should often use an empty alt attribute so screen readers can skip them.

<img src="decorative-border.png" alt="">

An empty alt attribute is different from a missing alt attribute. Empty alt text tells assistive technology that the image is decorative. A missing alt attribute may create confusion.

Alt Text Questions to Ask

• What information does this image provide?
• Would a user miss important meaning if the image did not load?
• Is the image decorative, informative, functional, or contextual?
• Does the alt text describe the image accurately?
• Is the alt text concise enough to be useful?

Accessibility and image SEO overlap here, but accessibility should come first. A clear description for people is usually also clearer for retrieval systems.

Use Responsive Images

Responsive images allow browsers to choose an appropriate image file based on screen size, display density, and layout needs. This helps avoid sending unnecessarily large images to small screens.

A basic responsive image example:

<img
  src="kitchen-remodel-800.jpg"
  srcset="kitchen-remodel-400.jpg 400w,
          kitchen-remodel-800.jpg 800w,
          kitchen-remodel-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Kitchen remodel with white cabinets and a wood island">

The srcset attribute provides multiple image options. The sizes attribute helps the browser understand how much space the image will occupy in the layout.

WordPress often generates responsive image markup automatically when images are inserted through the media library. Even so, theme quality, image size settings, custom templates, and page builders can affect the final output.

Define Image Width and Height

Images should include width and height attributes, or otherwise reserve the correct layout space. This helps browsers understand the image’s aspect ratio before the file fully loads.

<img
  src="bathroom-vanity.jpg"
  width="800"
  height="533"
  alt="Bathroom vanity with two sinks and wall-mounted mirrors">

Defining image dimensions helps reduce layout shifts. Layout shift is part of page experience and can affect how stable a page feels while loading. This connects directly to Core Web Vitals, especially Cumulative Layout Shift.

Images can still be responsive while using width and height attributes. Modern browsers use those attributes to calculate aspect ratio, while CSS can control how the image scales visually.

Lazy Load Non-Critical Images

Lazy loading delays offscreen images until they are closer to being viewed. This can improve initial load performance, especially on long pages.

Native lazy loading can be added with the loading attribute:

<img
  src="deck-renovation.jpg"
  loading="lazy"
  alt="Renovated backyard deck with wood railing">

Lazy loading is useful for images below the first visible screen. It should be used carefully for images that are immediately visible when the page loads.

In general:

• Use lazy loading for below-the-fold content images.
• Avoid lazy loading the main hero image if it is the Largest Contentful Paint element.
• Test pages after enabling lazy loading, especially if a theme or plugin adds its own lazy loading behavior.

Prioritize Important Images

Some images are more important to the initial loading experience than others. A hero image, product image, or primary article image may be a major visual element near the top of the page.

For important above-the-fold images, consider whether the image should be loaded earlier rather than delayed.

Modern HTML supports fetchpriority:

<img
  src="home-exterior-remodel.jpg"
  width="1200"
  height="675"
  fetchpriority="high"
  alt="Updated home exterior with new siding and front entry">

This should be used selectively. Marking too many images as high priority can reduce the usefulness of the signal. It is usually most appropriate for one primary image that strongly affects the initial viewport or Largest Contentful Paint.

Make Images Crawlable and Indexable

Search engines need access to image files in order to crawl and index them. If image URLs are blocked, broken, redirected poorly, or loaded in a way that search engines cannot process, image visibility may be limited.

Check that:

• Important image URLs return a successful status code.
• Images are not blocked by robots.txt.
• Images are not hidden behind authentication.
• CDN image URLs are accessible.
• Redirects are intentional and not excessive.
• Canonical page structure is clear when the same image appears in multiple places.

Image crawlability is part of broader technical SEO. It connects with URL structure, internal linking, sitemaps, performance, and indexability. For related technical cleanup, see web standards and quality assurance.

Use Image Sitemaps When Helpful

Image sitemaps can help search engines discover important images, especially when images are loaded through JavaScript, galleries, or complex templates.

Many websites include image information within their XML sitemap automatically. WordPress SEO plugins may handle this depending on configuration.

Image sitemap inclusion can be useful for:

• Large media libraries.
• Product images.
• Portfolio galleries.
• Recipe images.
• News or editorial images.
• Visual documentation or instructional content.

Support Images With Surrounding Context

Search engines do not interpret images from alt text alone. The surrounding content also matters.

An image is easier to understand when the page provides clear context through:

• Nearby headings.
• Relevant body copy.
• Captions when helpful.
• Structured page organization.
• Descriptive filenames.
• Relevant internal links.

For example, an image of a finished kitchen remodel is more meaningful when it appears in a section about cabinet layout, countertop materials, or lighting design than when it is placed without context.

Captions are not required for every image, but they can be useful when the image adds evidence, explanation, location, attribution, or detail that supports the page.

Serve Images Efficiently

Image delivery affects how quickly a page becomes usable. Efficient delivery often involves more than compression alone.

Consider these delivery factors:

• Browser caching: Image files that do not change often can usually be cached for longer periods.
• CDN usage: A content delivery network can serve images from locations closer to users.
• Modern formats: Serving WebP or AVIF where supported can reduce bandwidth.
• Correct MIME types: Image files should be served with appropriate content types.
• HTTPS: Images should be delivered securely to avoid mixed-content issues.
• Clean redirects: Image files should not pass through unnecessary redirect chains.

A CDN can be helpful, but it should be configured carefully. Poor caching rules, broken transformations, or inconsistent URLs can create problems. The goal is stable delivery, not complexity for its own sake.

Image SEO Checklist

Use this checklist when reviewing images on a website:

• Images use an appropriate file format.
• Image dimensions match their display needs.
• Files are compressed without unacceptable quality loss.
• Filenames are descriptive and readable.
• Informative images have useful alt text.
• Decorative images use empty alt attributes.
• Responsive image markup is present where needed.
• Width and height attributes are included or layout space is reserved.
• Below-the-fold images are lazy loaded.
• Important above-the-fold images are not delayed unnecessarily.
• Image URLs are crawlable and return successful status codes.
• Important images are included in XML sitemaps when appropriate.
• Images are supported by relevant surrounding content.
• CDN and caching behavior are working correctly.
• Pages are tested for performance and layout stability.

Image SEO FAQ

Does alt text help SEO?

Alt text can help search engines understand image content, but its first purpose is accessibility. The best alt text describes the image clearly and accurately in the context of the page.

Should every image have alt text?

Every image should have an alt attribute, but not every image needs descriptive alt text. Informative images should be described. Decorative images should usually use an empty alt attribute: alt="".

Is WebP better than JPEG or PNG?

WebP is often more efficient than JPEG or PNG, but the best format depends on the image and the website’s needs. Photographs, transparent graphics, icons, and illustrations may each call for a different approach.

Can large images hurt rankings?

Large image files can slow down pages, and slow pages can create a poor user experience. Performance is one part of technical SEO and page quality. The practical goal is to make images as light as possible while keeping them visually useful.

Should hero images be lazy loaded?

Usually no. If the hero image is visible immediately when the page loads, lazy loading may delay an important visual element. Lazy loading is generally better for images farther down the page.

The Sum

Image SEO works best when it is treated as part of the whole page. A useful image should be clear to people, accessible to assistive technology, efficient for browsers, and understandable to search engines.

The strongest approach is steady and practical: choose the right format, resize the file, compress it well, write accurate alt text, preserve layout stability, and make important image assets easy to crawl. These habits support better performance, better accessibility, and a more reliable website over time.

Lucent AND Stephen