Image Accessibility Checklist: Alt Text, Formats, and File Size Best Practices

I got an email last month from a reader who'd just failed an accessibility audit. Her images looked fine. They loaded fast. But screen readers were reading out "IMG_4471 dot jpg" to her blind users, and her e-commerce checkout button was an image with no description at all.

She'd been doing this for years and never thought about it. (BTW, our free image upscaler saves you the trouble.) (If you need a design toolkit, we got you covered.)

That's the thing about image accessibility — it's invisible until someone points it out. So here's the checklist I wish someone had handed me a decade ago.

Quick Verdict

If you only do one thing, write real alt text — it matters more than format or file size combined. For format, use WebP for photos and SVG for icons/logo, skip PNG unless you need transparency. For file size, under 200KB is your target for most web images; anything over 500KB needs compression before it goes anywhere near a page.

Now let's break this down properly.

Alt Text: The Part Everyone Skips

Alt text is the description a screen reader speaks when it hits your image. It's also what shows if the image fails to load. Two jobs, one attribute.

The rule I use: describe the function, not the file. If the image is a decorative background swirl, alt="" (empty). If it's a photo of a red running shoe, say "Red running shoe with white sole, side view." If it's a button, describe what the button does — "Add to cart," not "cart icon."

Common mistakes I see constantly:

• Keyword stuffing — alt="best cheap shoes buy online discount." That's spam, and screen reader users hate it. Google does too.
• Starting with "Image of" — the screen reader already says "image." You're just wasting words.
• Leaving it blank on functional images — this is the one that actually breaks things. A blank alt on a linked image means the link has no name.

One more: if the image contains text (like a chart or infographic), put the key info in the alt or in surrounding body text. Screen readers can't parse text baked into a JPG.

Format Choices That Actually Matter

Here's my short version after years of testing:

• WebP — best all-rounder for photos. Good compression, wide browser support now. Use it.
• SVG — for logos, icons, anything that needs to scale. Tiny file size, crisp at any resolution. Don't use it for photos.
• JPEG — still fine for photos when you need maximum compatibility, but WebP usually beats it on size.
• PNG — only when you genuinely need transparency or lossless quality. Otherwise it's bloated.

The trap: people export everything as PNG because "it's higher quality." A 2MB PNG of a photo is worse for your users than a 90KB WebP that looks identical. Quality isn't a file format — it's whether the image looks right at the size it's displayed.

File Size: The Numbers

Aim for under 200KB per image. Hero images can go to 300-400KB if they're above the fold and important. Icons should be under 20KB.

Why it matters for accessibility? Slow images mean slow pages, and slow pages are a barrier for people on mobile data or assistive tech that waits for content. Accessibility and performance are the same conversation.

Practical moves:

1. Resize before you upload. A 4000px camera photo displayed at 800px wide is wasted bytes. Resize to 2x your display size, max.
2. Compress, don't just convert. WebP export at 80% quality is usually indistinguishable from the original.
3. Use srcset for responsive images. Serve smaller files to phones. One line of HTML, big savings.

If you've got a folder of oversized images sitting around, run them through a compressor before anything else. Toolsail's image upscaler is handy when you need to enlarge something without it turning to mush — but for shrinking, a plain compressor is your friend.

Pros & Cons

✅ Pros

• Alt text takes 30 seconds per image and fixes the biggest accessibility gap immediately
• WebP cuts file sizes 25-35% versus JPEG with no visible quality loss
• SVG icons stay sharp at every zoom level and weigh almost nothing
• A simple resize-and-compress pass can halve your page weight in an afternoon

❌ Cons

• WebP still needs a fallback for very old browsers (rare now, but not zero)
• Writing good alt text for complex charts takes real thought — there's no autopilot
• Aggressive compression can introduce artifacts on images with fine detail
• Accessibility audits often flag things you can't see, which is frustrating to debug

Step-by-Step

1. Audit your existing images: Open your site with a screen reader (NVDA is free on Windows) and listen. You'll hear exactly what your users hear. Common pitfall: assuming your CMS adds alt text automatically — most don't.

1. Write alt text for every functional image: Buttons, links, charts. Decorative images get alt="". Common pitfall: describing the image instead of its purpose. "Search icon" is worse than "Search."

1. Convert formats and resize: Batch-convert photos to WebP, resize anything wider than 2000px, and compress. Common pitfall: converting without resizing — a huge WebP is still huge.

Pro tip: Use your browser's dev tools (Network tab) to see actual image file sizes on your live site. The number you see there is the truth — not what your design tool told you.

FAQ

Q: Does alt text help SEO?

A: Yes, but modestly. It helps image search and gives context to the page. Don't stuff keywords — write for humans first and the search benefit follows.

Q: What's the best format for logos?

A: SVG every time. It's tiny, scales perfectly, and screen readers handle it fine with proper title elements. Fall back to PNG only if your logo has complex gradients SVG can't handle well.

Q: How small should images be for a fast site?

A: Under 200KB per image is the usual target. Most sites I check have images averaging 400KB-1MB, which is 2-5x more than needed. Cutting that alone often improves load times noticeably.

Q: Can I use AI to write alt text?

A: It's a decent starting point for simple product photos, but check every one. AI misses context — it'll say "person at desk" when the real meaning is "customer using our software." You know your content; the tool doesn't.

---

Got a folder of images you're not sure about? Start with the free upscaler or poke around the rest of toolsail.com — most of what you need is there without a signup.