Serve every image at the size it displays, in WebP or AVIF, with a fallback format, descriptive alt text, and explicit width and height in your HTML. That single move fixes discoverability and Core Web Vitals at once, because Google’s own image guidance ties visibility directly to page experience. Get this right and you’re already ahead of most competitors in your niche.
TL;DR:
- Using responsive images with
srcsetand explicit dimensions reduces load times and prevents layout shifts, improving both Core Web Vitals and discoverability.- Converting images to WebP or AVIF formats offers significant file size savings with minimal quality loss, especially when resizing to display dimensions before compression.
- Lazy loading hero images harms load speed and should be avoided unless combined with preload tags and high fetch priority for critical visuals.
- Adding structured data with
ImageObjectand matching metadata likeog:imageenhances the likelihood of images appearing in relevant search results.- Building image optimization into site design from the start yields better speed, visibility, and long-term SEO benefits compared to retrofitting fixes later.
Table of Contents
- What Is Image SEO and Where Do Images Actually Rank?
- How Should You Mark Up Images in HTML for SEO?
- What File Format and Compression Settings Work Best?
- How Do Srcset, Sizes, and Image CDNs Improve Delivery Speed?
- What Structured Data Helps Images Rank?
- Why Do Lazy Loading Mistakes Hurt Core Web Vitals?
- Which Tools Make Image Optimization Repeatable?
- What Happens When Denver-Area Contractors Fix Their Images First?
- Why Image Fixes Deserve the Top of Your To-Do List
- How Denver County Web Design Builds Image SEO Into Every Site
- Sources
- FAQ
What Is Image SEO and Where Do Images Actually Rank?
Image SEO means preparing your images so search engines can find them, understand them, and reward the page they sit on. That’s the goal, but it plays out across several different surfaces, and each one rewards a slightly different setup.
Google Images sends visual, high-intent traffic. Someone searching for “before and after kitchen remodel” is browsing photos, not reading paragraphs, and a strong thumbnail with the right filename can pull a click before the page ranking even matters. Google Discover surfaces images inside a feed on mobile, where a large, sharp hero image often decides whether someone taps through. Google Lens lets people search using a photo instead of words, which means your product or job-site images can drive traffic from a query that never touched a keyboard.
Here’s the part people miss: optimizing images serves two separate goals at once.
- Image-level discovery — getting the picture itself indexed and shown in Google Images or Lens results.
- Page-level ranking — using image performance (weight, load speed, layout stability) to strengthen the page’s overall Core Web Vitals score.
A photo buried in a CSS background property can look great to a visitor, but it’s invisible to crawlers. Embedding pictures in real HTML is what makes both goals possible in the first place.
How Should You Mark Up Images in HTML for SEO?
The HTML Living Standard is specific: the img element with a src and srcset is the correct way to embed content images, because it’s the only method browsers and crawlers reliably parse for discovery. CSS backgrounds don’t count. If a picture matters for SEO, it belongs in an img tag.
Here’s the sequence that keeps your markup clean and crawlable:
- Set a base
srcpointing to a reasonably sized fallback image, so anything that can’t readsrcsetstill gets a usable file. - Add
srcsetwith multiple widths (say, 480w, 800w, 1200w) so the browser picks the right file for the device instead of downloading a desktop-sized image on a phone. - Declare explicit
widthandheightattributes, or set the CSSaspect-ratioproperty, so the browser reserves space before the image loads. Skip this and you get layout jumps that tank your Cumulative Layout Shift score. - Write alt text that describes what’s actually in the frame. “Licensed electrician repairing a breaker panel in Denver” beats “electrician1.jpg” every time. Keep it natural, keep it short, and only include a keyword when it genuinely fits the description.
- Leave alt text empty (
alt="") for purely decorative images — a background flourish or a spacer graphic gets nothing from a forced description, and screen readers will skip it cleanly. - Add a caption or nearby text that reinforces context. Search engines use surrounding copy to confirm what an image shows, especially when the alt text alone is ambiguous.
Pro Tip: Write your alt text as if you’re describing the photo to someone on the phone who can’t see it. If you’d naturally mention the brand, location, or action, put it in. If you’re straining to add a keyword that doesn’t belong, leave it out.
What File Format and Compression Settings Work Best?
Format choice is where most sites leave the easiest gains on the table. Convert to modern formats after resizing, and payload savings compound fast.
WebP should be your default format. It typically shrinks file size by roughly 25 to 35 percent compared to JPEG with barely any visible quality loss, and browser support is now universal enough that fallback files are more of a formality than a necessity.
AVIF goes further when your pipeline supports it. It compresses smaller than WebP in many cases, though it takes longer to encode, so it fits best on sites with build-time image processing rather than manual, one-off exports.
JPEG and PNG still have a role, but only as fallbacks. Keep them in your srcset for older browsers or edge cases, never as your primary delivery format.
A few numbers worth pinning to your workflow:
- WebP quality settings in the recommended range hold visual fidelity for photos while trimming size aggressively.
- JPEG fallbacks typically look clean with quality set at a recommended level for photos.
- Thumbnails and gallery previews can drop lower without anyone noticing.
- Graphics with text or fine line detail need higher settings, or the type turns blurry.
Serving appropriately sized images is the single most effective way to reduce LCP, and converting to a modern format after resizing maximizes that saving.
Resize to the actual displayed dimensions before you compress. A 4,000-pixel-wide camera export scaled down by CSS still forces the browser to download the full file, and no amount of compression fixes that mistake. Strip EXIF metadata from public-facing images too. It rarely serves a purpose once the photo is published, and removing it shaves extra kilobytes for free.
How Do Srcset, Sizes, and Image CDNs Improve Delivery Speed?
Browsers don’t guess when they pick an image from srcset. They calculate the display size using the sizes attribute, check the device’s pixel density, and download the smallest file that satisfies both. Supply only one image width and that logic breaks. You need several logical widths in the set for the browser to actually choose intelligently.
Generating those responsive sets by hand for every upload gets old fast, which is why most serious workflows push the job upstream:
- Build-time generation creates every size variant when the site deploys, so there’s zero runtime cost and no risk of a missing size at request time.
- Server-side or CDN-based transforms generate sizes on request but cache the result, so only the first visitor pays the processing cost.
- On-demand client transforms (resizing in the browser after download) should be a last resort. You’ve already paid the bandwidth cost by the time the resize happens.
An image CDN earns its place here. It handles format negotiation, resizing, and caching at the edge, which cuts origin server load and speeds up repeat visits across regions.
Pro Tip: If your images live on a separate CDN subdomain or third-party host, verify that domain in Google Search Console. Google needs to confirm it can crawl that domain before it will index images served from it, and this step gets skipped constantly.
What Structured Data Helps Images Rank?
Structured data tells Google which image on a page is the one that matters. Without it, Google guesses, and the guess isn’t always the photo you’d pick.
Add an ImageObject inside your JSON-LD and reference it with schema.org’s primaryImageOfPage or mainEntity properties, which explicitly flag your preferred image as the representative one for that page.
A few rules keep this from backfiring:
- Match your JSON-LD image to your
og:imagemeta tag. Sending conflicting signals about which image represents the page confuses more than it helps. - Use high-resolution, genuinely representative images. Google’s own documentation notes that many rich-result types require the image property to be eligible for image-based badges, and a low-quality or unrelated image can knock you out of contention entirely.
- Reserve image sitemaps for images your normal crawl might miss — pictures inserted by JavaScript after page load, or images hosted entirely on a separate CDN domain. If your images are already sitting in standard
imgtags on a normally crawlable page, a sitemap entry is redundant. - Keep structured data accurate. Google can revoke rich-result eligibility site-wide if it detects a pattern of markup that doesn’t match visible page content, so don’t mark up an image as primary if it’s buried three scrolls down.
Why Do Lazy Loading Mistakes Hurt Core Web Vitals?
Your Largest Contentful Paint (LCP) is very often your hero image, and lazy-loading that specific image is one of the most common and most damaging mistakes on the web. Lazy loading tells the browser to wait until it’s needed. If the browser waits on your hero image, your LCP score waits right along with it.
Run through this checklist on any page that isn’t scoring well:
- Confirm your LCP element. Run the page through WebPageTest or PageSpeed Insights and identify exactly which image or text block it flags as largest.
- Never apply
loading="lazy"to that element. Reserve lazy loading strictly for images below the fold. - Add
fetchpriority="high"and apreloadlink for the hero image so the browser starts fetching it before it even parses the rest of the document. - Set explicit width and height (or
aspect-ratio) on every image, not just the hero. Missing dimensions are the single most common cause of layout shift. - Re-test after every change. A fix that looks good in theory needs a WebPageTest run to confirm it actually moved the number.
Which Tools Make Image Optimization Repeatable?
A one-time cleanup helps for a month. A repeatable workflow helps forever, and it doesn’t require a developer for every upload.
For manual, ad hoc work, browser-based compressors handle the job without uploading anything to a stranger’s server. Tools like Shrunk run entirely client-side, which matters if you’re compressing images that shouldn’t leave your machine, and they convert to WebP or AVIF alongside resizing in a single pass.
For sites publishing at volume, build the resizing and conversion into your pipeline instead of relying on memory. Libraries like sharp for Node.js, or a build plugin such as image-webpack-loader, process every image automatically the moment it enters your codebase, so nobody has to remember to compress anything by hand.
Whichever route you take, the audit loop stays the same: run PageSpeed Insights for the Core Web Vitals score, cross-check load waterfalls in WebPageTest, and watch Search Console’s image indexing coverage for pages that aren’t showing up. A practical checklist you can run every time you publish: resize, convert, compress, build the srcset, add the JSON-LD image property, then test.
What Happens When Denver-Area Contractors Fix Their Images First?
Most home service sites lose visibility long before anyone reads their copy, because their photos are heavy, unlabeled, and structurally invisible to a crawler. Denver County Web Design has seen clients post a 243% increase in organic traffic within 90 days after a round of technical fixes that included image work alongside broader on-page SEO.
A typical before-and-after looks like this: a roofing contractor’s homepage hero was a 3.2 MB JPEG straight from a phone camera, loaded with no width or height attributes and an alt tag reading “IMG_4821.” After converting it to WebP, adding a preload tag with fetchpriority="high", setting explicit dimensions, and rewriting the alt text to “metal roof replacement completed in Denver, Colorado,” the LCP score improved and the image itself became eligible for Google Images traffic it never had before.
Why Image Fixes Deserve the Top of Your To-Do List
Most site owners treat image optimization as a nice-to-have, saved for after the “real” SEO work. That’s backwards on any page meant to convert. A slow-loading hero image on a service page costs you the visitor before they read a single word of your pitch, and no amount of keyword-perfect copy fixes that.
If you’re triaging, prioritize three things: the hero image (fix LCP first), gallery or before-and-after thumbnails (these drive Google Images clicks for contractors especially), and the ImageObject in your schema markup (this decides which image Google shows in results). One action you can knock out in under an hour: open your homepage in PageSpeed Insights, find the flagged LCP image, and add a preload tag with the correct dimensions. That fix alone often produces a visible score jump.
— Luis
How Denver County Web Design Builds Image SEO Into Every Site
Most agencies bolt image fixes on after the fact. Denver County Web Design builds them in from the first line of code, which means Colorado contractors get a site engineered for speed and Google Images from day one instead of a retrofit six months later.
A typical engagement starts with an audit of your current site’s image performance, LCP score, and alt text coverage, followed by a prioritized fix list, and a follow-up check once the changes are live. For contractors who need a full rebuild rather than a patch, the WordPress Web Design Denver service builds image-first performance into the site from the start, and it’s paired with local SEO packages like Maps Foundation that connect faster load times to better Google Business Profile visibility. Some agencies design websites to ensure clients have full ownership without ongoing fees, so the image and speed work invested remains with the client permanently. If your homepage hero is still a multi-megabyte camera export, get your site reviewed and find out what a proper image pipeline could do for your lead flow.
Sources
- Image SEO Best Practices | Google Search Central | Documentation
- HTML Living Standard — The img element and embedded content
- Schema
- WebPageTest
FAQ
What Is SEO for Images?
Image SEO is the practice of optimizing pictures so search engines can crawl, understand, and rank them, while also using those images to strengthen the page’s overall Core Web Vitals score. It covers file format, compression, alt text, HTML markup, and structured data together, not any single tactic in isolation.
How Do You SEO a Picture?
Give the image a descriptive filename, compress it into WebP or AVIF, embed it with a real <img> tag that includes src and srcset, and write alt text describing what’s actually shown. Adding explicit width and height attributes prevents layout shift, which Google factors into page experience.
What Is the Best Image Format for SEO?
WebP is the strongest default, cutting file size by roughly 25 to 35 percent versus JPEG with minimal visible quality loss. AVIF can compress even smaller where your workflow supports the longer encoding time, while JPEG and PNG remain useful only as fallback formats for older browsers.
What Does SEO Mean?
SEO stands for search engine optimization, the practice of improving a website so it ranks higher in organic search results and attracts more relevant visitors. Image SEO is one specific branch of that discipline, focused entirely on how pictures are prepared, marked up, and served.
Does Denver County Web Design Handle Image Optimization for Contractor Websites?
Yes, image optimization is built into the site design process rather than treated as a separate add-on, covering compression, modern formats, and proper markup from launch. Pricing for a full site build, such as The Solo Operator package, is listed directly on the Denver County Web Design website.
