`). Never use the file name, a list of keywords or a bare "image", "photo" or "logo". ```html Weak: <img src="IMG_4512.jpg" alt="image"> Weak: <img src="team.jpg" alt="team photo, best agency, design team London"> Strong: <img src="team.jpg" alt="The four of us outside our studio on Mare Street"> Strong (decoration): <img src="paper-texture.webp" alt=""> ``` **Why:** People who use screen readers hear the alt text instead of seeing the image, and everyone sees it when an image fails to load. A file name is noise, a missing alt makes some screen readers read the whole URL, and alt on decoration makes people listen to things that don't matter. **Agent trap:** describing the image's look in detail ("a beautiful sunlit photograph with warm tones") instead of what it tells the reader, or writing alt for a decorative image because "every image needs alt". **Check:** read the page with images replaced by their alt text. Does it still make sense, without noise? `checks/images.js` lists missing alt and alt that is a file name or a placeholder word. > **In ihumane Pro** (https://ihumane.ai/#pricing): > - F6

# 4 · Place: formats, sizes, share images, icons, alt text, dark mode A good image can still fail on the page: blurry on a sharp screen, slow on a phone, invisible in dark mode, silent to a screen reader, cropped to nothing when someone shares the link. None of these show up when you look at the image file. They show up where the image lives. --- > **In ihumane Pro** (https://ihumane.ai/#pricing): > - F1 · Pick the format by what's in the image > - F2 · Size it for the slot, and reserve its space > - F3 · Share images are readable as a thumbnail > - F4 · Favicons and app icons are drawn for 16 pixels ### F5 · Alt text says what it shows and why it's there **Rule:** Write alt text for what the image contributes on **this** page, in one short sentence: | Image | Alt text | |---|---| | Informative (a photo, a screenshot that shows something) | What it shows that matters here. No "image of" or "picture of" | | Functional (the only content of a link or button) | Where it goes or what it does: "Home", "Download the report" | | Decorative (a texture, a mood picture beside text that says it all) | Empty: `alt=""`. For inline SVG, `aria-hidden="true"` | | Complex (a chart, a diagram) | A short summary in alt, with the full data or steps in text near it | | Contains text (a sign, a quote) | The text itself | Inline SVG that carries meaning gets `role="img"` and an `aria-label` (or a ``). Never use the file name, a list of keywords or a bare "image", "photo" or "logo". ```html Weak: <img src="IMG_4512.jpg" alt="image"> Weak: <img src="team.jpg" alt="team photo, best agency, design team London"> Strong: <img src="team.jpg" alt="The four of us outside our studio on Mare Street"> Strong (decoration): <img src="paper-texture.webp" alt=""> ``` **Why:** People who use screen readers hear the alt text instead of seeing the image, and everyone sees it when an image fails to load. A file name is noise, a missing alt makes some screen readers read the whole URL, and alt on decoration makes people listen to things that don't matter. **Agent trap:** describing the image's look in detail ("a beautiful sunlit photograph with warm tones") instead of what it tells the reader, or writing alt for a decorative image because "every image needs alt". **Check:** read the page with images replaced by their alt text. Does it still make sense, without noise? `checks/images.js` lists missing alt and alt that is a file name or a placeholder word. > **In ihumane Pro** (https://ihumane.ai/#pricing): > - F6 · Check every graphic on a dark background