Images checked
| Image | Page | Filename | Alt | Placement | Loading | First viewport |
|---|---|---|---|---|---|---|
| I1 | /shop/mugs | IMG_4471.jpg | '' | img | lazy | yes |
| I2 | /shop/mugs | speckled-blue-mug-12oz.jpg | 'Speckled blue stoneware mug, 12 oz' | img | lazy | no |
| I3 | /shop/mugs | hero-bg.jpg | n/a | CSS background | n/a | yes |
| I4 | /shop/mugs | divider-wave.svg | '' | img | lazy | no |
| I5 | /about | studio.jpg | 'mug mugs pottery ceramic mug handmade mug buy mug' | img | eager | yes |
| I6 | /about | kiln-photo.jpg | 'kiln-photo.jpg' | img | lazy | no |
Your notes: I3 shows the text 'Handmade in Maine' over a photo of mugs; I4 is a decorative divider; the LCP element on /shop/mugs is "the hero image".
Findings
| # | Image | Finding | Evidence |
|---|---|---|---|
| 1 | I1 | Empty alt, purpose not stated | ask: content or decorative? |
| 2 | I1 | Filename not descriptive | IMG_4471.jpg |
| 3 | I1 | Lazy loading in first viewport | loading lazy, first viewport yes |
| 4 | I3 | Content image set as CSS background | shows the text 'Handmade in Maine' (your note) |
| 5 | I5 | Alt is a keyword list | 'mug' or 'mugs' appears 5 times |
| 6 | I6 | Alt repeats the filename | alt 'kiln-photo.jpg' |
Not flagged: I2 (descriptive filename and alt, lazy but not in the first viewport) and I4 (decorative, so empty alt fits the W3C alt decision tree, under which a purely decorative image may have empty alt (my paraphrase)).
Why these matter, from the saved sources: - Google says "Google uses alt text along with" computer vision and page content to understand images, and advises "Use descriptive filenames, titles, and alt text". - Google says "Google doesn't index CSS images", so the I3 photo and its text are not readable as an image to Google. - web.dev advises images visible on first load use "the browser's default eager loading", which is why lazy on I1 is flagged.
Counts
| Finding type | Count |
|---|---|
| Empty alt, purpose not stated | 1 |
| Filename not descriptive | 1 |
| Lazy loading in first viewport | 1 |
| Content image set as CSS background | 1 |
| Alt is a keyword list | 1 |
| Alt repeats the filename | 1 |
| All findings | 6 |
| Distinct images with a finding | 4 |
| Images checked | 6 |
Fix list
- I1: confirm what it shows (question 1). If it is a product or content image, write alt from facts you give: [ADD: what IMG_4471.jpg shows]. Rename the file to describe it, for example [ADD: descriptive-name].jpg.
- I1: remove loading="lazy" (use the default eager loading), since you marked it in the first viewport.
- I3: move the mug photo into an img element with alt text, and put 'Handmade in Maine' in real HTML text. Suggested alt from your note: 'Handmade mugs' plus [ADD: any detail you want described].
- I5: replace the keyword list with a description of the photo: [ADD: what studio.jpg shows].
- I6: replace 'kiln-photo.jpg' with alt that describes the photo: [ADD: what the kiln photo shows]. I make no claim that these changes raise rankings or image traffic.
Questions for you
- Is I1 a content image (for example a product photo) or decorative?
- Which image is "the hero image" you named as the LCP element: I3 (hero-bg.jpg) or I1? If it is I3, the CSS background also needs eager loading once it becomes an img.
Needs your decision
- Approve the fix list before any page, media library or template edit.
- [ADD: what IMG_4471.jpg shows], [ADD: descriptive-name], [ADD: what studio.jpg shows], [ADD: what the kiln photo shows].