Image Dimension Overlay

WHAT IT DOES

Image Dimension Overlay places informative labels directly on every image in the page, showing the natural dimensions (width × height), displayed dimensions if resized, alt text, and aspect ratio. The tool highlights images missing alt attributes with a red border and flags images with unusual aspect ratios (wider than 3:1 or taller than 1:0.3) with a yellow warning. You can view all overlays at once or hover over individual images to see their details. This makes it easy to audit image accessibility, identify improperly sized images, and verify that all images have appropriate alternative text.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All image detection, dimension reading, and overlay rendering occur on your machine without any network requests. No page content, image data, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox.

HOW TO USE

Click the extension toolbar icon to open the Image Dimension Overlay panel. Click "Show Overlays" to display dimension labels on all images. Each overlay shows the natural dimensions, displayed dimensions (if different), alt text preview, and aspect ratio. Images missing alt text are highlighted with a red border; images with unusual aspect ratios show a yellow warning. Use the "Hide Overlays" button to remove all labels. The "Refresh" button updates overlays if new images are added to the page. Toggle "Show on hover only" to display labels only when you hover over an image. Enable "Show all images (always on)" to keep overlays visible permanently. Toggle "Highlight missing alt text" and "Highlight unusual aspect ratios" to control the warning indicators. Choose overlay position (Top Left, Bottom Left, Bottom Right) to suit your preference. Click "Copy Image Info" to export a list of all images with their dimensions and alt text.

THE IMAGE INSPECTION ENGINE — WHY IT WORKS

Most image dimension tools simply read the width and height attributes or the naturalWidth/naturalHeight properties without accounting for CSS resizing or lazy-loading. This tool performs a comprehensive analysis: it reads both the natural dimensions (the actual pixel size of the image file) and the displayed dimensions (the size the image occupies in the layout), then compares them to detect resizing. For alt text, the tool checks the alt attribute and distinguishes between empty alt (alt="") and missing alt (no alt attribute at all), which is critical for accessibility auditing. The aspect ratio warning system calculates the ratio from natural dimensions and flags values outside the 0.3:1 to 3:1 range—common thresholds for unusually stretched or squished images. The overlay rendering uses absolute positioning relative to each image's parent element, ensuring labels stay attached even when images are part of complex layouts. Each overlay is dynamically created with context-specific colors and warnings, making the tool both informative and actionable.

THE PANEL

The Image Dimension Overlay panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the controls and options adjust proportionally. Press the Escape key to close the panel instantly. The panel maintains independent state for each browser tab, allowing you to audit images in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. Websites dynamically load images via JavaScript; the "Refresh" button updates overlays for newly added images. Cross-origin images may have limited access to natural dimensions due to browser security restrictions. All image data is read locally and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.