photo_library On-Page & Content

Image SEO Checker

Check alt text, dimensions, lazy loading, and modern formats on a page.

Scan the images on a page for missing alt text, missing width and height, lazy loading, responsive srcset, and modern formats like WebP and AVIF.

build_circle Try the free tool
list On this page expand_more
star

Key takeaways

  • check_circle Images affect accessibility, layout stability, page speed, and image search, so their markup deserves the same care as text.
  • check_circle A missing alt attribute is a failure, while an empty alt is correct for purely decorative images.
  • check_circle Declared width and height let the browser reserve space and prevent layout shift.
  • check_circle Lazy load images below the fold but keep the main hero image eager.
  • check_circle WebP and AVIF usually deliver smaller files than JPEG and PNG, and srcset lets phones download smaller versions.
  • check_circle This tool reads the served HTML only, so it cannot measure file size or see JavaScript-added images.
  • check_circle Fix the template or component once, then recheck, rather than editing images one by one.
photo_library

What is Image SEO Checker?

Image SEO is the work of making pictures useful to three audiences at once: people using assistive technology, search engines that index images, and visitors who need pages to load quickly and steadily. The main levers are alt text, file names, declared dimensions, lazy loading, responsive sizes, and modern file formats. Done well, these habits help a page rank, load, and read for everyone.

The HeyLead Image SEO Checker fetches a page and reads the img tags in its served HTML. It reports the number of images, how many lack an alt attribute, and how many use lazy loading. Six checks follow: alt attribute present, descriptive alt text, width and height set, lazy loading below the fold, modern formats, and responsive srcset. A preview lists up to twelve offending images with their source paths, so you know exactly where to look. Inline data URIs are skipped, and data-src attributes used by lazy-loading scripts are recognized.

The tool works from markup, so it complements rather than replaces performance tools. It does not measure file weight, decode pixel dimensions, or run JavaScript, and it estimates above and below the fold by treating the first two images as visible. Use it as a fast template review, then confirm important details, such as which image is your largest contentful element, in browser developer tools.

insights

Why image SEO matters

Images are often the heaviest part of a page and the least documented. Small markup habits decide whether a screen reader user understands the content, whether the layout stays steady while loading, and whether search engines can associate a picture with the right topic. These fixes are cheap and repeatable. Checking them regularly keeps templates from drifting.

arrow_forward Alt text gives screen reader users the meaning of an image and gives search engines context.
arrow_forward Declared dimensions reduce layout shift, which frustrates readers and affects Core Web Vitals.
arrow_forward Lazy loading and responsive sizes reduce the data a page must download up front.
arrow_forward Descriptive images and file names support discovery in image search for products and services.
play_circle

How to use this tool

  1. 1

    Enter a URL

    Choose a page with important images, like a service or product page.

  2. 2

    Review image issues

    See alt text gaps, missing dimensions, and lazy-load opportunities.

  3. 3

    Fix the templates

    Update your image markup and re-check.

fact_check

What this tool checks

verified

Alt attribute present

Counts img tags that have no alt attribute at all. An empty alt is allowed for decorative images, but a missing attribute leaves screen readers and image search with nothing to use.

verified

Descriptive alt text

Flags alt text that is shorter than five characters, ends in a file extension such as .jpg, or looks like a camera name such as IMG_1234 or DSC0042.

verified

Width and height declared

Measures how many images carry both width and height attributes. At least 90 percent must pass, since declared dimensions let the browser reserve space and reduce layout shift.

verified

Lazy loading

Treats the first two images as above the fold and the rest as below it, then checks that at least 70 percent of the below-the-fold images use loading="lazy".

verified

Modern formats

Checks the share of raster images served as WebP or AVIF, including picture source elements with those types. At least 50 percent must be modern to pass.

verified

Responsive srcset

Looks for at least one image using a srcset attribute, which lets browsers pick a smaller file for small screens instead of sending one large image to everyone.

engineering

Technical guide

Signals, standards, and what to fix when checks fail.

code

What the scan reads

The tool fetches the page and examines every img tag in the served HTML, skipping inline data URIs. It uses the src attribute, or data-src when a lazy-loading script stores the address there. Because it reads markup only, images added by JavaScript are not seen, and CSS background images are not included. If no img tags exist in the HTML, the tool reports that no images were found rather than passing the page. Keep this limit in mind when a result looks surprisingly short.
code

Alt text rules it applies

An image with no alt attribute is a failure. An image with an empty alt is treated as intentionally decorative and passes, which matches accessibility guidance. Non-empty alt text is flagged as weak when it is under five characters, ends in an image file extension, or begins with a pattern like img, image, dsc, or photo followed by digits. The preview lists up to twelve offending images with their source paths so you can find them quickly. Fix the missing ones first.
code

Dimensions, lazy loading, and above the fold

