How to Audit Images for SEO Before Publishing a Page

Images are usually added late in the publishing process.

The copy is approved. The layout is ready. The CMS entry is almost done. Then someone adds a hero image, a few screenshots, a product photo, a diagram, a team picture, a social preview image, and maybe a decorative illustration in the background.

The page looks finished.

But image SEO problems often hide in that final layer. The page may have missing alt text. The hero image may be lazy-loaded by mistake. The main screenshot may be a huge PNG. The image may have no width or height attributes, causing layout shifts. The Open Graph image may be cropped badly. The article schema may point to an old image. A decorative image may be announced to screen readers as if it were meaningful content.

None of these issues feels dramatic when you look at the page quickly. Together, they can make a polished page slower, less accessible, harder to understand, and less reliable when shared or discovered.

That is why images deserve their own pre-publish audit.

Image SEO is not only about writing alt text. A good image audit checks whether images are discoverable, descriptive, accessible, fast, stable, and connected to the topic of the page.

Why image SEO breaks before launch

Most image issues are not caused by bad intentions. They happen because images move through many hands.

A designer exports a visual. A developer compresses it. A marketer uploads it to the CMS. A content editor changes the headline but forgets the image metadata. A framework adds lazy loading automatically. A plugin converts some images to WebP but not others. A migration changes image URLs. A social preview is inherited from an older page.

By the time the page is ready to publish, the visual layer may have several small inconsistencies.

Common image problems include:

missing alt text
generic alt text
keyword-stuffed alt text
decorative images treated as meaningful images
oversized PNG or JPEG files
images not served in modern formats
missing width and height attributes
lazy-loaded hero images
broken image URLs
CSS background images used for important content
poor social preview crops
schema images pointing to the wrong asset
screenshots that are unreadable on mobile
filenames like `image-1.png` or `final-final-hero.jpg`

The page can still look fine to a person on a fast connection. But search engines, assistive technologies, social platforms, and performance tools may see a different story.

Image SEO is more than alt text

Alt text matters, but it is only one part of image SEO.

A complete image audit covers five layers:

**Discoverability**

Can crawlers and browsers find the image in a reliable way?

**Meaning**

Does the image have useful context through alt text, filenames, captions, nearby copy, or structured data?

**Accessibility**

Can people who use assistive technologies understand the purpose of the image?

**Performance**

Is the image delivered in the right format and size without slowing down the page?

**Stability**

Does the image reserve space properly so the layout does not jump while loading?

If you only check alt text, you may miss the performance problem. If you only compress files, you may miss the accessibility problem. If you only look at the visual design, you may miss the fact that the hero image is invisible to the browser until JavaScript runs.

A useful audit looks at the whole image system.

Start by finding every image on the page

Before judging image quality, first identify what images actually exist on the page.

That includes:

hero images
product screenshots
diagrams
charts
thumbnails
author photos
logos
icons
background images
carousel images
social preview images
schema images
decorative illustrations

This step is important because not every image is visible at first glance. Some images appear only on mobile. Some are inside sliders. Some load after interaction. Some are injected by a CMS component. Some are referenced only in metadata or structured data.

A page-level image audit should not rely only on what the designer sees in the viewport. It should inspect the page source, rendered DOM, metadata, and structured data.

Check whether important images are crawlable

Search systems understand images best when they are embedded in standard, crawlable HTML and supported by useful page context.

For meaningful images, prefer standard image markup:

```html <img src="/images/product-dashboard.webp" alt="Project dashboard showing active tasks and team status" width="1200" height="800" /> ```

Be careful when important content is only delivered through CSS background images:

```css .hero { background-image: url("/images/product-dashboard.webp"); } ```

Background images can be useful for decoration and layout, but they are usually not the best choice for content that needs meaning, alt text, or strong search context.

If the image carries information, it should normally be part of the content layer, not only the design layer.

Audit alt text with context

Alt text should describe the image in the context of the page.

That last phrase matters: **in the context of the page**.

The same image can need different alt text depending on where it appears. A screenshot on a product page, a tutorial, a comparison article, and a help document may all emphasize different details.

Weak alt text:

```html <img src="/dashboard.png" alt="image" /> ```

Better alt text:

```html <img src="/dashboard.png" alt="Dashboard showing unresolved SEO issues grouped by metadata, links, schema, and accessibility" /> ```

Over-optimized alt text:

```html <img src="/dashboard.png" alt="best SEO audit tool Chrome extension technical SEO checker on-page SEO software" /> ```

