Every image. A clearer picture.
Find broken images and common image accessibility issues across web pages.
Installation · How to use · Reports · Testing
Version 1.0.0 · Node.js 20+ · Playwright with Chromium
ImageLens checks images on web pages in a real browser. It finds broken images, missing alternative text, responsive image problems, and other common issues.
Each finding includes useful details such as the page URL, image source, screen size, HTML element, and captured preview when available. This helps developers, testers, accessibility specialists, and content teams understand and fix problems.
ImageLens can scan public pages and pages that require sign-in. It runs on your computer and supports desktop and mobile screen sizes.
The LENS Trio shares a visual system and an evidence-first approach across three focused quality tools.
| Product | Focus | Repository |
|---|---|---|
| A11yLens | Accessibility audit evidence, issue triage, element inspection, and coverage review | github.com/manjunathnp/A11yLens |
| LinkLens | Link integrity, destination verification, access conditions, and navigation evidence | github.com/manjunathnp/LinkLens |
| ImageLens | Image integrity, responsive resources, text alternatives, and visual evidence | github.com/manjunathnp/ImageLens |
| Image details | Mobile view |
 |
 |
These screenshots show a fresh scan of Tech Book Store, a local practice storefront, at http://127.0.0.1:4400/techbookstore-shop.html. The public catalog page was inspected in desktop and mobile viewports using seeded book data. See capture provenance, the product demo, and the exported report.
The captured ImageLens run records 48 image observations, all passing its automated checks. The report keeps supporting evidence available for broader accessibility review.
- Scan the current page, all discovered pages, or a selected list of pages.
- Scan public websites or sign in through a browser opened by ImageLens.
- Check desktop and mobile views.
- Find standard images, responsive images, CSS background images, inline SVGs, lazy-loaded images, open shadow DOM, and accessible frames.
- Find broken sources, loading errors, decoding errors, HTTP errors, and empty image sources.
- Find missing alt text, tooltip-only descriptions, unnamed image buttons, generic text, and unusually long text.
- Review images in a gallery or list and open each finding for more details.
- Filter results by status, issue, page, screen size, or search text.
- Export reports as HTML, PDF, CSV, or JSON.
- Use light, dark, or system theme.
- Recover an active scan after refreshing the page.
- Node.js 20 or newer
- npm
- macOS, Linux, or Windows
ImageLens uses Playwright and Chromium to open and check real web pages. You do not need to install Playwright globally. The installation steps below add it only to this project.
git clone https://github.com/manjunathnp/ImageLens.git
cd ImageLens
npm install
npx playwright install chromium
npm startOpen http://127.0.0.1:4190 in your browser.
The npx playwright install chromium command downloads the browser used by the scanner. You usually need to run it only once.
To use a different port:
PORT=4200 npm startImageLens is available only on your computer at 127.0.0.1.
- Enter a website or page URL.
- Choose public access or sign in through the browser opened by ImageLens.
- Choose the pages you want to scan.
- Review the selected pages and start the scan.
- Use the summary, charts, filters, gallery, and image details to review the results.
- Export the report as HTML, PDF, CSV, or JSON.
For a website that requires sign-in, use a test account when possible. Enter your credentials only in the website opened by ImageLens. Return to ImageLens after sign-in and confirm that the session is ready.
| Area | What ImageLens checks |
|---|---|
| Image loading | Empty sources, failed downloads, decoding errors, HTTP errors, corrupt files, and lazy-loaded images |
| Responsive images | srcset, picture, fallback sources, and problems that appear only at a certain screen size |
| Alternative text | Missing or empty alt, accessible names, tooltip-only text, unnamed image controls, generic text, and very long text |
| Image quality | Original and displayed sizes, possible low-resolution images, and file-size information when available |
| Other image types | Inline SVG, CSS backgrounds, pseudo-elements, open shadow DOM, and accessible frames |
| Scan coverage | Pages and screen sizes checked, exploration boundaries, timing outcomes, and focused follow-up items |
An image can have more than one issue. ImageLens shows a main result for the summary and keeps all issues in the detailed view and exported report.
| Format | Best for |
|---|---|
| HTML | An interactive report with filters, image details, and CSV download |
| A report that is easy to print or share | |
| CSV | Reviewing and sorting results in a spreadsheet |
| JSON | Using the complete scan data in another tool or workflow |
Reports can contain page URLs, HTML details, and image previews. Review a report before sharing it.
- ImageLens runs locally and listens only on
127.0.0.1. - The ImageLens screen does not ask for or save your sign-in details.
- Sign-in browser sessions stay in server memory and expire after 30 minutes without activity.
- The browser stores the latest ten completed scans.
- Restarting the server clears unfinished jobs.
- Scanning a website sends normal browser requests to that website. Scan only sites you are allowed to test.
- Each run can discover up to 200 pages and maintain a queue of up to 3,000 links.
- Per-page exploration includes up to 24 scroll steps, 16 supported interactions, and 18 recorded states for predictable reviews.
- Page loading uses a 20-second response window, while image decoding uses a 7-second window and records resources for follow-up when needed.
- “All pages” represents every page ImageLens discovers during the selected run, with page and viewport coverage preserved in the report.
- Mobile mode adds a focused small-viewport perspective; teams can extend it with physical-device and cross-browser testing when those environments matter.
- Coverage notes highlight content such as closed shadow roots, canvas elements, custom controls, and complex sliders for targeted follow-up.
- Preview status remains separate from image-health evidence, so browser capture behavior stays clear in the review.
- Automated text-alternative checks provide evidence that teams can pair with a human review of meaning and context.
The project includes automated tests for the scanner, interface, reports, recovery, themes, keyboard use, accessibility checks, and responsive layouts.
npm test
npm run test:scenarios
npm run test:designAutomated accessibility tests help find interface problems and complement focused manual review of the complete experience.
ImageLens/
├── app.js # App interface and reports
├── server.js # Local server and scan jobs
├── index.html # Main page
├── styles.css # App styles
├── lens-tokens.css # LENS colors and design settings
├── theme.js # Light and dark theme settings
├── src/
│ ├── authentication.js # Sign-in session checks
│ └── scanner.js # Page discovery and image checks
├── tests/ # Automated tests
├── brand/ # ImageLens logo
├── assets/fonts/ # Local font files and license
└── docs/screenshots/ # README screenshots
ImageLens uses HTML, CSS, JavaScript, Node.js, Playwright, and Chromium. There is no frontend build step.
npm start # Start ImageLens on port 4190
npm test # Run scanner and app tests
npm run test:scenarios # Run recovery and unusual workflow tests
npm run test:design # Run theme, keyboard, and responsive design testsTest files are saved in test-output/ and are not added to Git.
Important
ImageLens provides detailed automated checks and evidence. Pair the results with a human review to confirm that alternative text clearly communicates each image's purpose and context.
See CHANGELOG.md for release notes.
Copyright © 2026 Manjunath N P. All rights reserved. See LICENSE.md.