How do I check image dimensions?

How to 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?

Image dimensions chat

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:

France flag in pixels

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:

  • Landscape photos taken by my Canon DSLR camera have 5184Γ—3456 pixels.
  • A full HD monitor display has 1920Γ—1080 pixels.
  • A 4K monitor display has 3840Γ—2160 pixels.

⬆️ 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.
Get Info sample

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.
Get Info menu

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.
Image size Windows

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:

Inspect image size

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,

John Espirian

Keep in touch

Join 321 others on my free Espresso β˜•οΈ list and you'll receive:

  • πŸ” blog updates
  • πŸ“˜ free ebooks
  • πŸ’° discounts on consultancy
  • 🎟 offers and secret stuff

πŸ”’  No spam, I promise