Extra Pixels in Adobe Illustrator

Solving the mistery of unwanted pixels in exported files

Problem showcase

Let’s say I have an illustration on a 333x333 px artboard.

Screenshot of Illustrator window with artboard properties, size set to 333x333
This artboard is precisely 333x333 px

I want to export it into a bunch of PNG images with various scaling. Sounds like a trivial job to me. I run Export -> Export for Screens and tick x1, x2, x3 scaling options:

Screenshot of exporting options
Selecting three scale option

A Finder window pops out exposing the generated images. At this point I could have pressed ⌘+I on each file to summon a flock of new Information windows. Instead of that, I’m opening Terminal with current folder1 and run identify -format "%f %G\n" command2 to get file details in plain format:

icon.png 334x334
icon@2x.png 667x667
icon@3x.png 1000x1000

Here it is. Each of exported files is 1px larger in both dimensions. Even the non-scaled icon.png is 334x334 px, whereas the artboard is 333x333 px.

This doesn’t happen when files are exported with Save for Web or Export as..., hence the problem is specific to Export for Screens.

The Origin of Extra Pixels

I stumbled upon this message in Adobe Support Community:

The root of the problem is when the Artboard Reference Point is set to center. This means the X & Y coordinates are based on the center point of the artboard. Consequently, when the width or height of your artboard is an odd number, the edges of the artboard are pushed off the pixel grid, and end up in between pixels. Illustrator then tries to compensate for this during export and ends up adding an extra pixel.

In my case, both width and height of the canvas are odd numbers. According to the found suggestion, changing the Reference Point from center to one of the corners should fix the issue. Screenshot of Reference Point setting

After exporting with Reference Point set to top-left corner:

icon.png 334x334
icon@2x.png 667x667
icon@3x.png 1000x1000

Extra pixels are still added.

I double-checked that the Reference Point and artboard size are both set properly, this time noticing that artboard position contain decimals.

Screenshot of artboard details pane
Decimals in coordinates

From my experience, such decimals may appear after moving artboards with the mouse. I presume that Illustrator is rounding up X, Y coordinates to the nearest whole integer and that somehow affects the dimensions of exported images.

To quicky fix the coordinates I run Object -> Make Pixel Perfect and do another export:

icon.png 333x333
icon@2x.png 666x666
icon@3x.png 999x999

Hooray! All files have correct sizes.

The Solution

To prevent Illustrator from adding extra pixels to exported images it’s necessary to make sure that:

  1. Artboard size is set in whole numbers (i.e., W = 333 px, H = 333 px)
  2. Artboard position is set in whole numbers (i.e. X = 547 px, Y = -378 px)
  3. Artboard Reference Point is set to any of the corners.

  1. To quickly launch macOS Terminal in the current folder location, go to Setttings -> Keyboard -> Keyboard Shortcuts, select Services -> Files and Folders, tick New Terminal at Folder and assign a desired shortkey. I personally use ⇧⌃⌘+Z to launch iTerm2. ↩︎

  2. identify tool is a part of ImageMagick — a free, open-source software suite, used for editing and manipulating digital images. It allows performing mass and repetative acctions on images, thus saving time. Visit imagemagick.org for more information. ↩︎

Reply via Email or Mastodon