ImgSEO Guide - Ecommerce Image SEO and Free Capability Addendum

Preface

Image quality signals now influence discovery across traditional image search, visual search, and answer-engine workflows. Teams need repeatable standards for filename semantics, alt quality, metadata, rendering performance, and accessibility clarity.

This guide keeps the implementation advice generic and framework-agnostic, then adds a focused section on how ImgSEO Free maps those standards into real-time, local, on-page audits.

1. ImgSEO Free capability addendum

What Free core covers

On-page score markers for visible product images on allowed domains.
Hover-to-open detailed tooltip with explainable signal breakdown and recommendations.
Weighted scoring with dynamic normalization when some signals are unavailable (now 13 dimensions).
Metadata parsing for EXIF, IPTC, XMP, now powered by ExifReader for comprehensive format support.
Page-level structural analysis covering Responsive markup, Lazy Loading, and Image Format optimization.
Local-only analysis with no image or business data upload.

Score normalization model

basePoints = sum(points for available dimensions)
activeWeight = sum(weight for available dimensions)
finalScore = activeWeight > 0
  ? Math.round((basePoints / activeWeight) * 100)
  : 0;

Content-to-background payload signals

{
  src: string,
  alt: string,
  pageSignals: {
    naturalWidth: number | null,
    naturalHeight: number | null,
    loadTimeMs: number | null,
    transferSize: number | null,
    encodedBodySize: number | null
  }
}

Performance and degrade policies

Hover intent debounce is tuned for responsive checks (~250ms).
Image fetch prefers browser cache when available.
Short-lived source-level cache reduces repeated heavy parsing.
Large assets can switch to a lightweight path to preserve interaction speed.

2. ImgSEO suggestions reference

This section lists the full suggestion library used by the extension. The wording below matches runtime output from seo-analyzer so teams can map tooltip findings to implementation guidance.

Alt

Add alt text that includes core product keywords.
Replace generic words with product name, attributes, and context.
Expand alt text to at least {minAltLength} characters.
Keep alt text around 50-125 characters and avoid keyword stuffing.
Shorten alt text to the most important product descriptors.
Include semantic keywords such as brand, category, and key attributes in alt text.

Default: {minAltLength} is currently 12.

Filename

Use a readable filename that includes product keywords.
Rename filename using a "brand-category-key-attribute" pattern; avoid pure numbers and dimensions.
Add at least 2 semantic words to filename (for example brand, category, color).
Keep filename length within 8-64 characters for readability and semantics.

Metadata

Preserve title, description, keywords, and copyright metadata when exporting images.
Add keyword fields in EXIF/IPTC/XMP metadata.
Prioritize title, description, creator, and copyright fields for better SEO usage.

Size

Use near-square product images at 800x800 or 1200x1200 for stronger ecommerce SEO visibility.

Performance

Compress image bytes, adopt responsive image sizes, and prioritize above-the-fold image delivery for better LCP.

Contrast

Increase contrast between foreground subjects and background context to approach WCAG 4.5:1.

Color

Balance primary and secondary tones to improve visual hierarchy and product distinguishability.

Responsive

Use srcset and sizes attributes or a <picture> element to serve appropriately sized images for different devices.

Lazy Loading

Remove loading="lazy" from above-the-fold (LCP) images to avoid delaying their loading.
Add loading="lazy" to off-screen images to defer loading and improve page speed.

Image Format

Consider converting to WebP or AVIF for better compression and smaller file sizes.
Convert GIFs to WebP, AVIF, or MP4 for better performance.
Use a web-optimized modern format like WebP or AVIF.

Caption

Wrap image in <figure> with a descriptive <figcaption>, or add a title attribute to provide context.
Expand figcaption to at least 10 characters with descriptive context about the image.

Structured Data

Add JSON-LD with ImageObject or Product schema including image URLs, captions, and creator info.
Enrich your ImageObject or Product schema with caption, creator, and license properties.

Surrounding Text

Place descriptive paragraphs near the image that reference the product name, attributes, and context.

3. Browser compatibility snapshot (Chrome & Safari)

Chrome (Chromium)

Manifest V3 is the stable baseline for extension behavior.
Content scripts, hover interaction, and local parsing workflows are reliable.
Resource timing and image access vary by site policy; unavailable signals should be handled explicitly.

Safari (WebKit)

Web Extension support is mature, but platform permissions are stricter.
Cross-origin and privacy constraints can reduce available timing/pixel signals on some pages.
A fallback-friendly scoring model is essential for cross-browser consistency.

Recommendation: design for partial signal availability rather than assuming every dimension is readable on every page.

4. Market trends

Visual-first discovery keeps increasing for product-led categories.
AI summaries increasingly depend on image-text consistency and metadata quality.
Teams need auditing workflows that are fast enough for merchandising cycles, not just one-time audits.
Explainable scoring improves prioritization and reduces subjective SEO debates.

5. HTML structure best practices for ecommerce images

Core principles

Use responsive image delivery with modern formats and clear fallbacks.
Maintain semantic alt text and descriptive filenames.
Set width and height to stabilize layout and improve rendering performance.
Use structured data where it accurately reflects product/image context.

Recommended markup example

<picture>
  <source
    srcset="product/red-leather-running-shoes-800w.avif 800w,
            product/red-leather-running-shoes-1200w.avif 1200w"
    sizes="(max-width: 768px) 100vw, 50vw"
    type="image/avif">

  <source
    srcset="product/red-leather-running-shoes-800w.webp 800w,
            product/red-leather-running-shoes-1200w.webp 1200w"
    sizes="(max-width: 768px) 100vw, 50vw"
    type="image/webp">

  <img
    src="product/red-leather-running-shoes-800w.jpg"
    alt="Red leather running shoes, front view, breathable upper"
    width="800"
    height="800"
    loading="lazy"
    fetchpriority="high"
    decoding="async"
    class="product-image"
    itemprop="image">
</picture>

6. SEO and AEO best practices

SEO baseline

Use descriptive, readable, kebab-case filenames.
Write natural alt text that reflects what users actually see.
Balance quality and payload size to protect Core Web Vitals.
Keep image context consistent across surrounding copy and structured data.

AEO alignment

Improve entity clarity (brand, product type, attributes, material, color).
Keep visual content and textual context tightly aligned.
Prioritize consistency across channels so AI systems see stable signals.

7. Implementation checklist

Adopt responsive image markup (`picture`, `srcset`, `sizes`) where applicable.
Enforce filename and alt conventions in upload workflows.
Define acceptable payload budgets for key image slots.
Audit metadata preservation behavior in your export pipeline.
Run recurring page-level audits and track remediation throughput.

8. Conclusion and next steps

Sustainable image SEO is an operational system, not a one-time cleanup. Combine standards-driven markup, measurable signal quality, and repeatable audit loops to improve both search visibility and merchandising execution speed.

Start now

Align image standards across product, design, and SEO stakeholders.
Use on-page audits to catch regressions during catalog updates.
Separate free daily checks from advanced workflow upgrades in your rollout plan.

Ecommerce Image SEO Guide with ImgSEO Free Capability Addendum