Optimizing Website Images for SEO: Top Tips & Techniques

Quick Answer: Optimizing website images for SEO means serving the smallest file that still looks sharp, giving every image a clear file name and alt text, and making sure Google can actually find and index it. In practice it’s five moves: pick a modern format like WebP or AVIF, compress and resize before you upload, name the file for what it shows, write real alt text, and stop your biggest image from wrecking your load speed. Get those right and you help two things at once – your rankings and the person sitting there waiting for the page to paint.

Image SEO is the part of the job everyone knows they should handle and almost nobody actually does. People will spend three weeks arguing over a title tag and then drop a 4MB hero shot straight off their phone onto the homepage.

That’s a bigger deal than it sounds. On the median mobile homepage, images are one of the heaviest resource types on the page, and the typical home page now ships around 19 separate image requests. Those files are usually the difference between a page that feels instant and one that feels like it’s buffering.

This is one of the first things I learned coming up in the industry, back when we were hand-optimizing sprites to shave kilobytes. The tools have changed. The principle hasn’t: images are content, they’re a ranking signal, and they’re the fastest way to slow your own site down. Here’s how to handle them properly.

We also built the LYNX Image Optimizer to make the practical side of image SEO easier. It lets you resize, crop, and convert images to WebP directly in your browser, so you can reduce file size before uploading without sending the original image to an external server. 

Key Takeaways

• Format First: WebP and AVIF compress far tighter than JPEG or PNG at the same visual quality, which is the single biggest file-size win available to most sites.
• Compress And Resize Before Upload: Don’t lean on the browser to shrink a 4000px photo down to a 600px slot. Ship the size you actually display.
• File Names And Alt Text Do Double Duty: They tell Google what the image is and make the page usable for screen readers. Descriptive beats keyword-stuffed every time.
• Your Biggest Image Is A Speed Risk: The largest image in the viewport is often your Largest Contentful Paint element, and Core Web Vitals is a ranking signal.
• Help Google Find Them: Use standard HTML <img> elements, submit an image sitemap, and add structured data so your visuals can get indexed and show up in image search.

Why Image SEO Matters and How Images Affect SEO

Image SEO pulls three levers at the same time.

Image Search Traffic

The first lever is Google Images itself. It’s a search surface in its own right, and for anything visual – products, recipes, how-to steps, real estate, gear – people search with their eyes before they read a word. Optimized images can pick up traffic from queries that never touch your blue links.

Page Speed and Core Web Vitals

The second lever is page experience. Images are the most-requested asset type on most websites and usually eat more bandwidth than anything else on the page. At the 90th percentile, sites push over 5MB of image data. That weight lands directly on your load speed, which lands directly on Core Web Vitals, which is a confirmed ranking signal.

Context and Topical Relevance

The third lever is context. Search engines read the file name, the alt text, and the surrounding copy to figure out what an image shows and how it relates to the page. Good image data makes the whole page easier to understand, not just the picture.

This matters more now than it used to. As AI-generated content floods search, original, well-labeled images are one of the signals that separate a real page from a spun-out one – the same reason we push original visuals when we talk about adding real value to AI-assisted blog content. None of this is exotic. It’s just consistently skipped. Which, if you’re competing, is good news.

Optimize Website Images With the LYNX Image Optimizer

Knowing that you should resize, compress, and convert an image is one thing. Opening three different tools every time you publish a blog post is another. That is why we built the LYNX Image Optimizer.

The browser-based tool handles the main preparation steps in one place. Upload a PNG, JPG, or JPEG, then choose the dimensions you need. Preset options include:

• 1920 × 1080: For large website images and presentation-style visuals
• 1200 × 630: For social sharing and open graph images
• 1080 × 1080: For square graphics and social posts
• Custom: For images that need exact dimensions

You can then choose between a centre crop that fills the selected dimensions or a fit-within option that preserves the complete image without cropping it. The tool converts the finished image to WebP and shows you how much the file size has been reduced before you download it.

That matters because a photograph that looks perfectly reasonable on screen can still be several megabytes larger than necessary. Converting it to WebP and resizing it to its actual display dimensions can remove most of that weight without creating an obvious drop in visual quality.

The optimizer also includes an alt text field. This does not replace adding the text to the appropriate field in WordPress, Shopify, or your CMS, but it encourages you to write the description while you can still see the image and its context.

Everything runs locally in your browser, so the images you upload do not leave your device. The result is a faster, simpler way to prepare blog images, featured images, website graphics, and social visuals before they reach your site.

