PixelZoomer

Measure websites pixel perfectly

PixelZoomer for Windows

Browser screenshot

For Windows®. Free.

PixelZoomer is a precise and intuitive software for the quick measuring of distances and picking color values. It's made for analyzing websites which have to be realized pixel perfectly. The Windows®-based application is free and can be used without restrictions: the project aims to be a non-profit software (freeware). The download contains a Windows® installer and is free of AdWare. Alternatively, you can download the portable version which doesn't require an installation.

Made for UI developers

Compare design templates and websites directly with PixelZoomer

Trust, but verify: when it comes to the realization of a design template, web designers and software developers usually have to work pixel perfect and true to size. Depending on the browser or application, 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 is required.

The typical workflow could be characterized by taking a desktop or window screenshot, open it in an image editing program and measure distances with a selection tool – a time-consuming endeavor which has to be done many times before the product is finished.

This is where PixelZoomer comes into play: the application creates a desktop snapshot automatically and directly enables a pixel-based analysis. It will also capture the actual web browser so you can quickly measure distances and pick color values. You can enlarge the screenshot easily by using the integrated magnifier. A pixel perfect implementation of the user interface is an ease.

At a glance

Work faster

The typical workflow of measuring distances or picking colors by using an image viewer is needless: with PixelZoomer, tools for analysis are just a click away. The application automatically creates a desktop screenshot on program startup to enable pixel analysis in seconds.

Enlarge up to 3200%

PixelZoomer allows you to zoom into a desktop screenshot up to 3200%. Distances can be measured precisely at any zoom level. An intelligent screen magnifier allows you to enlarge the area under the mouse cursor. The zoomed area can additionally be moved by using the mouse.

Pixel perfect work

For a precise realization, the zoom tool comes to help. When enlarging the desktop screenshot, every pixel is repeated without any smoothing algorithm. Therefore, hard edges remain at any zoom level. So you will always see real screen pixels.

Measure distances

The most important tool of PixelZoomer is the measuring tool, a virtual ruler. By using the mouse you can easily create selections on the screen. The software displays width and height of the pixel selection in real-time. You can also move the current selection around by pressing a certain key.

Pick colors

Sometimes you need to pick a specific color value of a design template – or a color of an already implemented button needs to be checked. With the integrated eye dropper, you can easily select the color value of the pixel below the mouse cursor. The color value is then displayed as HEX value and in RGB.

From the clipboard

PixelZoomer automatically creates a screenshot on program startup so that you can start your analysis directly. Alternatively you can paste an image from the Windows® clipboard. By doing so, you are able to capture certain states of a website or a software application.

Intuitive and in real-time

The main purpose of PixelZoomer consists in measuring a distance or extracting a color value quickly. The strength of the desktop application is represented by its speed – that's why the program doesn't have a main menu. The application starts up, a distance gets measured, the application gets closed. Since the desktop screenshot is created on program startup, a manual screen capture is redundant. By the way: PixelZoomer supports several screens by design. If you are running a multi-monitor setup, the program lets you choose which screen should be captured.

All tools of PixelZoomer work in real-time: zooming by mouse-wheel, picking a color or creating a selection work fluently. The visible screenshot area can be moved around with the right mouse button or by holding down the space key (panning). A selection which is being created with the measuring tool can also exceed window borders – PixelZoomer moves the screenshot area automatically.

All tools at a glance

Cross-Browser-Testing

PixelZoomer is primarily made for web designers, frontend developers and HTML/CSS programmers. In these areas, developers have a powerful layout tool with CSS: typography, user interface elements or even visual effects can be realized according to a design template. But the pixel perfect alignment and centering is not always an easy task. A visual check along vanishing lines can't be done by using your sense of proportion only.

Furthermore it's important for a professional appearance that websites and web applications (web apps) look consistent in different browsers. Consistency can't be reached easily always since major web browsers may differ in some ways: distances can vary, font sizes and line heights can turn out differently – or effects like shadows and rounded borders are displayed in distinct ways.

One for all

Compare multiple browsers at a time

With PixelZoomer, web developers have full control of different browsers. One click allows you to create a desktop screenshot including opened browsers and measure distances. If you align the browser windows side by side, you can check all required browsers in one step.

The fields of application reach further: even native programs or platform-independent apps which are created using JavaScript, HTML and CSS can be analyzed and measured easily.

Analyze interactive elements

Web applications and programs often contain context-sensitive interface elements. Those are flyout menus, icon overlays, tooltips or context menus for example. This kind of element only gets visible when a certain state is reached. This could mean moving the mouse pointer over a specific area. So mouse-over or hover effects count as that.

Don't move

Is such an element implemented already, it can be tricky to capture that element – since the element is being hidden when the mouse cursor is moved away. For this purpose, PixelZoomer allows you to paste images from the clipboard of the operating system. So you can prepare the needed state and create a screenshot with the PRINT key afterwards. Then you can open up PixelZoomer and paste that clipboard image via click.

Tooltip example

For customizing

Adjustments may not miss in a software application: that's why you can change the keyboard shortcuts of all tools in PixelZoomer. Furthermore there are settings for the zoom tool, the measuring tool and the eye dropper. For example, the preceding number sign of the HEX color values can be disabled. You could also set a background color for the selection area of the measuring tool.

PixelZoomer also supports multiple monitors: is there more than one screen, you can choose which screen is being captured on startup.