Image SEO: Optimize Alt Text, File Names, and Compression

If your website relies on images, search traffic is often won or lost in the details people barely notice. A photo that looks perfect to your visitors can still underperform in search because the page tells search engines almost nothing about what the image actually shows, and because the file itself drags down performance.

Image SEO is not one trick. It is a set of practical decisions you make across alt text, file names, image dimensions, compression, and how the image is served in the browser. When those pieces work together, you get better visibility in image search, fewer accessibility complaints, faster load times, and a better chance that the image supports the intent of the page rather than just decorating it.

Below is how I approach image SEO on real projects, including the edge cases that usually trip people up.

Start with intent, not keywords

Before touching alt text or filenames, ask what the image is doing for the page. Is it illustrating a product feature, showing evidence in a case study, documenting a process step, or simply acting as a visual break in the layout?

That question matters because it determines how specific your alt text should be. Overly generic alt text (“image,” “photo,” “graphic”) helps nobody. Overly detailed alt text can also be wrong if it turns a simple image into a block of text that the visitor’s screen reader has to slog through.

When the intent is clear, you can describe the image in the way a human would need to understand it if they could not see it. That usually means focusing on the subject, the relevant action or context, and any text inside the image only when it affects understanding.

Alt text that works for people and search engines

Alt text exists for accessibility first. Search engines read it because it is part of the HTML content they can interpret. The sweet spot is writing alt text that is faithful to the image and useful to someone who is missing it.

What “good” alt text sounds like

Good alt text is brief, specific, and grounded in what is actually visible. It avoids stuffing in variations of the main keyword, because the image itself already has a strong relationship to the topic when the surrounding page content is aligned.

Here are a few patterns that tend to work:

• If the image shows a specific product or model, include that identifier.
• If it shows a process (like a wiring diagram or a before-and-after), describe what changes or what each side represents.
• If it shows a scene (like a team photo or a store interior), describe the most meaningful elements, not every detail.

Edge cases: text inside images

A common mistake is ignoring text embedded in images, like screenshots or infographics. Screen reader users might never see that content, and search engines cannot “read” it reliably unless you provide it elsewhere.

If the image contains meaningful text that the page relies on, you generally want that text represented in alt text or, better, in regular HTML near the image. Alt text can include the text for smaller snippets, but for longer passages, the more maintainable approach is to put the content in the page itself and use alt text to describe the graphic as a whole.

One rule of thumb from experience: if the embedded text would be worth copying into a document, it likely deserves to exist in actual page text too.

Edge cases: decorative images

Not every image needs alt text that describes content. Many images are purely decorative, like background patterns, separators, or purely aesthetic icons. In those cases, you can use empty alt text (alt="") so screen readers skip it. This reduces noise without harming SEO, because the image is not meant to carry meaning.

Be careful with icons. If an icon conveys information, like an “alert” badge or “secure checkout” indicator, it should have alt text that explains the meaning, or the meaning should be present in nearby text with aria-label on the element, depending on the situation.

File names: small changes that add up

File names are one of those SEO tasks that seem minor until you do it consistently across hundreds of images. Search engines have moved beyond treating filenames as a primary ranking factor, but file names still help with image indexing and can improve how your content is organized and retrieved.

A clean filename also improves sanity when you have to re-upload assets, share images with partners, or troubleshoot broken links.

What to do

Use descriptive, readable names that reflect the subject of the image. A product image named IMG_4829.JPG does not communicate anything. A name like red-leather-wallet-front-view.jpg does.

A practical format that works well is:

• lowercase
• words separated by hyphens
• no special characters
• no excessive length

Hyphens are usually better than underscores for readability, both for humans and for many parsers.

What to avoid

Avoid stuffing file names with repetitive keyword phrases. If your page is truly about “image SEO,” you do not need the filename to become image-seo-image-seo-image-seo-final. That looks manipulative and becomes harder to maintain later.

Also avoid misleading filenames. If a photo is actually of a blue product but the filename says Continue reading “red,” you may confuse internal teams and reduce trust. It is not just an SEO issue, it is operational.