That last example is not helpful. It is just keyword stuffing with an image attached.

Good alt text should be:

specific
concise
relevant to the page
useful for someone who cannot see the image
free from unnecessary keyword repetition

If nearby text already explains the image, the alt text can be shorter. If the image contains important information not repeated elsewhere, the alt text may need more detail.

Know when alt text should be empty

Not every image needs descriptive alt text.

Decorative images should usually use empty alt text:

```html <img src="/images/abstract-shape.svg" alt="" /> ```

That tells assistive technologies to skip the image instead of announcing something meaningless like “abstract green shape” or “decorative line.”

This is a common place where SEO and accessibility get confused. Some teams try to fill every empty alt field because a CMS marks it as an issue. But empty alt text is correct when the image is purely decorative.

The better question is not “Does every image have alt text?”

The better question is:

```txt Does every meaningful image have useful alt text, and does every decorative image stay out of the way? ```

That is a more mature audit.

Watch for image text that machines cannot read well

Designers often place important words inside images: feature names, chart labels, value propositions, badges, screenshots, or promotional copy.

Sometimes that is unavoidable. But if the image contains important text, make sure the same information is also available in HTML nearby.

For example, a hero image that says “Audit your page before publishing” should not be the only place that message appears. The page should also include that statement as real text.

This helps:

accessibility
search understanding
translation
responsive design
AI summarization
content extraction

Images can support the message. They should not be the only container for the message.

Check image formats

Image format is one of the easiest ways to lose performance without noticing.

Common formats include:

**JPEG** for photography
**PNG** for images that need transparency or sharp UI details
**WebP** for modern compressed images
**AVIF** for strong compression where browser support and tooling are appropriate
**SVG** for logos, icons, and simple vector graphics
**GIF** for simple animation, although video formats are often better for larger motion

A common pre-launch issue is using a large PNG for a hero image or screenshot when a properly compressed WebP would be smaller.

Another common issue is using JPEG for logos or icons that should be SVG.

Format decisions should be practical, not ideological. The best image format is the one that preserves enough quality at the smallest reasonable file size while remaining compatible with the page and audience.

For many marketing pages and blog posts, WebP is a strong default for screenshots, UI images, and compressed visual assets. But do not stop at the file extension. Check file size, rendered dimensions, compression quality, and whether the image looks sharp on high-density screens.

Check whether images are oversized

One of the simplest image audit questions is also one of the most useful:

```txt Is the browser downloading more image than it needs? ```

If a card thumbnail displays at 320 pixels wide, it should not require a 2400-pixel-wide file. If a mobile hero image displays at 390 pixels wide, the mobile browser should not be forced to download a huge desktop image.

Responsive image markup can help:

```html <img src="/images/dashboard-800.webp" srcset="/images/dashboard-400.webp 400w, /images/dashboard-800.webp 800w, /images/dashboard-1200.webp 1200w" sizes="(max-width: 768px) 100vw, 800px" alt="Dashboard showing technical SEO issues before publishing" width="1200" height="800" /> ```

You do not need complex responsive image markup for every tiny asset. But for hero images, product screenshots, editorial images, and large visual sections, it can make a real difference.

Check lazy loading

Lazy loading is useful when it delays images that are not needed immediately. It can reduce initial page weight and help the page load faster.

But lazy loading can also be misused.

A below-the-fold image is often a good candidate:

```html <img src="/images/later-section.webp" alt="Example of an image SEO audit report" loading="lazy" /> ```

A hero image or likely Largest Contentful Paint image usually should not be lazy-loaded:

```html <img src="/images/hero.webp" alt="SEO audit dashboard in Chrome" loading="lazy" /> ```

That can delay the most important visual element on the page.

A good audit should check which images use lazy loading and whether that decision matches their position and importance.

Useful rule of thumb:

above-the-fold hero image: usually eager
important LCP image: usually eager
below-the-fold editorial images: often lazy
thumbnails far down the page: often lazy
decorative below-the-fold images: often lazy or removable

Lazy loading is not automatically good or bad. Placement matters.

Check width and height attributes

Images without dimensions can cause layout shifts.

When the browser does not know how much space an image will occupy, it may render the page first and then move content when the image loads. That jump is frustrating for users and can contribute to poor layout stability.

This is why image markup should include dimensions when possible:

```html <img src="/images/report-preview.webp" alt="Report preview showing image SEO issues" width="1200" height="800" /> ```