Choosing the Best Image Format for SEO: WebP, AVIF, JPEG, and PNG

Format is where the biggest, easiest wins live. Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF, so you’ve got room to pick the right tool.

The gap between old and new formats is not small. Looking at real images across the web, HTTP Archive found the median compression by format breaks down like this: PNG spends about 3.8 bits per pixel, JPEG about 2.0, AVIF about 1.4, and WebP the tightest at 1.3. Lower bits per pixel means fewer bytes for the same image. Switching a JPEG to WebP or AVIF is often a 25-35% file-size cut with no visible quality loss.

Here’s how I think about format selection in practice:

Format	Best For	Notes
WebP	Almost everything – photos, graphics, product shots	Excellent compression, transparency support, near-universal browser support
AVIF	Photos and hero images where every KB counts	Best-in-class compression; slightly heavier to encode
JPEG	Photographic content, universal fallback	Still fine, but you’re leaving bytes on the table vs. WebP
PNG	Logos, screenshots, anything needing crisp edges or transparency	Large files – avoid for photos
SVG	Logos, icons, simple illustrations	Vector, resolution-independent, tiny file size
GIF	Nothing, really	Heaviest per pixel; use a muted, looping video instead

The practical answer to “is WebP better for SEO” is yes, indirectly – it’s not a magic ranking word, it just makes your pages lighter and faster, and that’s what Google actually measures. Serve WebP or AVIF with a JPEG fallback and you cover both modern and older browsers.

Image Compression and File Size Optimization

Compression is where you decide how many bytes an image costs. Two things matter: the format (covered above) and the quality setting.

Picking a Quality Setting

For most web photos, you can drop JPEG or WebP quality to somewhere in the 75-85 range and no normal human will notice the difference on a screen. Push much lower and you start seeing mush and banding. The right amount of compression is “as much as you can get away with before it looks bad,” and that line is usually higher than people think.

Resize Before You Compress

The bigger sin isn’t under-compressing – it’s uploading images at the wrong dimensions entirely. A 3000px-wide photo dropped into a 600px column still downloads all 3000 pixels. The browser just shrinks it on screen while the user pays for the full file. Resize to the size you actually display (plus a 2x version for retina screens), then compress. In that order.

Automating It

If you’re running WordPress, plugins like ShortPixel or Imagify will compress and convert to WebP on upload automatically. Shopify handles a lot of this at the platform level. Either way, the goal is the same: reduce image file size until the picture is as light as it can be without looking cheap.

Image Dimensions and Responsive Images for SEO

Once you’ve picked a format and a quality level, you still have to serve the right size to the right device. A phone doesn’t need the same pixels as a 27-inch monitor, and shipping desktop-sized images to mobile is one of the most common reasons images slow down a website.

The fix is native HTML. The srcset and sizes attributes let you offer the browser several versions of the same image at different widths, and the browser picks the smallest one that still looks sharp for that screen. The <picture> element goes further, letting you serve different formats (AVIF, then WebP, then a JPEG fallback) or even different crops for mobile versus desktop.

A responsive setup looks like this:

<img

  src=“hero-800.webp“

  srcset=“hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w“

  sizes=“(max-width: 600px) 100vw, 800px“

  width=“1600” height=“900“

  alt=“Team assembling a delivery bike in the Burlington workshop“

  loading=“lazy“>

Two details that punch above their weight: always set width and height so the browser can reserve space and avoid layout shift, and get your sizes value right so the browser doesn’t accidentally download the biggest file anyway. For mobile image optimization specifically, responsive images are the whole ballgame – one wrong setting and phones pull the full desktop asset.

SEO Image File Names and URL Structure

This one is free and takes ten seconds. Before you upload, rename the file.

IMG_4821.jpg tells Google nothing. red-cedar-patio-furniture.jpg tells it exactly what the image shows. Search engines read the file name as one signal for what’s in the picture, so keyword-rich image filenames – descriptive, hyphen-separated, lowercase – are a genuine (if minor) ranking input for image search.

The rules are simple:

• Describe The Image: Say what’s actually in it, not what page it lives on.
• Use Hyphens, Not Underscores: Google reads blue-suede-shoes as three words; blue_suede_shoes gets read as one.
• Keep It Lowercase: Avoids case-sensitivity headaches on some servers.
• Don’t Stuff: shoes-buy-shoes-cheap-shoes-online.jpg looks like spam because it is.

