Look, I’ll be honest with you—images can make or break your website’s performance. I’ve seen beautifully designed sites tank in search rankings simply because nobody bothered to optimize the images. And I’ve also seen average-looking sites climb to page one just by getting their image optimization right.
Here’s the thing: images are often the heaviest elements on your pages, and if you’re not careful, they’ll slow everything down. But when you optimize them properly? You get faster load times, better rankings, and you show up in Google Image search (which, by the way, drives over 20% of all web searches).
This image SEO checklist comes from years of optimizing sites for clients and my own projects. These are the exact 15 steps I follow every single time I upload an image. Whether you’re on WordPress, Shopify, or building custom sites, this workflow works. Let’s dive in.
Table of Contents
Why Image SEO Matters (More Than You Think)
I remember working with a client whose homepage took 8 seconds to load. When I dug into it, the issue was obvious—massive, uncompressed images everywhere. We spent one afternoon running through proper image optimization, and their load time dropped to under 2 seconds. Their bounce rate? Cut in half within a week.
Google Images isn’t just a side channel anymore. It’s a massive traffic source that most people ignore. Beyond that, images directly impact your Core Web Vitals scores—specifically Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). If you’ve been struggling with those metrics (I’ve written extensively about Core Web Vitals Design Fixes if you need a deeper dive), image optimization is often the fastest fix.
Then there’s accessibility. Alt text best practices aren’t just about SEO—they help visually impaired users understand your content through screen readers. I’ve found that when you optimize for accessibility, you almost always improve SEO as a bonus. It’s a win-win.
With visual search getting better every year, properly optimized images give you multiple ways to rank. Let’s make sure you’re set up right.
The 15-Step Image SEO Checklist
☐ Step 1: Use Descriptive, Keyword-Rich File Names
Before you even think about uploading an image, rename that file. No more “IMG_1234.jpg” or “Screenshot_2024.png”—those tell search engines nothing.
What to do: Use descriptive names that explain what’s in the image. If it’s a photo of running shoes, call it “blue-nike-running-shoes.jpg” not “product-image-5.jpg.”
Why it matters: Search engines read file names. It’s one of the first signals they get about what your image contains. I’ve seen images rank in Google Images purely because of smart file naming.
Pro tip: Include your target keyword in at least one hero image per page, but keep it natural. Don’t force “best-SEO-services-2024-agency” into every file name—that’s overkill.
☐ Step 2: Organize Images in Logical Folder Structures
I learned this lesson the hard way. Early in my career, I dumped all images into one folder. A year later, trying to find anything was a nightmare.
What to do: Create a clear hierarchy. Use paths like /images/blog/2024/seo-guides/ or /images/products/electronics/. At Brandscape Studio, we use folder structures that mirror our site architecture—makes everything cleaner.
Why it matters: Organized URLs are easier for search engines to crawl. Plus, future-you will thank present-you when you’re not searching through 5,000 random files.
Pro tip: If you’re managing multiple sites or clients, create a folder structure template you can reuse. Consistency saves hours down the line.
☐ Step 3: Use Hyphens to Separate Words in File Names
This is one of those tiny details that matters more than it should.
What to do: Always use hyphens (-) between words. Write “chocolate-chip-cookies.jpg” not “chocolate_chip_cookies.jpg” or “chocolatechipcookies.jpg.”
Why it matters: Search engines treat hyphens as word separators. Underscores? Not so much. This affects whether Google can properly read your keywords.
Pro tip: If you’re working with a team, document this in your style guide. I can’t tell you how many times I’ve had to go back and rename files because someone used underscores.
☐ Step 4: Write Descriptive, Accurate Alt Text
Alt text is where a lot of people either overthink it or don’t think about it at all. Let me give you the real talk.
What to do: Describe what’s actually in the image. Be specific and helpful.
- Bad alt text: “image1” or “photo” (tells nobody anything)
- Good alt text: “woman in yellow rain jacket hiking through misty forest trail” (clear, descriptive, useful)
Why it matters: Alt text serves three purposes—accessibility for screen readers, context for search engines when images don’t load, and a ranking signal for image search.
Pro tip: Keep it under 125 characters. Screen readers often cut off after that. And please, describe what you see, not what you wish was there.
☐ Step 5: Include Primary Keyword Naturally in Alt Text (When Relevant)
Here’s where people get spammy. Don’t.
What to do: If your target keyword accurately describes the image, use it. If it doesn’t, don’t force it. Simple as that.
Why it matters: This helps search engines connect your content to your images. But keyword-stuffed alt text is obvious and unhelpful.
Pro tip: Only one or two images per page should have your exact primary keyword. I’ve seen people stuff it into every single image—that’s not optimization, that’s spam.
☐ Step 6: Add Title Attributes Where Appropriate
Honestly? I don’t use title attributes on every image. They’re optional, and that’s okay.
What to do: Use the title attribute for images that benefit from a tooltip on hover—like instructional images or clickable elements.
Why it matters: It’s a minor UX enhancement. Not critical for SEO, but nice when it makes sense.
Pro tip: Don’t just duplicate your alt text here. If you’re adding a title, give complementary information or context.
☐ Step 7: Include Image Captions for Context
People read captions. Seriously—studies show captions get read more than body text.
What to do: Add visible captions below images, especially for photographs, charts, data visualizations, or anything that needs attribution or explanation.
Why it matters: Captions provide extra keyword opportunities and help users understand complex visuals. They’re also great for credibility—citing sources for charts and graphs builds trust.
Pro tip: Use captions strategically to reinforce key points or provide source citations. They’re prime real estate for important information.
☐ Step 8: Compress Images Without Visible Quality Loss
This is probably the highest-impact step on this entire list.
What to do: Run every image through compression before uploading. Target file sizes under 100KB for most web images. Use lossy compression at 80-85% quality for photos.
Why it matters: Large images are the #1 cause of slow page speeds. I’ve optimized sites where compression alone dropped load times from 6 seconds to under 2. It’s that powerful.
Pro tip: Compress as the last step in your editing workflow. If you compress, then crop, then resize, you’re degrading quality with each save.
☐ Step 9: Resize Images to Display Dimensions
I see this mistake constantly. Someone uploads a 4000px wide image that displays at 800px on the page. That’s just wasting bandwidth.
What to do: Resize images to match their maximum display size before uploading. If it shows at 1200px wide on desktop, make it 1200px wide (or slightly larger for retina displays).
Why it matters: There’s zero benefit to serving larger files than necessary. It only slows things down. This ties directly into the mobile-first design approach I talk about on my site—mobile users especially can’t afford to download desktop-sized images.
Pro tip: Size for your largest display dimension (usually desktop), then let srcset handle smaller screens. We’ll get to that in Step 13.
☐ Step 10: Choose the Right Format (WebP, JPEG, PNG, SVG)
Format choice matters more than most people realize.
What to do:
- WebP format for photos and complex images (best compression)
- JPEG for photos when WebP isn’t supported
- PNG for images needing transparency
- SVG for logos, icons, and simple graphics
Why it matters: WebP can be 25-35% smaller than JPEG at the same visual quality. That’s massive for page speed.
Pro tip: Most modern browsers support WebP now, but always provide JPEG fallbacks for older browsers. Don’t leave anyone behind.
☐ Step 11: Use Next-Gen Formats with Fallbacks
This builds on Step 10. You want the performance of modern formats without breaking things for older browsers.
What to do: Implement the <picture> element to serve WebP to modern browsers while providing JPEG/PNG fallbacks:
html
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="descriptive alt text">
</picture>Why it matters: You get the best of both worlds—cutting-edge performance for modern browsers, compatibility for older ones.
Pro tip: Many CDNs and WordPress plugins (like Imagify or ShortPixel) handle this automatically. Don’t reinvent the wheel if the tool can do it for you.
☐ Step 12: Implement Lazy Loading for Below-Fold Images
Lazy loading images is one of those features that sounds complicated but is actually dead simple now.
What to do: Add loading="lazy" to any image that appears below the fold (not visible without scrolling). Leave above-fold images to load normally.
html
<img src="image.jpg" alt="descriptive alt text" loading="lazy">Why it matters: This defers loading of off-screen images until users scroll near them. Initial page load gets dramatically faster, and you save bandwidth for images people might never see.
Pro tip: Don’t lazy load your hero image or anything immediately visible. That actually slows down perceived load time.
☐ Step 13: Use Responsive Images with Srcset
Mobile users are half your traffic. They shouldn’t download desktop-sized images.
What to do: Use the srcset attribute to serve different image sizes based on screen dimensions:
html
<img src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
alt="descriptive alt text">Why it matters: This can cut mobile load times significantly. A 400px wide image might be 50KB while the desktop version is 200KB—that’s a huge difference on cellular connections.
Pro tip: Generate 3-4 sizes (mobile, tablet, desktop, large desktop) and let the browser pick the best one. Most image optimization plugins handle this automatically.
☐ Step 14: Specify Width and Height Attributes (Prevent CLS)
This one trips people up, but it’s crucial for Core Web Vitals.
What to do: Always include width and height attributes in your image tags:
html
<img src="image.jpg" alt="descriptive alt text" width="800" height="600">Why it matters: Cumulative Layout Shift (CLS) happens when images load and push content around. By specifying dimensions, you reserve space for the image, preventing layout shifts. I’ve covered this extensively in my Core Web Vitals Design Fixes guide—it’s a ranking factor you can’t ignore.
Pro tip: Even for responsive images, set aspect ratio with width/height. Modern CSS scales them proportionally while maintaining stability.
☐ Step 15: Create and Submit an Image Sitemap
Most people forget this step, but it’s worth doing.
What to do: Generate an image sitemap (or include images in your main XML sitemap) and submit it through Google Search Console.
Why it matters: Image sitemaps help search engines discover images they might miss, especially those loaded via JavaScript or in tricky locations. This is particularly important if you’re working on complex site architecture—something I’ve written about extensively at Brandscape Studio.
Pro tip: Focus on product images, infographics, and unique visuals that drive value. Don’t waste time sitemapping decorative icons.
Tools I Actually Use (And Recommend)
I’m not going to list 20 tools you’ll never use. Here are the ones I rely on regularly:
For compression:
- TinyPNG – Simple web interface, excellent results, handles batch uploads
- Squoosh – Google’s tool, gives you granular control over compression settings
- ShortPixel – My go-to for bulk optimization and API integration
WordPress plugins:
- Smush – Solid free option with good compression
- Imagify – I use this on client sites; handles WebP conversion automatically
- EWWW Image Optimizer – Great for automatic optimization on upload
For testing:
- Google PageSpeed Insights – Obviously
- Lighthouse – Built into Chrome DevTools, catches issues PageSpeed misses
The tools matter less than having a consistent workflow. Pick tools that fit your setup and actually use them.
Quick Reference Table
| Step | Action | SEO Impact | Time Investment |
|---|---|---|---|
| 1 | Descriptive file names | Image search rankings | 30 sec/image |
| 2 | Logical folder structure | Crawlability | One-time setup |
| 3 | Hyphenated file names | Keyword recognition | 15 sec/image |
| 4 | Descriptive alt text | Accessibility + rankings | 1 min/image |
| 5 | Keyword in alt text | Targeted rankings | Included above |
| 6 | Title attributes | User experience | 30 sec/image |
| 7 | Image captions | Engagement + context | 1 min/image |
| 8 | Compress images | Page speed (HIGH) | 30 sec/image |
| 9 | Resize to display size | Page speed (HIGH) | 30 sec/image |
| 10 | Choose right format | File size optimization | 15 sec/image |
| 11 | Next-gen with fallbacks | Modern browser speed | 2 min/implementation |
| 12 | Lazy loading | Initial load speed | 5 min site-wide |
| 13 | Responsive images | Mobile performance | 3 min/template |
| 14 | Width/height attributes | CLS (Core Web Vitals) | 30 sec/image |
| 15 | Image sitemap | Discoverability | 30 min one-time |
My Honest Take: Start Here
Don’t try to implement all 15 steps at once. You’ll burn out.
Start with the high-impact items:
- Compress everything (Step 8)
- Write proper alt text (Steps 4-5)
- Add lazy loading (Step 12)
- Fix your width/height attributes (Step 14)
Those four will give you the biggest bang for your buck. Once those are solid, gradually work through the rest of this image SEO checklist.
I’ve optimized hundreds of sites over the years, and the cumulative effect of these steps is always impressive. Faster load times, better Core Web Vitals scores, improved accessibility, and higher visibility in both traditional and image search. It’s not glamorous work, but it moves the needle.
And here’s the thing—image optimization is one of those rare SEO tasks where you see results fast. Compress your images, add lazy loading, and check PageSpeed Insights the next day. You’ll see the difference immediately.
Bookmark this page. You’ll want to reference it every time you’re optimizing a new site or onboarding a team member. This checklist has saved me countless hours of second-guessing myself.
Grab Your Free Checklist Template
Want this in a format you can actually use while you work? I’ve created a downloadable PDF version of this image SEO checklist with checkboxes, quick-reference tables, and space for notes.
It’s perfect for keeping your workflow consistent, training team members, or just having a physical reminder next to your desk. No email required—just save it and use it.