An image passes the dimension test when both width and height attributes are present, and the check needs 90 percent coverage. For lazy loading, the tool cannot render the page, so it assumes the first two images are above the fold and evaluates the rest. That is a heuristic, not a measurement, so confirm which image is your real largest visible element in browser tools before changing loading attributes. Both attributes are needed, since one alone does not give a ratio. Fix templates, not single images.
code

Formats and srcset detection

Format is judged from the file extension in the image URL path. JPG, JPEG, PNG, GIF, WebP, and AVIF count as raster, and WebP or AVIF count as modern. Picture source elements with image/webp or image/avif types add to the modern count. SVG is not counted as raster. The tool does not measure file weight, dimensions in pixels, or compression quality, so pair it with a speed test for size. Extensionless image URLs from some CDNs may therefore be counted as neither. The verdict is an estimate of adoption, not proof of delivery.
school

Deep dive

description

Writing alt text that helps people and search

Good alt text answers a simple question: if the image were missing, what would a reader need to know? For informative images, describe the subject and context in a short natural phrase. For functional images, such as a logo that links home or an icon button, describe the action or destination instead of the picture. For charts, summarize the key finding and put fuller data in nearby text. Decorative images get an empty alt. Avoid starting with words like image of, since screen readers already announce an image. Include a relevant keyword only when it fits naturally, and never repeat the same phrase across many images. A useful habit is to read the alt text aloud with the image hidden. If it makes sense in the flow of the page, it is probably right.

Informative images

Describe what matters in the context of the page. A product photo might mention the item, color, and angle, while a team photo can name the setting and activity. Skip details that do not help.

Functional images

When an image is a link or button, the alt text should say what happens on click, such as Go to homepage, not describe the logo artwork. Icon-only buttons need this most.

Complex images

For charts and diagrams, give a short summary in alt text and place the detailed data or explanation in visible text or a table beside it. Users should never need the image to get the point.

speed

Dimensions, layout shift, and lazy loading

Layout shift happens when the browser draws text first and then pushes it down as images arrive. Declaring width and height solves most of it, because modern browsers use those attributes to calculate the aspect ratio and reserve space before the file downloads. Pair the attributes with CSS such as max-width: 100% and height: auto so images stay responsive. Lazy loading complements this by postponing offscreen images, but it must be applied selectively. Loading the largest visible image lazily can delay it, so keep the hero image eager and consider a high fetch priority. Because this tool cannot render the page, it assumes the first two images are visible and judges the rest. Review its lazy loading verdict against your actual layout, especially on templates with large headers, sliders, or sticky banners.

Reserve space early

Add both width and height to every image, matching the intrinsic ratio of the file. The browser then holds the space and the page stops jumping. Editors rarely need to set them by hand if the theme handles it.

Protect the hero image

Do not lazy load the largest above-the-fold image. Leave it eager, and preload it if your speed report recommends that. Let below-the-fold images defer.

Check sliders and carousels

Hidden slides are good lazy loading candidates, but the first visible slide is not. Confirm your slider script respects this, and check it in a real browser on a phone.

image

Modern formats and responsive delivery

Image files are frequently the largest downloads on a page, so format and sizing choices carry real weight. WebP and AVIF typically compress photos and graphics into smaller files than JPEG and PNG at comparable visual quality, and current browsers support them. A picture element can offer AVIF or WebP first and fall back to JPEG for anything that cannot read them. Responsive delivery is the second half. With srcset and sizes, the browser picks the smallest adequate file for the viewport and pixel density, so phones do not download desktop-sized banners. Keep the original at a sensible maximum, resize to real display widths, and let your CMS or image service generate variants. This tool reads file extensions and picture sources, so it estimates adoption of modern formats but cannot measure the final weight.

Choosing a format

Use WebP or AVIF for photos and graphics, SVG for logos and simple icons, and keep PNG only where lossless transparency is needed and smaller formats are unsuitable. Check each format renders correctly.

Serving right-sized files

Generate several widths for each image and describe them with srcset and sizes. Small screens then download far less than large desktop displays. Three or four widths usually suffice.

Automate the pipeline

Configure your CMS, plugin, or CDN to convert and resize on upload. Manual optimization does not scale across hundreds of images. Automation keeps quality consistent. Set sensible quality levels once.

travel_explore

Image search, file names, and regional pages

Search engines discover images through the pages that embed them, so context matters as much as markup. Place important images near relevant headings and text, use descriptive hyphenated file names, and keep alt text consistent with the surrounding copy. Product and service images can appear in image search results, which is especially useful for visual categories. If you serve the US, UK, Australia, and Singapore, localize image context and not only the language. Alt text and captions should use the spelling of the market, such as colour in en-GB and en-AU pages, and show local settings, currency on signs or products, and regional examples where they support the message. Avoid copying US alt text onto every regional page without reviewing it. Finally, keep image URLs stable, because moving files can break both rankings and embeds.

Context and file names