Do image file names matter for SEO? Yes, but keep it in perspective. It’s a small signal that costs you nothing, so there’s no reason to skip it – but it won’t rescue a slow, badly built page on its own. The same logic applies to your overall image URL structure: clean, readable paths beat random strings.

Writing Image Alt Text for SEO and Accessibility

Alt text is the piece everyone half-remembers and almost nobody does well. It’s the text that describes an image for screen readers and shows up when the image fails to load. Google uses it to understand what the image is about and how it relates to your page.

The State of Alt Text (It’s Bad)

The scale of the problem is genuinely wild. The 2026 WebAIM Million report scanned 66.6 million images across the top million home pages and found that 16.2% of them were missing alt text entirely. Worse, nearly half the images missing alt text were also links – meaning screen reader users hit a link with no idea where it goes.

How to Write Descriptive Alt Text

Here’s the rule that clears up most confusion: write alt text for a human first, and the SEO takes care of itself. WebAIM’s guidance is to describe the content and function of the image, not to cram in keywords. If a keyword fits naturally, great. If you’re forcing it, you’re making the page worse for the exact users alt text exists to serve.

Scenario	Bad Alt Text	Good Alt Text
Product photo	alt=”shoes”	alt=”Tan leather Chelsea boot, side view”
Blog image	alt=”seo seo ranking google seo tips”	alt=”Chrome DevTools showing a slow LCP image in the network waterfall”
Decorative flourish	alt=”decorative swirl divider graphic”	alt=”” (empty, so screen readers skip it)
Image used as a link	alt=”click here”	alt=”Download the 2026 image SEO checklist (PDF)”

A few things worth knowing:

• Product Image Alt Text: Describe the product clearly enough that someone who can’t see it could still shop it.
• Blog Image Alt Text: Describe what the graphic actually shows, not the post’s target keyword.
• Decorative Images: Use an empty alt=”” so assistive tech skips them. That’s a real technique, not laziness.
• Skip “Image Of”: Screen readers already announce that it’s an image, so you’re wasting the listener’s time.

Alt Text vs. Title Tags and Captions

Image title tags and captions are a separate thing from alt text. Captions sit visibly under the image and often get read more than body copy, so they’re worth using where they add context. Title attributes do almost nothing for SEO or accessibility – skip them.

Image Loading Speed and Core Web Vitals Image Optimization

This is where image SEO stops being about images and starts being about money, because slow pages lose visitors and Core Web Vitals feeds into rankings.

Largest Contentful Paint, Explained

The metric to know is Largest Contentful Paint, or LCP. It measures how long it takes for the biggest thing in the viewport to render, and on most pages that biggest thing is an image – your hero shot or featured image. Google wants LCP under 2.5 seconds for 75% of visits. Miss that and you’re in “needs improvement” or “poor” territory.

Why “Just Make It Smaller” Isn’t the Whole Fix

Now here’s the part that surprises people. You’d assume the fix is always “make the image smaller.” But when Google looked at field data from real page loads, it found that image download time is almost never the actual bottleneck. On the median site with poor LCP, the browser spends roughly four times as long waiting to start downloading the LCP image as it does downloading it – about 1.3 seconds of dead air between the server responding and the image request even firing.

Translation: compressing your hero image helps, but the real gains often come from letting the browser find and start that image sooner. That means:

• Reference the image with a standard <img> tag in the HTML, not injected later by JavaScript.
• Add fetchpriority=”high” to your LCP image so the browser prioritizes it.
• Never lazy-load the hero image (more on that next – it’s a classic own goal).
• Serve images from a fast host or an image CDN so the bytes travel a shorter distance.

The encouraging news is that this is fixable. HTTP Archive found that 48% of mobile sites already serve an LCP image of 100KB or less, and the median site wastes zero kilobytes on its LCP image. The sites getting crushed are the 8% shipping LCP elements over 1MB. Don’t be in that 8%.

• Reference the image with a standard <img> tag in the HTML, not injected later by JavaScript.
• Add fetchpriority=”high” to your LCP image so the browser prioritizes it.
• Never lazy-load the hero image (more on that next – it’s a classic own goal).
• Serve images from a fast host or an image CDN so the bytes travel a shorter distance.

The encouraging news is that this is fixable. HTTP Archive found that 48% of mobile sites already serve an LCP image of 100KB or less, and the median site wastes zero kilobytes on its LCP image. The sites getting crushed are the 8% shipping LCP elements over 1MB. Don’t be in that 8%.