The dimensions do not have to match the final rendered CSS size exactly. They help the browser calculate the aspect ratio and reserve the correct amount of space.

This is especially important for:

hero images
article images
product images
cards
image grids
embeds
thumbnails above the fold

A page that feels visually stable usually has image sizing handled deliberately.

A page can pass an image SEO audit and still look bad when shared.

Open Graph and Twitter Card images affect how a page appears in social feeds, messaging apps, and link previews. For many marketing pages, this is the first visual impression a person sees outside the site.

Check metadata such as:

```html <meta property="og:image" content="https://example.com/images/social-preview.jpg" /> <meta name="twitter:image" content="https://example.com/images/social-preview.jpg" /> ```

Then review the actual image:

Is it the correct image for this page?
Is the crop safe for common preview formats?
Is the text readable on mobile?
Does it match the current title and positioning?
Is it too generic?
Does it still reference an old brand, feature, or date?
Does the image URL return a clean `200 OK` response?
Is the image large enough for high-quality previews?

This is a publishing detail that often gets missed because the page itself looks fine.

Check schema images

Structured data can reference images for articles, products, software, recipes, organizations, and other entities.

For an article, the schema image should match the actual article and be accessible. For a product, it should represent the product accurately. For a software page, the image should not be an unrelated decorative asset.

A simplified article example:

```html <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "How to Audit Images for SEO Before Publishing a Page", "image": "https://example.com/images/image-seo-audit-cover.jpg", "author": { "@type": "Organization", "name": "Crowra" } } </script> ```

Common schema image issues include:

missing image field where one is expected
image URL blocked by robots.txt
image URL returning 404
schema image not matching the visible page
old social image reused in structured data
image too small or badly cropped
relative URL used where an absolute URL is safer

Structured data should reinforce what is visible on the page. It should not describe a different visual asset.

Check filenames and surrounding context

Filenames are not the strongest image signal, but they still matter as part of the overall context.

A filename like this is not helpful:

```txt IMG_4829.png ```

A filename like this is better:

```txt image-seo-audit-dashboard.webp ```

Do not overdo it. A filename should be descriptive, not stuffed.

The surrounding content matters too. A useful caption, heading, paragraph, or product description near the image can help explain what the image shows.

For example, a screenshot after a heading called “Image audit filters” has more context than the same screenshot dropped into a page with no explanation.

Machines read patterns. So do people.

Check accessibility beyond alt text

Accessibility is not finished when alt text exists.

An image audit should also consider:

whether text inside images is repeated in HTML
whether low-contrast text is used in graphics
whether charts have text explanations
whether icons have accessible labels when they act as controls
whether decorative SVGs are hidden from assistive technologies
whether image links have meaningful accessible names
whether carousels are usable by keyboard and screen readers

A product screenshot with tiny UI text may look impressive, but it may not communicate much on mobile. A chart with no explanation may be visually attractive but inaccessible. An icon-only button may be confusing if it lacks a label.

Image SEO and accessibility are not the same discipline, but they overlap heavily. Both ask whether visual information can be understood.

Check mobile rendering

Images often look acceptable on desktop and fail on mobile.

Before publishing, review:

hero crop
screenshot readability
text inside images
image aspect ratio
carousel behavior
thumbnail scaling
image spacing
page speed on mobile networks
whether the image pushes important content too far down

Mobile image problems are especially common with wide screenshots, complex diagrams, tables exported as images, and social preview graphics reused inside the page.

If the image carries important information, it should remain understandable on the smallest viewport your audience uses.

Check whether the image supports the page topic

This is the editorial part of image SEO.

A technically optimized image can still be weak if it does not help the page.

A good image should do at least one of these things:

explain the concept
show the product
prove the example
clarify a process
support trust
make comparison easier
make the page more memorable

A generic stock image of a laptop on a desk rarely adds much to a technical article. A real screenshot with callouts may be more useful. A diagram can explain a workflow. A product image can make an abstract feature concrete. A before-and-after visual can make an audit issue obvious.

Search systems are not the only audience. Readers also decide whether a page feels useful, credible, and worth sharing.

Common image SEO mistakes

### Using the same alt text everywhere

Repeating the same alt text across multiple images can be a sign that no one reviewed the images in context. Each meaningful image should have alt text that matches its role on that page.

### Making decorative images noisy

If an image is only visual decoration, do not force assistive technologies to announce it. Use empty alt text or hide it appropriately.

