Analyze websites pixel perfectly in Chrome

PixelZoomer for Chrome

For Google Chrome.

PixelZoomer is an extension for Google Chrome and allows the quick measuring of distances and picking color values. It creates a screenshot of the opened website and provides various tools for analysis. It's made for websites which have to be realized pixel perfectly. The extension is aimed at developers and web designers. PixelZoomer is free and can be added to Chrome via the Chrome Web Store.

PixelZoomer for Chrome on YouTube

Direct Chrome integration

Use PixelZoomer in Chrome

When it comes to the realization of a design template, web developers usually have to work pixel perfectly: buttons, images and texts have to be aligned precisely. A sense of proportion isn't enough if distances have to be exact – a digital ruler would help in this case.

The workflow of measuring pixel distances on a website could be characterized by taking a screenshot, open it in an image editing program and measure distances with a selection tool – a time-consuming task that has to be done multiple times before the product is finished.

That is where PixelZoomer comes into play: the Chrome extension creates a website screenshot and directly enables a pixel-based analysis. You can enlarge the screenshot easily by using the integrated magnifier. Measuring distances and picking colors is a short task from now on.


Measure distances

The primary tool of PixelZoomer is the measuring tool, a virtual ruler. By using the mouse you can easily create selections on the screenshot. PixelZoomer displays width and height of the pixel selection in the toolbar. You can also move the current selection by pressing the arrow keys or moving the mouse.

Pick colors

When you need to pick a certain color value of a website, it requires pixel perfect precision. With the integrated magnifier and the eye dropper, you can easily select the color value of the pixel below the mouse cursor. The color value is displayed as HEX value and in RGB.

Enlarge up to 3200%

PixelZoomer allows you to zoom into a website screenshot up to 3200%. Pixel distances can be measured precisely at any zoom level. An intelligent magnifier allows you to enlarge the area under the mouse cursor. The zoomed area can also be moved around by using the mouse.

One toolbar only

All tools of PixelZoomer are integrated in one sole toolbar which is located at the top of the window. The toolbar is separated into three parts: tools for analysis, information and zoom settings. The extension is developed in a way that the toolbar is just an assistance: the actual work with the screenshot is done via mouse and keyboard. Every function can be accessed through a keyboard shortcut and the interaction with the mouse works intuitively. You can scroll into a screenshot by just using the mouse wheel.

PixelZoomer tools in Chrome

Virtual ruler

Measure distances pixel perfectly in Chrome

The virtual ruler of PixelZoomer is activated by creating a selection: create rectangular regions at will and you can read the width and height of the selection in the toolbar. A selection is also possible when the website screenshot is enlarged. A created selection can also be moved accross the window border – the visible image area is moved by the extension automatically. You can also create square selections by holding down the SHIFT key.

Finally, you can move around any selection in real-time: by pressing the SPACE key and moving the mouse, you can change the position of the current selection easily. So you don't have to recreate a whole selection if you missed a pixel edge.