Determine Image Dimensions for Website Design

Apr 06, 2017/ Home >  MacOS >  Determine Image Dimensions for Website Design

Apr 06, 2017

6 min read

1. Apple Safari

Apple Safari is a web browser developed by Apple Inc., designed primarily for macOS and iOS devices (Mac, iPhone, iPad).

Overview

Here are some tutorials for how to determine an image dimension.

First, select an image’s dimension on a website using Apple Safari Browser.

Image dimension refers to the width and height of an image, typically measured in pixels (px). It defines how large or small an image appears on a screen or in print.

Steps:

  1. Go to a website.
  2. Right-click on the image you want to determine its dimension, and open it in New Tab.
  3. Click on the image to maximize it.
  4. Right-click and click Inspect Element.
  5. Safari Web Inspector (Web Developer Tool) shows you the image properties. At the end of the file name, the Width and Height show you the exact image dimension.

Video Guides for Apple Safari Browser

2. Mozilla Firefox

Mozilla Firefox is a free and open-source web browser developed by the Mozilla Foundation. It allows users to access and navigate websites on the internet.

Overview

To determine an image’s dimension on a website using Mozilla Firefox Browser.

Steps:

  1. Go to a website.
  2. Right-click and click Inspect Element.
  3. Click on the image to maximize it.
  4. Firefox’s Firebug Developer Tool appears at the bottom of the browser showing the highlighted image properties.
  5. Roll your mouse pointer over the highlighted image properties, and an image thumbnail will appear above your cursor together with the image dimensions.

Video Guides for Firefox Browser

3. Google Chrome

Google Chrome is a free web browser developed by Google that allows users to access, browse, and interact with websites and web applications on the internet.

Overview

To determine an image’s dimension on a website using Google Chrome Browser.

Steps:

  1. Go to a website.
  2. Right-click and click "Inspect".
  3. Chrome’s DevTool (Developer Tool) appears at the right of the browser showing the highlighted image properties.
  4. Roll your mouse pointer over the highlighted image name, eCommerce-banner.jpg, and an image thumbnail will appear above your cursor together with the image dimensions.

Video Guides for Google Chrome Browser

4. macOS 

macOS is the operating system developed by Apple Inc. for its Mac computers, including MacBook, iMac, Mac Mini, and Mac Pro.

Overview

Determine Image Dimensions on MacOS for Saved Image for Website Design.

Steps:

  1. Right-click on the image and click "Get Info".
  2. Under the General Tab, the second item, Size, shows the image size (360kb).
  3. Under the More Info Tab, the second item, Dimensions , shows the image dimensions, (1900 x 511 pixel).

Video Guides for MacOS

5. Windows 7

Windows 7 is an operating system developed by Microsoft, released in October 2009 as part of the Windows NT family. It was designed for personal computers, including desktops, laptops, and tablets.

Overview

Determine Image Dimensions on Windows 7 for Website Design.

Steps:

  1. Right-click on the image and click "Properties".
  2. The fourth item shows the image size (351kb).
  3. Double-click to open the image using Windows Photo Viewer.
  4. Click File → Properties on the Windows Photo Viewer Menu.
  5. Under Image ID, Dimension is 1900 x 511 pixel.

Video Guides for Windows, Windows 7

WebTemple
< Prev Next >

Share On:

Related Posts

Email Configuration for Outlook 2007

1. Click and run Outlook 2007. 2. On top of Outlook 2007 main window, click Tools menu, then Account Settings.

11 September 2012

Email Configuration – Configure Email Account on iPad

To configure your email account on the iPad, please kindly follow the guide

26 January 2013

Email Configuration – Configure Email Account on iPhone

To configure your email account on the iPhone, please kindly follow the guide.

26 January 2013