How To Measure Pixels On A Webpage?
Quite recently one of my friend on Twitter (follow me @keithdsouza) asked how one could measure pixels between any two points on a webpage?
There was something about this question, that made me realize that, I have been using a Firefox add-on that helps users to measure pixels on a webpage, in a quick and easy way for ages now.
The Web Developer extension for Firefox is something I rely on quite often for several reasons, I feel will not fit this post, but to answer this certain question, you can easily measure pixels on any webpage using the Web Developer add-on.
If you do not already have this useful add-on installed in Firefox, download it first and then visit the toolbar or the Tools menu and click on Miscellaneous > Display Ruler.
![]()
Once you have enabled the ruler you can measure any object on the webpage to determine the exact pixels used for the HTML object. Take a look at the screenshot below to see how much pixels are used to display the Techie Buzz logo.
![]()
This is one extension we would recommend to everyone, there are several other features which come in really handy and can make it a must have Firefox add-on.
We have a compiled list of cool Firefox add-ons for programmers and designers coming up soon, it’s been on a backburner, but this question has led me to work and publish that post faster, so stay tuned and visit back regularly.
Comment Using Facebook
7 Responses to this Article | Share your Opinions/Comments
We moderate comments to prevent spam. Moderation is done within few hours. Please try and stay on topic and refrain from using abusive language. If you think there is a problem with this post, please email the post author or send us an email at tips@techie-buzz.com with the URL and the problem you see and we will rectify it as soon as we can.

I think it`s easier to measure pixels using Firebug. Besides it shows borders, paddings and margins of selected objects.
sir, can you tel me what are all the elements in a single pixel and how to measure the pixel?
Thanks!
Didn't realize the web developer tool bar had a ruler!
I can not thank you enough for this information on measuring pixels on websites. Since the FireFox 4 Update the “Measure It” addon does not work anymore. Since I am always building and designing custom wordpress power sites this is a much need tool for me right now. Especially for knowing what size images need to be along with how big ads need to be created for. I thank you ever so much for this post. You have saved me so much guess work. Wish is exactly what I’ve been doing since the new FireFox 4 Update. As with Adrian in the post below I didn’t even release that the web developer toll bar had a ruler and it just so happens I already have that installed.
Thanks Again,
Mike Guminski
@Mike – Glad you found this helpful. I have been using the Web Developer extension since past 5 or so years and have found it to be really good
How can I measure pixels with Firebug? Anyone?
Thanks to Chris Pederick, these are very useful.
When measure it died I felt lost and desperate, I even tried holding a ruler up to the screen – that’s how bad it got.
I feel like a reformed man now you have given me the tools of the trade again.
Or