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.
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 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.