How To Measure Pixels On A Webpage?

Quite recently one of my friend on (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 that helps users to measure pixels on a webpage, in a quick and easy way for ages now.

The Web Developer extension for 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 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.

Download Web Developer Firefox Add-on

Published by

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.

  • Max Sharov

    I think it`s easier to measure pixels using Firebug. Besides it shows borders, paddings and margins of selected objects.

  • keerthi

    sir, can you tel me what are all the elements in a single pixel and how to measure the pixel?

  • adrian


    Didn't realize the web developer tool bar had a ruler!

  • Custom Built WordPress Websites

    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

    • Keith Dsouza

      @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

  • Dejan web dizajner

    How can I measure pixels with Firebug? Anyone?

  • Surya

    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.


  • ๅŠ›ไป ๅŠ‰

    Hi Keith:

    I made a web tool which measure width and height of any web page elements in pixels and without any installation.
    Please check, thank you.