Image Lazy Loading for SEO

Lazy loading defers off-screen images until the user scrolls near them, so the browser isn’t downloading twenty images the visitor may never see. Since images below the fold can account for a big chunk of a page’s initial bandwidth, this is one of the cleanest speed wins available.

You don’t need a plugin or a JavaScript library for it anymore. Browser-level lazy loading is built into every major browser – just add loading=”lazy” to the <img> tag.

One rule, and it’s the one people get wrong: never lazy-load your above-the-fold images, especially your LCP element. Slapping loading=”lazy” on your hero image tells the browser to wait on the single most important image on the page, which tanks your LCP. Lazy-load everything below the fold, load everything above it eagerly. That’s the whole strategy.

Image Indexing: Sitemaps, Structured Data, and Metadata

You can do everything above perfectly and still lose if Google can’t find or index your images. A few technical pieces close that gap.

Use Real HTML Image Elements

Google finds images in the src attribute of the <img> element and does not index images loaded purely through CSS backgrounds. If it’s meant to rank, it belongs in an <img> tag.

Submit an Image Sitemap

An image sitemap hands Google a direct list of the images on your site, including ones it might not otherwise crawl. A useful detail: image sitemaps can include URLs from other domains, so if you serve images off an image CDN, you can still get them indexed – just verify the CDN domain in Search Console.

Add Structured Data for Images

Google supports image metadata through schema.org markup and IPTC photo metadata, which can make your images eligible for the Licensable badge and give Google more context. Schema markup for images also feeds into how Google picks thumbnails – it recently confirmed it uses both schema.org markup and the og:image tag to choose which image shows in search, and it favors large, relevant images at least 1,200px wide.

A Quick Word on EXIF Data

The camera metadata baked into photos (location, device, timestamp) does very little for SEO, and stripping it slightly reduces file size. Keep copyright and licensing metadata, drop the rest. Just be aware that removing metadata is regulated in some jurisdictions, so check if you’re operating at scale.

Image SEO for Ecommerce, WordPress, and Shopify

The fundamentals are identical everywhere. What changes is the volume and the platform quirks.

Ecommerce Image Optimization

Ecommerce image optimization is high-stakes because product images are both your conversion driver and your biggest performance liability. A category page with forty product thumbnails can be a monster if none of them are compressed or lazy-loaded. Product image SEO comes down to unique images (not manufacturer stock everyone else is using), descriptive file names and alt text per product, and aggressive compression. This is exactly the kind of thing that gets neglected on sites people inherit – and cleaning it up is a real lever. We wrote about that whole scenario in taking over a website with bad SEO.

Image search matters even more in visual, local, and regulated niches, where people shop with their eyes and paid ads are often restricted. A brewery living or dying on how its taproom and cans look in search is a good example – we get into that in local SEO for breweries. And in tightly regulated spaces like cannabis, where ad channels are limited and original product imagery does heavy lifting for both rankings and AI visibility, image SEO stops being optional – which is part of why we broke it down in our guide to Canadian cannabis SEO and AI visibility.

WordPress Image Optimization

WordPress image optimization is mostly about not fighting the platform. WordPress auto-generates multiple image sizes and adds loading=”lazy” by default. Add a compression-and-WebP plugin, make sure your theme uses proper srcset output, and you’re most of the way there. The main trap is uploading full-res originals and letting them pile up in the media library.

Shopify Image Optimization

Shopify image optimization is more constrained – you’re working within the platform’s rules – but Shopify serves images off its CDN, generates responsive sizes, and lets you set alt text per image right in the admin. Use it. The alt text field is sitting right there and most stores leave it blank.

Whatever the platform, if you’re rebuilding or migrating, images are one of the things that quietly break. We put together a full playbook on redesigning a website without losing SEO that covers preserving image URLs and alt text through a move.

Image SEO Best Practices: The Working Checklist

If you want the whole thing on one page, here are the image SEO best practices we run through on client sites, in the order we do them:

• Pick The Format: WebP or AVIF for photos, SVG for logos and icons, with a JPEG fallback.
• Resize Before Upload: Match the display size, plus a 2x version for retina.
• Compress: Quality around 75-85 for photos; push until just before it looks bad.
• Rename The File: Descriptive, hyphenated, lowercase, no stuffing.
• Write Alt Text: Describe content and function for a human; empty alt=”” for decorative images.
• Set Dimensions: Always include width and height to prevent layout shift.
• Go Responsive: Use srcset and sizes so devices get the right file.
• Lazy-Load Below The Fold: loading=”lazy” on everything except the hero.
• Prioritize The LCP Image: fetchpriority=”high”, loaded eagerly, in the HTML.
• Make It Findable: Real <img> tags, an image sitemap, and structured data.

