Image Details Inspector

A Chrome extension that helps you inspect and analyze images on any webpage. View detailed information about image dimensions, aspect ratios, and file details with an interactive overlay system.

Use Cases

🐕 Animal Rescue & Pet Adoption Websites

• The Challenge: Many pet adoption platforms require square images (1:1 aspect ratio) for proper display in profile grids
• The Solution: Quickly verify that animal photos meet the exact 1:1 requirement, catching images that appear square but are slightly off (like 1.02:1)
• Why It Matters: Ensures consistent, professional presentation of adoptable animals

🛍️ E-commerce & Product Management

• Product catalogs: Verify product images meet platform requirements (e.g., Amazon's square thumbnails)
• Inventory audits: Check image consistency across product listings
• Quality control: Identify compressed or improperly scaled product photos

📱 Social Media Management

• Platform compliance: Ensure images meet specific aspect ratio requirements (Instagram 1:1, Twitter 16:9, etc.)
• Content optimization: Verify images will display correctly across different social platforms
• Brand consistency: Check that marketing materials maintain proper proportions

🎨 Web Development & Design

• Layout testing: Verify images display as intended in responsive designs
• Performance optimization: Identify oversized images that could be compressed
• Asset management: Audit image dimensions across websites during development

📰 Content Creation & Publishing

• Editorial standards: Ensure featured images meet publication guidelines
• Template compliance: Verify images fit specific CMS or theme requirements
• Multi-format publishing: Check image suitability across different output formats

🔍 Quality Assurance & Accessibility

• Image distortion detection: Spot images that have been stretched or squashed
• Scaling issues: Identify images displaying much larger or smaller than their original size
• Format analysis: Check if modern formats (WebP, AVIF) are being used appropriately

Features

• Three Operation Modes: Choose between Inspector mode, Show All mode, or turn off completely
• Comprehensive Image Information: View intrinsic and rendered dimensions, file types, and sizes.
• Aspect Ratio Calculations: See aspect ratios in both ratio format (16:9) and decimal format (1.78)
• Advanced Positioning Engine: A sophisticated penalty-based system that ensures overlays never block their source images and minimizes overlap in dense layouts.
• Layout Awareness: Automatically detects flex and grid layouts to prefer side gutters for overlay placement.
• Visual Association: Color-matched borders link overlays to their source images, making it easy to identify which info belongs where.
• Performance Insights: View image loading strategies (lazy vs eager) and fetchpriority hints.
• Advanced Filtering: Filter images by file type, minimum width, and intrinsic aspect ratio criteria.
• Color-coded Overlays: Each image and its association border get a unique color for easy identification.
• Dynamic Page Support: Works with images that are added, removed, or updated after initial page load (including lazy-loaded content).
• Responsive Show All Overlays: Show All mode refreshes overlays when image sizes/layouts change so rendered dimensions stay accurate.
• Smart Source Detection: Uses rendered image sources (currentSrc) with src/srcset fallbacks and background metadata fetching for better format and size detection.
• Tab-aware Mode State: Mode selection is scoped to the current tab and resets on navigation for predictable behavior.

Installation

1. Install from the Chrome Extension store

How to Use

Getting Started

1. Navigate to any webpage with images
2. Click the Image Details Inspector icon in your Chrome toolbar
3. Choose your preferred mode from the popup

Operation Modes

🔍 Inspector Mode

• How it works: Hover over any image to see its details
• Best for: Selectively inspecting specific images
• Features:
  • Hover to show details, move away to hide
  • Prevents navigation when clicking on linked images
  • Visual highlight border around hovered images
  • Handles dynamically changing image sources, including srcset updates

📊 Show All Mode

• How it works: Displays details for all images on the page simultaneously
• Best for: Getting an overview of all images at once
• Features:
  • Permanent overlays for all qualifying images
  • Advanced filtering options
  • Batch analysis of image properties

⭕ Off Mode

• How it works: Disables all functionality
• Best for: Normal browsing without any overlays

Understanding the Information Display

Each overlay shows:

FILENAME: image-name.jpg

TYPE      SIZE      LOADING   FETCHPRIORITY
WebP      145 KB    lazy      auto

INTRINSIC           RENDERED
1920×1080           960×540
16:9 (1.78)         16:9 (1.78)

• FILENAME: The image filename extracted from the source URL.
• TYPE & SIZE: Detected file format and transfer size (using Resource Timing API and background fetching).
• LOADING & FETCHPRIORITY: Browser-level optimization hints used for the image.
• INTRINSIC: Original image dimensions (natural size) and aspect ratio.
• RENDERED: How the image appears on the page (scaled size) and its current aspect ratio.

Advanced Filtering (Show All Mode)

When using "Show All" mode, you can filter which images are displayed:

Filter by File Type

• Check/uncheck specific filter options: JPG, PNG, GIF, SVG, and WEBP
• Only selected formats will show overlays
• Useful for focusing on specific image types

Minimum Size Filter

• Set a minimum width in pixels
• Images smaller than this width won't show overlays
• Helps filter out small icons, buttons, or decorative images

Aspect Ratio Filter (Intrinsic)

• Uses intrinsic dimensions (naturalWidth / naturalHeight) as the source of truth
• Filter modes:
  • Disabled
  • Have selected AR
  • Do NOT have selected AR
• Common AR presets include: 1:1, 4:3, 3:4, 3:2, 2:3, 16:9, 9:16, 21:9, 16:10, 5:4, 32:9
• Aspect-ratio matching uses a small tolerance (~1.5%) to avoid brittle exact matches
• Works alongside other filters (type + minimum width + AR)

Tips for Best Results

1. Use Inspector Mode for detailed analysis of specific images
2. Use Show All Mode to get a quick overview of all images on a page
3. Apply combined filters in Show All mode (type + min width + AR) to reduce clutter on image-heavy pages
4. Check both intrinsic and rendered sizes to identify scaling issues
5. Use AR mode = "Do NOT have selected AR" to quickly find non-compliant images (e.g., not 1:1)

Supported Image Formats

• Standard formats: JPG, JPEG, PNG, GIF, BMP, ICO
• Modern formats: WebP, AVIF, HEIF, HEIC
• Vector format: SVG
• Data URLs: Base64 encoded images

Technical Details

Browser Compatibility

• Chrome (Manifest V3)
• Based on modern Chrome Extension APIs

Permissions Required

• activeTab: Access to the current webpage
• scripting: Inject scripts to analyze images
• storage: Save your preferences and settings

Performance Notes

• Lightweight and efficient
• Only processes images when activated
• Minimal impact on page loading
• Settings persist across browser sessions

Troubleshooting

Images Not Showing Overlays

1. Ensure the extension is enabled
2. Check if images have a detectable image type (URL extension, query hints, picture source type, or data URL MIME type)
3. Verify minimum size filter isn't too restrictive
4. Try refreshing the page and reactivating
5. On restricted Chrome pages (e.g., chrome:// URLs), script injection is blocked and the popup will show a status error

Overlays in Wrong Position

• v1.4 introduces a new positioning engine that significantly improves placement in complex layouts.
• If overlays still overlap, try scrolling or zooming to trigger a refresh.
• On extremely dense pages, the engine prioritizes not covering the source image, which may result in overlays being pushed further away.

Extension Not Working

1. Try disabling and re-enabling the extension
2. Refresh the webpage after making changes

Privacy & Security

• No data collection: Extension doesn't collect or transmit any data
• Local processing: All analysis happens in your browser
• No external requests: Extension works entirely offline
• Minimal permissions: Only requests necessary permissions

Development

File Structure

image-checker-extension/
├── manifest.json          # Extension configuration
├── popup.html            # Extension popup interface
├── popup.js              # Popup functionality
├── background.js         # Background service worker
├── imageDetails.js       # Show All mode logic
├── inspectorMode.js      # Inspector mode logic
└── icons/               # Extension icons

Key Technologies

• Manifest V3: Latest Chrome extension standard
• Content Scripts: For webpage interaction
• Chrome Storage API: Settings persistence
• Chrome Scripting API: Dynamic script injection

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

License

This project is open source. Feel free to use, modify, and distribute according to your needs.