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.
Author: Keith Dsouza
I am the editor-in-chief and owner of Techie Buzz. I love coding and have contributed to several open source projects in the past. You can know more about me and my projects by visiting my Personal Website.I am also a social networking enthusiast and can be found active on twitter, you can follow Keith on twitter @keithdsouza. You can click on my name to visit my Google+ profile.Keith Dsouza has written 4378 articles for us.
The author of this post can be contacted at keith@techie-buzz.comComment 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