Image SEO Chrome Extension

Sun, Apr 13, 2025

My colleague and business partner at Tech-Mex.io shared this reddit post with me regarding SEO and images. I’m not an SEO expert by any means. The most effort I put into SEO strategies is trying to keep clean and semantic markup, follow accessibility best practices and check for alt attributes in images. What little I do know about SEO is that there is a lot more to it than that. So when I read this post, I immediately thought, this makes for a decent checklist when building sites.

My next thought was, can we build a tool to handle this? Something we can bake this checklist, as much as possible anyway, into and allow it to report its findings? Likely, there are tools for this already. But to be honest, our clients aren’t plentiful and we don’t generally make a lot of money from our endeavor. It’s not really my aim at this point. So even if there are tools, I’m sure they either require a subscription or have a cost and also provide a lot more SEO functionality than I care for (sorry, SEO is not very interesting to me). As I stated, I’m not an SEO expert and it’s a discipline I don’t care to go deep into. I care about SEO as much as it can be affected by my code/markup.

So with that flowing through my mind, I thought that maybe a chrome extension would be enough. A chrome extension has:

• direct access to the DOM
• direct access to all <img> tags (image sizes, alt text, lazy loading, srcset, etc.)
• access to network info
• access to metadata and OpenGraph tags

Given that, I started listing extension capabilities for this use case (referncing the reddit post):

1. Check alt text and filenames
2. Check for loading="lazy"
3. Check image dimensions
4. Detect srcset and sizes
5. Detect CDN usage
6. File size over network
7. And a reporting/suggestion UI via popup.html or some kind of overlay

The main drawback for a browser extension is that it would have to be used on a page-by-page basis. But this might be a good starting point that can be expanded to some kind of ESLint plugin or a stand-alone CLI tool. But first, baby steps.

There are some advantages to this, though. Zero setup or config with a browser extension - anyone can use it. Should work for any site as it is analyzing rendered markup. And it provides immediate feedback, where on a dev or production site.

Currently a WIP

While this is a WIP, it is usable. I make no guarantees so caveat emptor. I am not responsible for any issues.

By the same token, feel free to make this better. And if you do, I’d love to see what you do with it.

This was pretty fun, and that’s my sole aim here. It probably isn’t useful for real-world use but maybe it can be one day if we keep chipping away at this.