How To Measure Pixels On A Webpage?
By on April 18th, 2009

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.

view_screen_ruler_firefox

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.

exact_pixel_measurements

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

Tags: ,
Author: Keith Dsouza Google Profile for 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 and can be contacted at keith@techie-buzz.com.
  • 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?

  • http://www.voilawebdesign.com adrian

    Thanks!

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

  • http://MikeGuminski.com 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

    • http://keithdsouza.com 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

  • http://www.urbandizajn.com/ Dejan web dizajner

    How can I measure pixels with Firebug? Anyone?

  • http://www.justsomediahouse.co.uk 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.

    Or

 
Copyright 2006-2012 Techie Buzz. All Rights Reserved. Our content may not be reproduced on other websites. Content Delivery by MaxCDN