### Lazy-loading the hero image

This is a common performance mistake. The main above-the-fold image often needs priority, not delay.

### Forgetting image dimensions

Missing width and height attributes can contribute to layout instability. This is easy to miss when testing on a fast connection.

### Uploading huge screenshots

Screenshots are often much larger than they need to be. Compress them and serve appropriate sizes.

### Using CSS backgrounds for important images

If the image is meaningful content, a standard image element is usually more appropriate.

### Ignoring social previews

The page may look polished, but the shared link may show an outdated or poorly cropped image.

### Letting schema images drift

Structured data can quietly point to old, broken, or generic images after a redesign or migration.

A practical image SEO checklist

Use this before publishing a page.

### Image discovery

Identify every image on the page.
Check desktop and mobile versions.
Look for images loaded by sliders, tabs, and interactions.
Confirm important images are not only CSS backgrounds.
Check whether image URLs return clean responses.

### Alt text

Add useful alt text to meaningful images.
Use empty alt text for decorative images.
Avoid keyword stuffing.
Describe images in the context of the page.
Do not repeat nearby text mechanically.
Make sure image links have meaningful accessible names.

### Format and size

Use appropriate formats for the image type.
Prefer modern compressed formats where practical.
Avoid oversized PNG and JPEG files.
Use SVG for simple logos and icons where appropriate.
Serve responsive image sizes for large assets.
Check quality on high-density screens.

### Lazy loading

Lazy-load below-the-fold images where useful.
Avoid lazy-loading the main hero or LCP image.
Check whether framework defaults are creating problems.
Confirm lazy-loaded images still have dimensions.

### Dimensions and layout stability

Add width and height attributes where possible.
Preserve aspect ratios.
Avoid layout jumps when images load.
Test image-heavy sections on slower connections.
Watch cards, grids, and embeds carefully.

### Social and structured data

Check `og:image`.
Check `twitter:image`.
Preview the page in common share formats.
Confirm schema image URLs are current and accessible.
Make sure schema images match the page.

### Editorial quality

Remove images that do not support the content.
Replace generic stock visuals with useful screenshots or diagrams.
Make charts and diagrams understandable in text.
Ensure mobile crops still communicate the message.
Keep images aligned with the page topic and search intent.

How to audit images with Crowra

You can check images manually, but it gets tedious quickly. A single page may have visible images, hidden responsive images, social preview images, schema images, decorative assets, lazy-loaded files, and generated framework markup.

Crowra is built for this kind of pre-publish review.

Open the page in Chrome, run Crowra, and inspect the page beside the live content. Crowra helps you review image SEO signals such as missing alt text, image formats, lazy loading, dimensions, and decorative image status, alongside the rest of the page audit.

That context matters. An image issue is rarely isolated.

A missing alt text warning may be an accessibility issue. A non-modern image format may be a performance issue. A missing dimension may be a layout stability issue. A poor social image may be a distribution issue. A schema image mismatch may be a structured data issue.

The best audit shows those signals together instead of forcing you to jump between separate tools.

What to fix first

If the audit finds many image issues, prioritize based on impact.

Start with images that affect the first impression:

Hero image
LCP image
Product or service screenshots
Article cover image
Social preview image
Schema image
Images above the fold
Images that contain important text
Repeated images used across templates
Decorative images that create accessibility noise

Then fix the repeated template issues. If every blog post has missing dimensions, solve it in the component. If every product card downloads oversized thumbnails, fix the image pipeline. If every decorative SVG is announced to screen readers, fix the design system.

The goal is not to create a perfect one-page patch. The goal is to improve the publishing system so the same issue does not return on the next page.

When image SEO matters most

Every public page benefits from clean image handling, but some page types deserve extra attention:

product pages
SaaS landing pages
ecommerce category pages
documentation with screenshots
tutorials
comparison pages
visual case studies
portfolio pages
recipe pages
travel pages
local business pages
editorial articles with original images
pages shared heavily on social platforms

If images help a user decide, understand, compare, trust, or share, then image SEO is not cosmetic. It is part of the page’s core quality.

The bottom line

Image SEO is often treated as a small final task: add a few alt tags, compress a few files, and move on.

That is too narrow.

Images affect how a page is crawled, understood, loaded, shared, and experienced. They influence accessibility, performance, layout stability, social previews, structured data, and reader trust.

Before publishing a page, do not only ask whether the images look good.

Ask whether they are useful, accessible, fast, stable, and clear to both people and machines.