Run a page through PageSpeed Insights after and it’ll flag any image that’s still dragging things down.

Conclusion

Image SEO isn’t complicated. It’s a checklist. Format, size, compression, file name, alt text, speed, indexing – handle those and your images help your rankings instead of quietly sabotaging them. The reason it’s worth doing is that so few sites actually bother, which means it’s one of the easier places to pull ahead of competitors who are still uploading phone photos straight to their homepage.

The catch is scale. Doing this for one blog post is a five-minute job. Doing it consistently across a few hundred product pages, or fixing it retroactively on a site with thousands of neglected images, is a different kind of project – the kind that eats a marketing team’s week and never quite gets finished.

That’s the work we do at LYNX SEO. If you’d rather spend your time running the business than renaming image files and chasing Core Web Vitals scores, that’s exactly the kind of thing we handle – at scale, and built to hold up. Get in touch and we’ll take a look at your site.

Frequently Asked Questions

What Is the LYNX Image Optimizer?

The LYNX Image Optimizer is a browser-based tool for resizing, cropping, and converting PNG, JPG, and JPEG files to WebP. You can select common website and social dimensions, enter a custom size, choose whether to crop or preserve the complete image, and preview the file-size reduction before downloading it. The tool also provides a space to prepare descriptive alt text. Because the processing happens inside your browser, the original image never leaves your device.

Why Is Image SEO Important?

Because images are usually the heaviest thing on your page and one of Google’s clearest signals for what a page is about. Optimized images load faster (helping Core Web Vitals and rankings), can pull traffic from Google Images, and make your site usable for people relying on screen readers. Skipping image SEO leaves easy wins on the table and often slows your whole site down.

How Do Images Affect SEO?

Three ways. They influence page speed and Core Web Vitals, which are ranking factors. They provide context through file names, alt text, and captions that help Google understand the page. And they can rank directly in image search, opening a traffic channel your text content can’t reach.

What Is the Best Image Format for SEO?

For most photos and graphics, WebP or AVIF, because they compress much tighter than JPEG or PNG at the same quality – HTTP Archive data shows WebP and AVIF using roughly a third fewer bits per pixel than PNG. Use SVG for logos and icons, and keep a JPEG fallback for older browsers. There’s no format that “ranks better” on its own; the win is smaller files and faster pages.

How Do You Optimize Images for Google?

Resize and compress before upload, use a modern format, give each image a descriptive file name and real alt text, serve responsive versions with srcset, lazy-load below-the-fold images, and make sure Google can find them through standard <img> tags, an image sitemap, and structured data.

Does Image Size Affect SEO?

Yes. Oversized image files slow your page down, which hurts Largest Contentful Paint and Core Web Vitals – both tied to rankings and user experience. The fix is serving the dimensions you actually display and compressing the file. Google’s field data also shows that when the browser starts loading the image often matters as much as its size.

Is WebP Better for SEO?

Indirectly, yes. WebP isn’t a ranking keyword, but it produces smaller files than JPEG or PNG at equal quality, and smaller files mean faster pages, which Google does reward. Serve it with a JPEG fallback and you get the speed benefit across all browsers.

How Much Should You Compress Images?

For photographic content, a quality setting around 75-85 for JPEG or WebP usually cuts file size hard with no visible loss on screen. Push lower and you risk visible artifacts and banding. The right level is the most compression you can apply before the image starts looking degraded.

Do Image File Names Matter for SEO?

They’re a small but real signal. Descriptive, hyphenated, lowercase file names like standing-desk-walnut-top.jpg help Google understand image content for image search. It won’t make or break your rankings, but it costs nothing, so there’s no reason to leave images named IMG_0492.jpg.

Should Every Image Have Alt Text?

Every meaningful image should. Alt text makes images accessible to screen reader users and gives Google context. The exception is purely decorative images, which should get an empty alt=”” so assistive technology skips them. Write it to describe the image for a person, not to stuff keywords.

How Do I Get Images Indexed by Google?

Reference images with standard HTML <img> tags (Google doesn’t index CSS background images), submit an image sitemap so Google knows they exist, and add structured data for extra context. Then confirm they’re being crawled by checking the indexing reports in Google Search Console.