The Check Image Optimization Bookmarklet is an essential tool for image optimization and performance analysis.
With one click, this bookmarklet analyzes all images on the page for optimization best practices.
Perfect for quick image optimization audits and performance analysis. No more manual inspection - just click and analyze!
javascript:!function(){const t=document.querySelectorAll("img"),i={total:t.length,withAlt:0,withDimensions:0,lazyLoaded:0,details:[]};t.forEach((t=>{const n=t.hasAttribute("alt")&&""!==t.alt.trim(),e=t.hasAttribute("width"),s=t.hasAttribute("height"),a=t.hasAttribute("loading")&&"lazy"===t.loading;n&&i.withAlt++,e&&s&&i.withDimensions++,a&&i.lazyLoaded++,i.details.push({src:t.src,alt:t.alt,width:t.width,height:t.height,hasAlt:n,hasDimensions:e&&s,isLazy:a})}));const n=document.createElement("div");n.style.cssText="\n position: fixed;\n top: 20px;\n right: 20px;\n width: 80%;\n max-width: 800px;\n max-height: 80vh;\n background: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n z-index: 10000;\n overflow-y: auto;\n ";const e=document.createElement("div");e.innerHTML=`\n <h2 style="margin-top: 0;">Image Optimization Analysis</h2>\n <div style="margin-bottom: 20px;">\n <button onclick="this.closest('.seo-popup').remove()" style="float: right;">Close</button>\n </div>\n <div style="margin-bottom: 20px;">\n <h3 style="margin: 0 0 10px 0;">Summary</h3>\n <p style="margin: 0;">Total images: ${i.total}</p>\n <p style="margin: 5px 0 0 0;">Images with alt text: ${i.withAlt}</p>\n <p style="margin: 5px 0 0 0;">Images with dimensions: ${i.withDimensions}</p>\n <p style="margin: 5px 0 0 0;">Lazy-loaded images: ${i.lazyLoaded}</p>\n </div>\n <div style="margin-bottom: 20px;">\n <h3 style="margin: 0 0 10px 0;">Image Details</h3>\n <div style="margin: 0; max-height: 300px; overflow-y: auto;">\n ${i.details.map((t=>`\n <div style="margin-bottom: 10px; padding: 10px; background: #f5f5f5; border-radius: 4px;">\n <p style="margin: 0;"><strong>Source:</strong> ${t.src}</p>\n <p style="margin: 5px 0 0 0;"><strong>Alt text:</strong> ${t.alt||"None"}</p>\n <p style="margin: 5px 0 0 0;"><strong>Dimensions:</strong> ${t.width}x${t.height}</p>\n <p style="margin: 5px 0 0 0;">\n <strong>Status:</strong>\n ${t.hasAlt?"✓ Alt text":"✗ No alt text"}\n ${t.hasDimensions?" ✓ Dimensions":" ✗ No dimensions"}\n ${t.isLazy?" ✓ Lazy loaded":" ✗ Not lazy loaded"}\n </p>\n </div>\n `)).join("")}\n </div>\n </div>\n <div style="margin-bottom: 20px;">\n <h3 style="margin: 0 0 10px 0;">Optimization Tips</h3>\n <ul style="margin: 0; padding-left: 20px;">\n <li>Add descriptive alt text to all images</li>\n <li>Specify width and height attributes to prevent layout shifts</li>\n <li>Use lazy loading for images below the fold</li>\n <li>Optimize image file sizes and use appropriate formats (WebP, AVIF)</li>\n <li>Consider using responsive images with srcset and sizes attributes</li>\n </ul>\n </div>\n `,n.classList.add("seo-popup"),n.appendChild(e),document.body.appendChild(n)}();Drag me to bookmark bar: 👉🏻 Check Image Optimization
This tool streamlines your image optimization by:
- Automatically detecting all images
- Checking for alt text and dimensions
- Analyzing lazy loading implementation
- Displaying image details and previews
- Working on any webpage instantly
Why Use the Image Optimization Checker? #
This essential tool makes image optimization analysis effortless. Perfect for web developers, content managers, and anyone who needs to ensure optimal image performance. Simply click the bookmarklet to instantly analyze all images on a page. Helps you quickly identify images that need optimization and ensure better page performance and accessibility.
- Previous: Check Hreflang Tags
- Next: Check Indexing Status