Shopify Image Sizes Tool
This tool allows you to measure image dimensions and file size on any Shopify store.
Not sure what size your Shopify site's images are, when displayed on the frontend?
Drag the "Measure images" button to your Bookmarks, or right click on it, copy address, and add it as a bookmark manually.
Then, visit any Shopify store, scroll all the way down to load all images and up again, and click on the bookmark.
What does the "Measure Shopify Image Sizes" tool do?
This tool lets you check the actual display sizes of images used on your Shopify store’s frontend. It’s especially useful when you’re optimizing images for speed or quality and want to confirm what size they render at on the live page.
How does it work?
It uses a small JavaScript snippet that scans all visible images on your page, reads their rendered width and height, and overlays a tiny label showing the dimensions directly on top of each image.
Will this affect my website or customers?
Not at all. The tool runs only inside your browser session, meaning it never modifies your store or code. If you refresh the page, the labels disappear and everything returns to normal.
Why didn’t it add labels to all images?
That can happen when:
- Some images haven’t fully loaded yet.
- The page uses lazy loading or background images (which aren’t true
<img>tags). - The script didn’t detect dynamic content added after load.
Also - do not forget to scroll down and back up on pages with lots of images. This can help trigger the script to detect all images correctly.
It’s still not showing sizes — what now?
The tool relies on a detection algorithm that reads from the DOM. Some custom themes or apps use unusual image containers that hide size data, making detection impossible. In that case, you can inspect the image manually using your browser’s DevTools → Inspect Element → check the rendered dimensions.
Can I use it on any website or only Shopify stores?
While it’s designed with Shopify stores in mind, the script technically works on any site that uses HTML images. So you can use it to check image sizes on other platforms too — WordPress, Wix, custom sites, etc.
Why should I measure Shopify image sizes?
Knowing your images’ actual display sizes helps you optimize loading speed and visual clarity. You can resize or compress images to match how they appear on screen, reducing file weight and improving Shopify Core Web Vitals scores.
Is it safe to use?
Yes — completely safe. The bookmarklet runs client-side in your browser and doesn’t send or store any data. It simply reads what’s already visible on the page to show dimensions.
Can I remove the labels once added?
Absolutely. Just refresh the page and all the labels will disappear instantly. The script never makes permanent changes to your store or theme.