Add alt text and dimensions to images

The problem

Images have no alt attribute, or no width and height attributes.

How to spot it

• Screen readers announce the image file name.
• Content jumps down as images load (layout shift).

Why it matters

Alt text is how people who cannot see an image understand it, and it helps search engines understand images too. Dimensions let the browser reserve space before the image arrives.

What happens if you leave it

An accessibility failure for screen-reader users, missed image search visibility, and a jumpy, frustrating page.

How to fix it

1. Meaningful images: describe what the image shows and why it is there, in a short sentence:

   <img src="/team.jpg" alt="Our three plumbers standing beside the service van" width="1200" height="800">
   

2. Decorative images (dividers, background flourishes): use an empty alt, alt="", so screen readers skip them. Do not omit the attribute.

3. Images that are links or buttons: the alt text should describe the action ("Call us"), not the picture.

4. Dimensions: set width and height to the image's intrinsic size (or use CSS aspect-ratio) and let CSS scale it with max-width: 100%; height: auto;.

Platform-specific notes

• WordPress: set the "Alternative text" field in the media library; the block editor adds width and height automatically.
• Shopify: edit alt text per product image in the product admin.

Common mistakes

• "image", "photo" or the file name as alt text.
• Stuffing keywords into alt text.

How to check the fix worked

Inspect images in the browser and check each alt, width and height. Re-run the audit.