Compression and formats: performance is part of image SEO

Alt text and filenames are the metadata layer. Compression, dimensions, and image delivery are the performance layer. Search engines and users respond to performance, and modern SEO is increasingly about serving the right asset efficiently.

The trade-off: size vs. Quality

Every compression decision is a trade-off. Too aggressive, and you introduce artifacts that look unprofessional and make images harder to interpret. Too conservative, and your page slows down.

In practice, I aim for a balance that stays visually clean at common screen sizes. On many marketing sites, images look “fine” even when you reduce quality noticeably, especially for product photos with consistent lighting. For images with fine gradients, like skies or shadows, you often need to be more careful. Banding artifacts are a dead giveaway that something was compressed too hard.

Choose the right format

Most modern websites benefit from next-gen formats, depending on your tooling and hosting stack.

• JPEG is still common for photos and images with lots of color variation.
• WebP usually offers excellent size savings for a wide range of images.
• AVIF can offer even stronger compression at similar or better quality, but browser support and encoder settings matter.

Since you cannot always guarantee every viewer has the same capabilities, many production setups use format negotiation. If you use a modern image pipeline (often through a CMS plugin, a framework’s image component, or a CDN), you can serve WebP or AVIF where supported, with fallback to JPEG or PNG.

Dimensions: don’t send huge images “scaled down”

A frequent performance issue is the image is physically large, but the browser only displays it smaller. For example, you might display a 600px wide image on the page but serve a 3000px wide original file. That wastes bandwidth and time.

The fix is to create appropriately sized versions, or to let an image resizing service deliver the correct size on demand. If you manage images manually, generate at least the sizes your design uses: one for desktop, one for mobile, and sometimes one extra for large screens.

A detail that matters: retina displays. If your design calls for a 600px image, your source might need to be closer to 1200px to keep it crisp, but not 4000px just because the original photo was massive. That is where “good enough” planning beats guesswork.

A quick workflow that scales

When teams do image SEO as an afterthought, quality declines over time. The solution is a workflow that makes the “right” choice the default.

Here is the process I use when onboarding a new page or improving an image-heavy section.

1. Write alt text as part of content creation, not after design is done. Describe the subject in plain language, and include text from screenshots only when it is important.
2. Rename files before uploading, using lowercase, hyphen-separated words that match what the image is actually showing.
3. Resize images to the maximum displayed dimensions for your layout. Do not rely on CSS scaling to fix oversized images.
4. Export with a modern format (commonly WebP or AVIF) and keep an eye on visual artifacts, especially in gradients and hairline text.
5. Validate on real devices by checking page speed and making sure the images do not shift layout or appear blurry at common viewport sizes.

That might sound like a lot, but the key is to standardize it, so you do not rebuild the decision-making from scratch every time.

How to handle galleries, thumbnails, and lazy loading

Image SEO also includes how images appear on the page.

Thumbnails should be genuinely small

A gallery view often includes dozens of thumbnails. If those thumbnails are just resized versions of full-size images, performance can tank. Thumbnails should be exported and compressed for their actual display size. If you have a modal viewer that loads a larger image when users click, that larger image can be deferred until needed.

Lazy loading: helpful, but measure it

Lazy loading images can improve initial load time, particularly on pages with many below-the-fold images. But you still want to avoid a scenario where the main image or the first few images in the viewport load too late, creating a blank space that looks broken to users.

Also check how your lazy loading interacts with layout shifts. If width and height are not defined (or not respected), the page can jump as images load. That harms user experience and can increase bounce rates.

A good practice is to ensure the HTML includes the correct dimensions or uses a responsive technique that preserves aspect ratio. The goal is that your layout is stable even before images are fetched.

Filename examples that match real content

Let’s make this concrete. Imagine a product page for a “ceramic pour-over dripper.”

A low-quality filename might be:

• IMG_3294.jpg

A better one:

• ceramic-pour-over-dripper-angled-view.jpg

If the image includes a label that the page explains, you might also name it with context:

• ceramic-pour-over-dripper-grind-settings-label.jpg

Notice what is missing: repeated keywords or unnatural phrasing. These filenames read like a human describing the image to a coworker.

One more thing I learned the hard way: treat filenames like you treat URLs. If you change them later without redirects or cleanup, you might break image links that other pages or cached content rely on. For internal workflows, that is mostly manageable. For public assets, plan ahead.

Compression settings: a practical way to avoid regret

Compression quality settings depend on your encoder and the image content. There is no universal number like “set quality to 82 and you’re done,” because one image at a given setting can look perfect while another turns mushy.

Instead, choose a target workflow:

• Start with a modern format.
• Export at a quality level that looks good in a few representative cases.
• Re-export any images that contain gradients, text, or fine textures with slightly more conservative settings.

If you have a design team that cares about perfection, you can still make this practical. Create a small “compression benchmark” set: pick 10 images that represent your most important categories, then test quality ranges until your team agrees that artifacts are acceptable. After that, apply the same settings across the rest of the catalog, with exceptions for the rare edge cases.

This approach avoids the common failure mode where each designer or editor guesses and you end up with inconsistent quality across the site.

Common mistakes that quietly hurt results

It is rare for an image SEO issue to be so extreme that you notice it immediately. More often, the site is just missing out gradually.

Here are the mistakes I see most frequently:

• Alt text that is either empty when the image is meaningful, or filled with generic phrases.
• Filenames that do not match the image subject, or include pointless sequences like “final-final-2.”
• Sending full-resolution originals to every client, creating unnecessary download size.
• Compressing too aggressively and ignoring artifacts in gradients, shadows, or product edges.
• Using lazy loading without validating layout stability and viewport behavior.

Each of these can be fixed, but they compound. For example, an image with missing alt text also deprives you of context for relevance, and if it is oversized too, you lose both visibility and performance.

Validation: test like a user, not like a crawler

Even if you follow best practices, validation matters. I recommend checking three things every time you change a batch of images:

• Rendering quality: look at product edges, text clarity, and banding.
• Performance: watch the page’s image payload and any layout shift.
• Accessibility: confirm that the alt text communicates meaning without dumping unnecessary descriptions.

You do not need an elaborate setup to do this well. A couple of browsers on mobile and desktop, plus a speed check in a dev tool, is usually enough to catch the biggest problems quickly.

One practical habit: open the image in a new tab and verify the file you are serving is the one you expect. If your “compressed” image turns out not to be compressed, you will waste time troubleshooting the wrong thing.

A simple “decision guide” for alt text

Not everything needs to be described. When deciding what to write, I ask two questions:

1. If a screen reader user encountered this image, would they miss something important if the image were skipped?
2. If the image includes information that supports the page’s message, does the alt text capture that information accurately and briefly?

If the answer is “yes” to the first and “yes” to the second, write a descriptive alt text. If the answer is “no” to the second, make the alt text brief enough to identify what it is without turning it into a transcript. If the answer is “no” to the first, mark it as decorative so it does not interrupt the experience.

This keeps alt text useful, not noisy.

Putting it all together on one page

When image SEO is done well, you can feel the difference in two ways. First, your site looks sharper because you are exporting appropriately and avoiding bloated images that cause slow loading and blurry fallbacks. Second, your content becomes more self-explanatory. Search engines and screen readers both get clearer signals about what the images represent, which helps the page support the topic more convincingly.

And the most underrated benefit is operational. When your team has a consistent naming convention, a standard compression workflow, and a clear approach to alt text, improvements compound. New pages start cleaner, audits take less time, and fewer images slip through without metadata.

Image SEO is not glamorous, but it is one of the most reliable ways to improve performance and discoverability on content sites, ecommerce catalogs, and documentation-heavy products.

If you want a starting point, begin with alt text quality and oversized image cleanup. Those two moves usually deliver the fastest “before and after” impact. Then refine filenames and compression formats, and validate on real devices to ensure the changes actually improve what your visitors see.