Pixel preview mode for web graphics

When you design graphics for screens and the web, you need control over how your vector artwork converts to pixels. Pixel preview mode shows exactly how your artwork will appear when exported as JPEG, GIF, or PNG files. This helps you make better decisions about placement and sharpness before you export.

Pixel preview works with the pixel-aligned property and Illustrator's pixel grid to give you precise control over how your graphics look. Understanding these features helps you create web graphics that appear crisp across different devices and screen resolutions.

How pixel preview mode works

Pixel preview mode simulates the rasterization process by showing your vector artwork as it will appear when converted to pixels. When you enable pixel preview through View > Pixel Preview, Illustrator displays your artwork using the same 72 pixels-per-inch resolution that will be applied during bitmap export.

This preview is particularly valuable when you zoom to 600% or higher, where you can see individual pixels and evaluate how object edges, strokes, and fills translate from vector to raster format. The visual feedback helps you identify issues with blurriness or unwanted anti-aliasing before you export.

The pixel grid and rasterization

Illustrator uses an underlying pixel grid to determine how vector objects are rasterized. This grid divides the artboard into precise 1-point increments—equivalent to 1/72 inch—which directly corresponds to the 72 pixels-per-inch resolution used for web graphics.

The pixel grid's structure governs several important behaviors:

• Rasterization boundaries: Objects align to grid divisions during bitmap conversion
• Anti-aliasing decisions: Illustrator applies smoothing based on how object edges intersect grid lines
• Snap behavior: Objects can lock to grid lines for pixel-precise placement

You can view the pixel grid itself by zooming to 600% magnification or higher while pixel preview mode is active. This visibility helps you understand exactly where pixel boundaries fall and how they affect your artwork.

Pixel-aligned property

The pixel-aligned property forces horizontal and vertical segments in vector objects to snap precisely to the pixel grid. When enabled, this property ensures that straight edges align with pixel boundaries rather than falling between them, eliminating the soft, blurred appearance that anti-aliasing creates along snapped edges.

You can enable the pixel-aligned property for individual objects through the Align to Pixel Grid option in the Transform panel. Once set, objects maintain their pixel alignment even when you move, scale, or transform them—the coordinates automatically adjust to preserve the grid relationship.

This property affects only segments that run horizontally or vertically. Diagonal lines and curves still require anti-aliasing to appear smooth, but aligned edges remain sharp and crisp.

Document-level pixel alignment

Illustrator provides the Align New Objects to Pixel Grid setting at the document level, which automatically applies the pixel-aligned property to every new object you draw. This option is enabled by default when you create documents using the Web or Mobile document profiles.

With document-level alignment active, rectangles, ellipses, lines, and other objects you create already snap to the pixel grid. This workflow saves time compared to manually enabling the property for each object and helps maintain consistency across your artwork.

You can toggle this setting on or off depending on your needs—some design work benefits from pixel precision while other projects require more flexible positioning.

Snap to Pixel behavior

The View > Snap to Pixel command controls whether objects snap to the pixel grid as you create and manipulate them. When active, this feature pulls object edges toward the nearest grid line whenever you move, draw, or transform artwork.

Snap to Pixel works differently from the pixel-aligned property:

• Snap to Pixel: Controls real-time snapping behavior during editing operations
• Pixel-aligned property: Maintains object alignment to the grid across transformations

You can disable Snap to Pixel when you need freeform positioning with decimal coordinate values. This flexibility allows you to place objects between grid lines, though this positioning typically results in anti-aliasing along all edges when the artwork rasterizes.

Anti-aliasing implications

Anti-aliasing smooths the appearance of diagonal lines and curves by blending edge pixels with background colors. While this technique improves the visual quality of angled elements, it creates a soft, slightly blurred effect that may not be desirable for all web graphics.

Pixel-aligned objects avoid anti-aliasing along their horizontal and vertical edges—typically the left and top sides when snapped to the grid. This selective anti-aliasing produces graphics with a mix of sharp edges and smooth curves, which often works well for interface elements and icon design.

When you position objects between pixel grid lines, Illustrator applies anti-aliasing to all edges. You can observe this effect in pixel preview mode by moving an object slightly: notice how edge sharpness changes as the object crosses grid boundaries. Even minor position adjustments—measured in fractions of points—can significantly impact the final appearance.

Working with pixel preview effectively

Understanding the relationship between pixel preview, the pixel grid, and alignment properties helps you make strategic decisions about web graphic design:

• Use pixel preview mode to evaluate rasterization quality before export
• Enable pixel alignment for objects were crisp edges matter most
• Consider the ruler origin's position when setting up documents for web work
• Zoom to 600% or higher to inspect individual pixels and fine-tune placement
• Balance pixel-perfect precision with design flexibility based on your project needs

For step-by-step instructions on creating pixel-aligned artwork, refer to Draw pixel-perfect art. Learn best practices for creating and exporting web graphics.