Blog

You know those times when you're browsing the web and think, "That's a great photo, I wonder what they used to take that?," or, "I wonder where that was shot?" or, "Oooo, great pic, how can I download that?" Or maybe you're a creative agency that looks for inspiration around the web. If so, you may have some different thoughts, like, "Great photo, I wonder how big it is on disk?," or "I wonder if they're using the new srcset technique for their responsive images?" Some of us fall into both categories.

Luckily, most of those answers can be found with little effort. However, you may need several tools a bit of free time to get to all of them. Web browser developer tools can give you some answers. You can install software that will give you the others or possibly find an online service that provide some, too. It takes some time and can be overly conveluded at times. Definitly not efficient use of your time. Most users probably don't even know that developer tools exist or how to open and use them. Since we ask these quetions on a day-to-day basis we thought we should build a tool that would give us the image information we need with little to no effort, and make it available to everyone! So we did, in the form of a new Chrome Extension! 

Image Analyzer is a Google Chrome Extension that, with two clicks, will get you the image data you are looking for. Once installed, you'll be able to right-click on any page and "analyze all" or you can right-click directly on an image and "analyze selected." Both options grab all images found on the page and display them in a gallery style overlay. "Analyze selected" will take you right to the image you wanted to analyze first while still allowing you cycle through the rest of the images found on the page. 

The initial screen you're presented with outlines the properties of the image. It gives you an overview of the src, srcset, current src, sizes, file size, width, height, natural width, natural height, any alt text, and a link if one is present. This great for quickly identifying some properties of the image itself as well as helps determine if an image is using the latest responsive technique, namely srcset and sizes. You can also expand the raw attributes box at the bottom of the sidebar to see the exact attributes applied to the image including any data attributes. Click the image to the left to see an example in action. Being able to quickly view this information for multiple images on a page with a couple clicks is already a winning proposition.

Once we had the image properties sorted we thought it would be beneficial to include a little more detail about the photo. What's a better way than getting this information from the EXIF data? There isn't one, so that's what we did! Not every photo on the web has its EXIF data intact, but the ones that do offer some really cool detail. Who took the photo and when? What camera took the photo? What were the camera settings as far as aperture, iso, exposure, etc.? Where was the photo taken?? All of this information is stored in your photos, you just can't see any of it! Click the two images below to see all the EXIF data we expose.

After adding all the EXIF info all that was left to do was add a download button so you can quickly download the image. Now it only takes a few clicks to get all the information about a photo you need without needing to know about developer tools or some other software you might install to gather this info. Everyone can use it, for free! Check the video out below for a quick demo, and grab your copy of Image Analyzer from the Chrome Web Store!