Image SEO Optimization: The Alt, File Name, and Size Trio

A 3MB above-the-fold hero image can drag mobile load time past 5 seconds and, as a bonus, waste one image-search exposure opportunity. Image SEO isn’t just dropping a few words into alt — it affects crawler understanding, the page’s speed score, and an extra traffic channel all at once.

Image optimization only needs three things watched: alt that clearly says what’s in the image, semantic lowercase-hyphen file names, and file size compressed to within twice the content area’s width resolution, converted to WebP or AVIF. Do this trio and image-search exposure usually shows a clear uptick within 4 to 8 weeks, and LCP drops by a big chunk too.

1. Write alt correctly: describe the actual content and scene in the image, 8 to 16 Chinese characters, with the main keyword naturally woven in; for charts write the conclusion, for decorative images write an empty alt.
2. Semantic naming: rename files to lowercase English with hyphens before uploading; product images carry the model number and key attributes, never camera defaults like IMG_2043.
3. Compress and pick the format: export resolution at twice the content area width, above-the-fold images under 200KB, body images within 100KB, photos to WebP, icons to SVG.
4. Declare dimensions and control loading: add width/height to eliminate CLS, use fetchpriority=”high” for the above-the-fold hero to load early, and lazy-load only images outside the first screen.
5. Make sure the search engine can grab them: put the image URL in src rather than data-src, generate an image sitemap, check robots.txt isn’t blocking the upload directory, and verify the CDN domain in the webmaster console.

How to actually write alt

Alt’s first job is accessibility; its second job is giving crawlers context. The judgment standard is simple: remove the image from the page, keep only this text, and if the reader still understands what was expressed here, it passes. Stuffing keywords not only brings no benefit, it gets judged as manipulation.

• Describe the actual content and scene in the image, keeping it to 8 to 16 Chinese characters; over 125 characters gets truncated by screen readers.
• Let the main keyword weave in naturally; don’t cram the same word into every image on a page.
• Write the conclusion clearly for charts and data graphics — “trend chart of mobile traffic at 68% in 2026” is far more useful than “data chart”.
• Pure decorative dividers and background textures get an empty alt (alt=””) so screen readers skip them.
• Product images carry the model number and key attributes — these words have very clear search intent in image search.

The caption under the image matters just as much. Search engines fold the surrounding body text, title, and caption into understanding; a 20-character caption carries no less weight than alt.

Stop naming files IMG_2043

Camera-default file names are zero information to crawlers. Rename files to semantic lowercase English with hyphens before uploading — e.g. mobile-first-index-report.webp. Chinese file names get converted into a long string of percent-encoding, which is unreadable and prone to garbling in cross-platform migrations.

Practical parameters for size compression

Size is the most direct payoff of the trio. Above-the-fold mobile images over 200KB should raise an alarm; body images within 100KB are plenty. The key to compression isn’t blindly dropping quality — it’s first lowering the resolution to a reasonable range, then choosing the right format.

• Export resolution at twice the content area width. For a site with a 720px body area, 1440px images are enough to cover HD screens.
• Photos go WebP first; a quality setting between 75 and 82 is visually indistinguishable and runs 30–40% smaller than JPEG.
• Icons, logos, and flat-color illustrations go SVG — vectors stay sharp at any resolution and often weigh just a few KB.
• Use srcset and sizes to serve different sizes to different screens; phones shouldn’t download the desktop’s big image.
• Don’t lazy-load the above-the-fold hero; instead use fetchpriority=”high” to load it early — the cheapest way to pull LCP down.

Image size and loading strategy directly decide LCP performance; adjusting them together with the Core Web Vitals optimization methods works better. For whole-site resource loading order, check item by item against the website speed optimization trio.

Getting images found and displayed

Once optimization is done, crawlers still need to grab the images. Images injected dynamically with JavaScript, if rendered too late, may leave crawlers seeing only an empty placeholder. Image URLs must live in the src or srcset attribute; lazy-loading patterns like data-src need a noscript fallback or native lazy.

• Generate a dedicated image sitemap, or add image tags to the main sitemap — indexing speeds up noticeably.
• Product images, recipe images, and tutorial images paired with matching structured data can earn the image rich-result slot; the approach is in the structured data guide.
• Check whether robots.txt mistakenly blocks /wp-content/uploads/ or the CDN directory — the #1 reason images don’t get indexed.
• Verify the CDN domain separately in the webmaster console, or a big chunk of image traffic data goes missing.

Before landing, put these four on the calendar: spot-check the 10 highest-traffic pages and compress above-the-fold images under 200KB, converting to WebP; batch-check missing alt, prioritizing body and product images while emptying decorative ones; add width/height declarations to all images to kill layout jump during load; generate and submit an image sitemap this month and check image-search exposure changes two weeks later. Do these four and both image search and LCP show real returns.

FAQ

What makes a good alt?

Describe the actual content and scene in the image, 8 to 16 Chinese characters, with the main keyword woven in naturally. Judgment standard: remove the image and keep only the text; if readers still understand what was expressed, it passes.

How should image file names be named?

Semantic lowercase English with hyphens, e.g. mobile-first-index-report.webp. Don’t use camera defaults like IMG_2043; Chinese names get converted into a long percent-encoding string.

How small should images be?

Above-the-fold images under 200KB, body images within 100KB. First lower resolution to twice the content area width, then compress; photos to WebP, icons and logos to SVG.

What if images aren’t indexed?

First check whether robots.txt mistakenly blocks the upload directory or CDN — the #1 reason; then confirm the image URL is in src rather than data-src, and finally add an image sitemap.

Should the above-the-fold hero be lazy-loaded?

No. The hero should load early with fetchpriority=high instead; lazy-loading it slows LCP. Lazy loading is only for images off the first screen.