Anyone with a blog or website willat some time wonder how big an image is, how wide a column of text is, how much space is in the margin and so on. These essential Chrome extensions show you.
- When you want an image to fill the width of a page, do you know exactly how many pixels wide to create it in your photo editor?
- If you have a sidebar in your theme, do you know what size image will fit? What size advert is best to fill with sidebar width? How much vertical space is required for text or an image?
- How wide is the margin between the page edge and text or images?
- What are the margins between columns?
We often have a lot of questions like these and coming up with the answer is hard, or at least it looks hard. In reality, it is actually quite easy if you have a Chrome extension called Page Ruler by frankmedison. This is not to be confused with Page Ruler by Dr. Slicer, which is so similar it makes you wonder if one was copied from the other.
The first extension is the most popular by a long way and is the one I recommend – 760,501 users can’t be wrong!
Measure objects on web pages
Add this extension to Chrome and a new button appears in the toolbar to the right of the address box in Chrome.
Go to a web page on your own website or anyone else’s that you are interested in and click the toolbar button.
A blue information bar is displayed across the top of the page and the mouse cursor turns into crosshairs. Click and drag a box around any image, text or area of the screen and the width and height is shown in the blue bar. This makes it easy to see the size of objects like images, sidebars, footers, headers and other objects on the page.
You can also see the position of the left, top, right and bottom edges.
Get page element sizes
In the top left corner of the page, in the blue bar, is < > and clicking this switches to an alternative mode for measuring screen objects. It looks at the underlying code of the web page. If the mouse hovers over an image, heading, body text, sidebar and so on – any page element – it reports the width, height and position on the page.
Here I am hovering the mouse over the heading on this page and Page Ruler has highlighted it and shows the dimensions and position.
It also shows the HTML tag, which in this case is h1. A web page should always have an h1 heading, so this is a handy way to check that your site, or someone else’s, is using one.
Measure page objects without extensions
It is possible to measure all these things without any Chrome extensions and the feature is built into the browser. Right click anywhere on a web page, such as in the body text, in the sidebar and so on, and select Inspect.
This divides the screen into two sections, one for the web page and the other for code. It can be split vertically or horizontally and I prefer the code panel to be at the bottom.
At the top is the page width. Set it to Responsive and set the width to be quite wide. I have mine set to 1280 pixels wide. The height does not matter.
In the code panel, which is at the bottom of the screen, on the right hand side, is another code panel. Scroll down to the bottom and this image is displayed. It shows the margin, border, padding and width and height of the area of the web page you clicked.
It does not show the size of objects, but the areas the page is divided up into. It will show the width of the sidebar, the main body, and so on. However, it shows the maximum size
Check on mobile devices
The size of web page elements changes with mobile devices because of their smaller screens. To see what a web page looks like and see how the size and spacing of web page elements changes, go to the menu at the top and select a phone, such as an iPhone or an iPad.
That graphic in above showing the margin, border, padding and dimensions changes. You may be surprised how small some phone screens are.
Sizing images
Images that are too small to fill the width of a page, column or sidebar are not stretched to fit.
Images that are too big for a page, column or sidebar are automatically shrunk to fit.
Therefore if you are not sure how big to make an image, it is best to make it bigger than it needs to be and let the browser automatically shrink it to fit. Ideally though, you should find out the maximum size and make the image that size.
