There are two different things it sounds like you’re asking and they’re definitely related: One is the question of how big an image is as rendered on the Web page you’re viewing, and the other is related to the dimensions of the base image file itself. Look at it this way: If you zoom in on this Web page, the images get bigger, right? But the underlying image files haven’t changed dimensions as they’re fixed sizes. One is the view size, the other is the photo dimensions.
To figure out the as-displayed size is easy if you take advantage of a little Mac system trick, but it’s the latter that can be a bit tricky to ascertain depending on what Web browser you’re using. You’ll see what I mean in a second.
Let’s start by figuring out how big an image is on-screen. To do that, simply use Cmd-Shift-4 to take a region screen capture on your Mac OS X system. Yup, a screen shot. But you don’t actually care about the saved image, you just want the overlay cross-hair cursor.
Hang on, let’s get a page with an image on it to work with. I’ll jump over to Twitter‘s new Moments feature, which has a number of images displayed:
See that photo of Ethan Couch? Let’s figure out how big it is as currently displayed on the screen.
To do that, press Cmd-Shift-4 to get the region selection crosshairs, move it to the top left edge of the photo, then click-drag it to the lower right corner. It’ll show dimensions as it goes:
Can you see the lower right? It shows 296, 295. So this image as displayed in Safari on the Mac is 296 x 295, almost a perfect square.
Worth keeping in mind is that you might end up a pixel or two off on the size as it’s tricky to exactly define the region. To get an exact size, capture the entire screen then use a graphics editor to remove every superfluous pixel and see what size you have left.
The more interesting question is about the size of the underlying image file. There are a bunch of ways to identify that, but my favorite is simply to drag the image to the desktop from the Web browser:
Then use Control-I (or File > Show Info…) to get the Mac OS X info box:
Dead center it shows that the image file itself has the dimensions of 768 x 1024, more than twice the dimensions of the current display on the page. That’s inefficient Web coding, actually, but that’s another topic entirely.
How else could you ascertain this information? Safari does a good job of showing you information on the tab, so one way you could figure out these dimensions is to Control-click on the image, then choose “Open in New Tab…” from the pop-up menu. You’ll then see:
That’s easy enough. Unfortunately, since tab sizes are dependent on how many tabs you have open (and the design of the Web browser), sometimes this works, other times — like in Google Chrome — where it doesn’t help out.
The hard core way to identify image size is actually to open up the source code and “inspect the element”, something that’s easy to do in Apple Safari if you’ve enabled developer mode from the Preferences > Advanced window:
Once that’s enabled, you can Control-click on the image on the Web page and there’s a new option on the menu:
Choose “Inspect Element” and you’ll see the actual line of code from the Web page source that references the image:
It’s a bit hard to read, but the attributes on this particular image are data-height=”1024″ and data-width=”768″. The source dimensions of the file (though not the display dimensions of the image as shown).
There ya go. Lots of different ways to figure out image and image file dimensions. Now go and make some great Web pages!
The post How big is an image or photo on a Web page? appeared first on Ask Dave Taylor.