If your website takes more than three seconds to load, you’ve likely lost half your visitors before they even saw your headline. In the competitive Chicago digital landscape, where margins are thin and patience is thinner, image optimization isn’t just a “nice-to-have”—it is a critical infrastructure requirement.
We see this constantly at Serpstech. A client comes to us with great copy and a solid backlink profile, but their organic traffic has flatlined. The culprit? Five-megabyte hero images and unoptimized PNGs clogging up the render path. Google’s Core Web Vitals (CWV) metrics explicitly penalize this.
Optimizing images for SEO is about balancing visual fidelity with performance engineering. It’s about helping search engine bots understand what your visual content represents so they can serve it to the right users in Google Images and standard search results. Here is the consultant-grade workflow we use to fix image SEO issues.
1. Stop Ignoring File Names
The optimization process starts before you even upload the file to your CMS. Google’s algorithms look at your filename to determine what the image is about. If your camera spits out DCIM_8943.jpg and you upload that directly, you are wasting a prime optimization opportunity.
The Fix: Rename files to be descriptive and hyphenated. If you have a photo of the Chicago skyline at sunset, name it chicago-skyline-sunset.jpg. This provides immediate context to the crawler.
- Don’t: Stuff keywords (e.g.,
best-seo-agency-chicago-marketing-skyline.jpg). - Do: Keep it concise, lowercase, and relevant to the image content.
2. The Alt Text Imperative
Alt text (alternative text) serves two functions: accessibility and SEO relevance. Screen readers use it to describe images to visually impaired users, and search engines use it to index the image content.
When writing alt text, focus on information, not promotion. Describe what is actually in the image. If the image is a chart showing SEO growth, the alt text should be “Line graph showing 50% year-over-year organic traffic growth,” not just “SEO growth chart.”
However, if the image is purely decorative (like a swoosh or a divider), leave the alt attribute empty or null so screen readers skip it. Implementing this logic correctly is often part of a broader comprehensive SEO audit where we identify accessibility gaps that might be hurting your quality score.
3. Serve Next-Gen Formats (WebP and AVIF)
It is 2026. If you are still serving standard JPEGs or PNGs without a fallback or conversion strategy, your site is heavier than it needs to be. Google explicitly recommends “next-gen” formats like WebP and AVIF because they offer superior compression without significant quality loss.
- WebP: Generally 25-35% smaller than JPEG for the same quality index.
- AVIF: Even better compression than WebP, though support was spotty in the early 20s; it is now standard.
Most modern content management systems (CMS) can handle this automatically via plugins, but custom builds require specific server configurations. If your current site infrastructure is struggling to handle dynamic image conversion, it might be time to look at our web design and development services to modernize your stack.
4. Managing Cumulative Layout Shift (CLS)
Nothing annoys a user more than reading a paragraph, only for a delayed image load to push the text down the screen. This is called Cumulative Layout Shift (CLS), and it is a major ranking factor.
To prevent this, you must specify the width and height attributes in your HTML image tags. This tells the browser exactly how much space to reserve for the image before it downloads.
Responsive Sizing with `srcset`
Don’t serve a desktop-sized 1920px wide image to a mobile phone with a 375px wide screen. It wastes data and slows down the Time to Interactive (TTI). Use the srcset attribute to provide the browser with multiple versions of the image, allowing it to download the smallest version necessary for the device.
5. Lazy Loading is Mandatory
Lazy loading defers the loading of non-critical resources (images below the fold) until the user scrolls them into view. This significantly improves the Largest Contentful Paint (LCP) score because the browser can focus all its bandwidth on the content visible at the top of the page first.
Native lazy loading is now supported by all major browsers. Simply add loading="lazy" to your image tags. However, never lazy load your hero image (the top image). That needs to load immediately.
6. Image Sitemaps and Schema Markup
If you rely on Javascript to load images (common in galleries or infinite scroll pages), Google might not find them. Creating a dedicated Image Sitemap ensures that Google is aware of every important visual asset on your site.
Furthermore, using Schema.org structured data (specifically ImageObject) helps Google understand the context. For example, if you are a local Chicago retailer, marking up your product images ensures they appear with the “In Stock” badge in image search results.
7. Optimization Beyond Google: Social and Discover
SEO isn’t just about Google Search; it’s about discoverability across the ecosystem. When someone shares your URL on LinkedIn, Facebook, or X (Twitter), those platforms look for Open Graph (OG) tags to decide which image to display.
If you haven’t defined an og:image, the platform will scrape a random image from your page, often resulting in a cropped logo or a pixelated icon. Consistent branding requires that you dictate exactly what people see when your content is shared. This visual consistency is a core component of effective social media marketing.
8. Compression vs. Quality
The final step is compression. You want the smallest file size possible that doesn’t look terrible to the human eye. Tools like TinyPNG, ImageOptim, or Squoosh are excellent for stripping metadata and reducing file size.
My rule of thumb: Keep large hero banners under 100KB, and smaller content images under 30KB. If you are running an e-commerce store with thousands of SKUs, automation is key here. You cannot manually compress 10,000 product photos.
Summary of the Workflow
- Shoot/Create: High quality, but keep composition in mind.
- Rename: Descriptive, hyphenated filenames.
- Resize: Scale to the maximum display width needed.
- Compress: Reduce quality to ~80-85%.
- Convert: Serve as WebP/AVIF.
- Tag: Add Alt text and dimensions.
- Test: Verify with Google PageSpeed Insights.
Image SEO is technical, but the payoff is tangible. Faster sites rank higher, convert better, and keep users engaged longer. If you’re unsure where your site stands, check your Core Web Vitals report in Search Console today.