Measure distances accurately in Firefox

PixelZoomer for Firefox

Made for Firefox.

PixelZoomer is a Firefox extension for web developers which allows for zooming into websites. The core features are characterized by tools for pixel perfect measuring of distances and picking colors (HEX and RGB values) with an eye dropper. The viewable area of a web page is being displayed in PixelZoomer through using a screenshot so that the view is based on real pixels. The add-on ought to replace the step of using an image editing software when developing a web project. This provides the possibility of analysing sizes and distances directly in the browser.

PixelZoomer for Chrome on YouTube

Firefox as measuring tool

Use PixelZoomer in Firefox

The realization of a website is usually based on a design template that has to be transferred to the browser as accurate as possible. Buttons, texts and images then have to placed precisely with CSS. A visual check ensures that everything is at the right place – a virtual ruler can be helpful here.

In order to check distances on the website you would probably create a screenshot and open it in an image processing program or an image viewer. This process can be time-consuming since it has to be done many times until the website is finished.

PixelZoomer will speed up this process: the Firefox extension creates a website screenshot by clicking a button and opens it in a new tab. It then provides tools for analyzing distances or picking colors. The screenshot can be enlarged with an integrated magnifier.


Measuring tool

The main function of PixelZoomer is characterized by measuring pixel distances. The integrated measuring tool represents a virtual ruler which displays the height and width of a user-defined rectangle. The selection rectangle can be moved around during and after its creation.

Eye dropper

When it comes to digital measurements, color analysis is also an important part: PixelZoomer has an integrated eye dropper that allows you to pick up the color of any pixel on the screen in real-time. The picked color is displayed in HEX and RGB. The eye dropper can also be used when the screenshot is enlarged so you can pick the desired pixel precisely.

Zoom up to 3200%

Enlarging the website screenshot is also an important feature of PixelZoomer . An intelligent screen magnifier allows you to zoom into a specific area that can be selected with the mouse. You may zoom up to a level of 3200%.

All in one place

The different tools of PixelZoomer can all be found in one central place, a toolbar at the upper window border. The toolbar itself is separated into three parts which are represented by analysis tools, information and zoom settings. Since the extension is optimized for speed, the toolbar is just an assistance: you mainly work with your mouse and keyboard so that the toolbar is primarily used for displaying pixel sizes and color values.

PixelZoomer toolbar in Firefox

Precise measuring tool

Virtual ruler for measuring distances

PixelZoomer is made for measuring pixel distances in the first place. In order to handle this task precisely, the Firefox add-on creates a screenshot of the website. The screenshot is then displayed using a specific CSS attribute that prevents anti-aliasing. This leads to crisp pixel edges even when enlarging a screenshot. So you can measure sizes accurately at any zoom level. The virtual ruler allows you to retreive the width and height of a selection rectangle. You can create a square selection by holding down the SHIFT key.

Since a selection rectangle is not always placed perfecly with the first click, you may move it around in real-time by holding the SPACE key. You can move a selection around afterwards by using the mouse or the arrow keys on the keyboard.