Descriptive file names such as red-running-shoes-side.webp and nearby text give search engines signals. Keep them short, lowercase, and hyphen separated. Avoid spaces, underscores, and camera defaults like IMG_1234, which tell search engines nothing.

Localize alt text

Use market spelling and vocabulary in alt text for en-GB, en-AU, and en-SG pages, and reflect local imagery where it is relevant to visitors. Keep meaning identical across markets. Review them per region.

Keep image URLs stable

When you rename or move image files, redirect the old URLs or update embeds. Broken image URLs harm both users and image search visibility. Update sitemaps as well.

compare

Examples

thumb_up Strong examples

Descriptive alt with dimensions

<img src="/img/team-meeting.webp" alt="Marketing team reviewing a campaign dashboard" width="1200" height="800">

Alt text describes the scene in plain language, and the declared size lets the browser reserve space before the file arrives, preventing layout shift. Both habits are easy to template.

Responsive lazy image

<img src="/img/chart-800.webp" srcset="/img/chart-400.webp 400w, /img/chart-800.webp 800w" sizes="(max-width: 600px) 100vw, 800px" alt="Line chart of monthly leads" loading="lazy" width="800" height="450">

Combines srcset, sizes, lazy loading, and dimensions, so phones get a smaller file and the image loads only when needed. Each attribute solves a different problem, and together they cover most needs.

Decorative image handled correctly

<img src="/img/divider.svg" alt="" width="600" height="8">

An empty alt tells screen readers to skip a purely decorative element, which is the correct approach and is not penalized by this tool. Use it sparingly and only for true decoration.

thumb_down Weak examples

Missing alt attribute

<img src="/img/team-meeting.jpg">

With no alt attribute, screen readers may read the file name aloud and search engines get no description. Add descriptive alt text, or alt="" if it is decorative.

Filename as alt text

<img src="/img/IMG_1234.jpg" alt="IMG_1234.jpg">

This alt text repeats a camera file name, so it describes nothing. The checker flags it as weak. Write what the image actually shows.

Keyword stuffing

<img src="/img/shoe.jpg" alt="buy cheap shoes best shoes online shoes sale">

A list of search terms reads badly to screen reader users and offers no real context. Describe the product naturally, for example the color, style, and view.

rule

Best practices and common mistakes

check_circle Best practices

  • done Write short, natural alt text that describes what the image shows and why it is on the page, and use alt="" only for decorative images.
  • done Set width and height attributes, or an aspect-ratio, on every image so the layout does not jump as pictures load.
  • done Lazy load images below the fold, and leave the main hero image eager, ideally with a high fetch priority.
  • done Serve WebP or AVIF for photos and graphics, with a JPEG or PNG fallback through a picture element where needed.
  • done Use srcset and sizes so phones download smaller files than desktops.
  • done Use descriptive, hyphenated file names such as blue-widget-front.webp instead of camera defaults.

cancel Common mistakes

  • close Stuffing keywords into alt text, which reads badly in screen readers and offers no benefit.
  • close Lazy loading the largest visible image, which can delay how quickly the page appears complete.
  • close Using file names like IMG_1234.jpg or DSC0042 as alt text.
  • close Putting important text inside images without repeating it in real HTML.
  • close Leaving out width and height, then wondering why buttons move as the page loads.
lightbulb

Common use cases

task_alt

Improving layout stability and load speed on a landing page.

task_alt

Running a quick accessibility review of a key template.

task_alt

Preparing product pages so images are eligible for image search.

task_alt

Checking that a CMS or theme update did not strip alt text or lazy loading.

task_alt

Comparing image markup discipline against a competitor's page.

groups

Who should use this

person SEO managers reviewing on-page fundamentals. person Developers and theme authors setting image markup. person Ecommerce teams with large product image libraries. person Accessibility reviewers auditing alternative text. person Content editors who upload images daily.
dictionary

Glossary

Alt text
A text alternative in the alt attribute that describes an image for screen readers and search engines, and displays if the image fails.
Lazy loading
Deferring the download of an image until it is near the viewport, usually with the loading="lazy" attribute, to speed up the initial page load.
srcset
An img attribute listing multiple image files at different widths so the browser can choose the best one for the screen.
WebP
A modern image format from Google that usually produces smaller files than JPEG or PNG at similar visual quality.
AVIF
A newer image format that often compresses even better than WebP, supported by current major browsers.
Cumulative Layout Shift
A Core Web Vitals metric that measures unexpected movement of page content while it loads, often caused by images without dimensions.
Above the fold
Content visible without scrolling. Images here should load immediately, not lazily, because they shape first impressions and speed.
Decorative image
An image that adds no information, such as a divider. It should have an empty alt attribute so assistive technology ignores it.
quiz

Frequently asked questions

Ready for a deeper audit?

HeyLead reviews your site, competitors, and growth opportunities with no sales pressure.

Get a Free Audit arrow_forward