Technical writing services by Espirian

How do I check image dimensions?

When it comes to images, are you confused by talk of pixels and dimensions and sizes? Do you know how to view the dimensions of your images?

Be prepared for questions like this

Here’s a quick way to find our how wide and tall your images are.

Preamble

On the web, an image’s width and height are most often measured in pixels (short for picture elements).

Pixels are the individual points that form the visual content you see on your screen.

If I created a tiny version of the French flag, it might look like this up close:

The French flag. Could also be a jumbled Rubik’s cube 🤓

The image dimensions are 3×3.

There are 9 pixels in total, but we’d usually write the dimensions as 3×3 pixels.

Image dimensions are always written in this order: width×height.

To give you some context about image dimensions in the real world:

⬆️ Back to top

How do I check image sizes on macOS?

To see the pixel size of an image on macOS:

  1. Click the image file.
  2. Press CmdI on the keyboard.

Use Cmd-I to get info on a selected image in macOS

If keyboard shortcuts aren’t for you, you can use the system menus instead.

  1. Click the image file.
  2. Go to File | Get Info.

If keyboard shortcuts aren’t for you, use File | Get Info

⬆️ Back to top

How do I check image sizes on Windows?

On Windows, hovering the pointer over an image file will usually be enough for you to see the image size.

If that doesn’t work:

  1. Right-click the image file.
  2. Click Properties.
  3. Click Details.

If hovering the pointer doesn’t work, look in Properties | Details

⬆️ Back to top

How do I check image sizes on the web?

One easy way to check the sizes of images on the web is to save them to your desktop and then use one of the methods above to inspect the file on your machine.

Here’s an alternative method that doesn’t require any saving:

  1. Right-click the image on a web page.
  2. Click Inspect.
  3. Click Computed.
  4. Look for the width and height figures.

Here’s an example:

This screen looks different in each browser. This is the view in Google Chrome.

The innermost rectangle in the multicoloured box gives you the width and height in pixels.

⬆️ Back to top

Bonus: How do I add a placeholder image to my website?

If you’re creating or updating a website, you’ll sometimes want to block out space for an image.

I’ve found a couple of useful tools to produce placeholder images at the dimensions you want.

Take a look here: How to generate placeholder images for a website.

⬆️ Back to top

Let’s wrap up

That was a brief intro to pixels and dimensions, and you’ve seen how to view widths and heights on macOS and Windows. I also covered checking web images and adding placeholders.

Do you have any other questions about image dimensions? Leave a comment below and I’ll add the answer to this post – or write a whole new post!

⬆️ Back to top

Thanks for reading,

Subscribe for tips

Join 410 others on my free Espresso ☕️ email list to receive:

  • blog updates
  • free ebooks
  • discounts on consultancy
  • offers and secret stuff

🔒  No spam, I promise • privacy policy