The solution to the extra pixel problem

[eikonoklastes]

Illustrator allows for sub-pixel accuracy in artwork and artboard positioning and sizes. To get a clean, precise export for screens, your artboard needs to be aligned to the pixel grid. This means all its edges need to perfectly line up with the pixel grid.

Sometimes Illustrator, using Export for Screens, exports an image with an extra pixel row or column, and many consider this to be a bug. However, while it is certainly not desirable behaviour, and could benefit from more intelligent handling, there is sound logic behind it.

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.

Example:

Artboard width: 99 px, X postion: 0

The left edge ends up at -49.5 px because the X position is actually based on the middle point of the artboard, not the left edge, so 99÷2 = 49.5.

The solution:

First, make sure that your artboard X, Y and width and height are all clean, whole numbers.

Then,

A) If your reference point is set to center, compensate by offsetting your X or Y position by 0.5, which will align the left/top edges to the pixel grid.

Alternatively, and preferably,

B) set your artboard reference point to the top left corner and you can then deal with whole numbers instead of messing around with decimals.

Important note about Save for Web (Legacy):

Some people suggest using this to force Illustrator to export at a particular size. Be aware though that if your artboard and/or artwork is not aligned to the pixel grid then Illustrator will export your artwork with blurry edges, because it will try to blend (anti-alias) 2 pixels together. The cleaner and more precise approach is to make sure everything is aligned to the pixel grid and to use the newer Export for Screens dialog.

[Srishti Bali]

Hi eikonoklastes,

Thanks for sharing this.

Regards

Srishti

[BGBenevolent]

This is a bug. I've tried many of the proposed solutions and they don't work consistently.

There are alot of templates that are downloaded with this one extra pixel problem, once the mistake has been made it is very hard to correct, I don't want to run everything I export through a third program to trim the extra pixels. This is very frustrating when you have to submit precise documents. Please fix it.

[eikonoklastes]

BGBenevolent  wrote

This is a bug. I've tried many of the proposed solutions and they don't work consistently.

There are alot of templates that are downloaded with this one extra pixel problem, once the mistake has been made it is very hard to correct, I don't want to run everything I export through a third program to trim the extra pixels. This is very frustrating when you have to submit precise documents. Please fix it.

It is not a bug. You can 100% guarantee a clean export by following the steps in my original post, which is not a proposed solution but a description of how to use the system correctly. The reason I used the word "solution" in the title is to bring people to this post when they Google the issue.

The system could definitely use improvement to make the user more aware of what's happening, or to be more aggressive in preventing this clearly unwanted issue.

[Roger Sawhill]

Your solution is 99.9% correct. Unfortunately, one can follow these instructions and still have the 1 pixel problem.

This problem has plagued me intermittently for some time using the exact methods you have described. The key is that the PIXEL GRID is not necessarily aligned to the Ruler as the ruler's zero point can be moved by the user. The Pixel Grid is permanently aligned to larger AI pasteboard, not the 0x/0y point of the ruler. Therefore, if one moves their rulers to their current artboard, then the 0x/0y point may not actually be aligned to the master Pixel Grid.

If you have your rulers visible, go to the corner where the two rulers meet. Right-click on this box to get a pop-up list and select CHANGE TO GLOBAL RULERS. You can then re-align your artboard to a whole number intersection. Once you do this, then you are guaranteed that the extra pixel will not be added and you will get perfect pixel exports every single time.

[Ton Frederiks]

Roger,

that's a very good tip!

I have not seen it mentioned elsewhere.

Thanks,

Ton

[redguitar]

Wow, thanks very much, this worked perfectly.

[marcosmrjr]

I just did that and it still does not work. Any ideas?

[Ton Frederiks]

Can you share an example .ai file that has your problem?

[Kpart0623]

Sneaky Sneaky Adobe!

Roger,

Thank you for the information. Super helpful. Never new that part. Worked instantly for me after failing when trying everything else that has been suggested. 

Thanks again,

KP

[Marisa5C95]

This worked perfectly and is slightly less confusing than the solution above, thank youuuu!

[visualliz]

Holy crap was that annoying. I had 6 art boards to align to a global rulers grid but boy did it work! Thank you. Wish Illustrator was better with exporting and linked files like Photoshop.

[b87493049]

It's an oversight that could be fixed with some small bit of logic that rounds to poisitioning to the nearest point, allow for snapping to exact pixels with artboards, or providing a warning box upon export. Adobe have many avenues to mitigate this issue. I've exported dozens of display ads (which must be exact), only to have to go back and manually position each board exactly on a pixel. and automated "snap X and Y to precise pixels" tick box in the menu would have saved me hours of piddly reworking.

Now I know, but I do blame Adboe for letting something so mystical defy even the most seasoned of designers. I would go insane trying to figure out what I was doing wrong. That is a hallmark of a place in software that needs to be cleaned up.

[koksiroj]

I totally agree. I am a very picky exporter and impulsively have to change artboards' coordinates to whole numbers each time I make one. It's tiring, but I can't help it.

There are so many problems in this software that just feel like easy fixes. I know software development is hard, but c'mon. The money that Adobe has should at least put more attention to small fixes like these.

[DougKatz]

Very helpful. Can I ask, how does one align the artboard to the pixel grid? Is it a matter of enabling the artboard tool, setting alignment to the top left corner of the board, then clicking the snap to pixel toggle on the Control Panel? In other words, does one snap an artboard in the same way one snaps objects to the grid?

[Monika Gause]

DougKatz  schrieb

Very helpful. Can I ask, how does one align the artboard to the pixel grid? Is it a matter of enabling the artboard tool, setting alignment to the top left corner of the board, then clicking the snap to pixel toggle on the Control Panel?

Exactly like that. It might be more precise entering the values in the transform panel.

[DougKatz]

Thank you, Monika. I’m so stupid about web and mobile graphics… surprised I had it right. I also didn’t know the transform panel was even available with the artboard tool active. So an Illustrator artboard really is just another vector object in many ways, eh?

[DougKatz]

Whoops. Think I may have misunderstood you. I'm now guessing you meant the Artboard Options panel or even the Control panel, not the Transform panel that we use with objects on the artboard. Correct me if I'm wrong.

[Monika Gause]

DougKatz  schrieb

Whoops. Think I may have misunderstood you. I'm now guessing you meant the Artboard Options panel or even the Control panel, not the Transform panel that we use with objects on the artboard. Correct me if I'm wrong.

The control panel is the correct one. Artboard options work as well. Thank you.

[Ton Frederiks]

For a single artboard (and I wonder how and why you would mess it up to not align to the pixel grid), enter X:0 and Y:0 when you have double clicked the Artboard Tool.

For multiple artboards, you can simply use Rearrange All Artboards with a spacing that does not contain fractions.

[DougKatz]

Ton, are you saying you don't think a misalignment of the artboard in fact adversely affects the crispness of artwork on the web? Or are you wondering why someone would deliberately not align the artboard to the pixel grid?  In my case, I've never aligned the artboard because I've never given the pixel grid a thought. This is because my work is almost exclusively in print.

[Ton Frederiks]

Doug, Artboard XY coordinates that contain fractional pixel values will give anti aliasing problems (extra pixels).

I just wondered how a single artboard would not be aligned. If you create a new document the upper left corner of your artboard is always at X:0 and Y:0, so you have to do some deliberate action to move it to other coordinates.

With multiple artboards I can imagine that they have been shuffled around and do not have their coordinates aligned to whole pixels.

Rearrange Artboards will fix that.

[DougKatz]

That makes eminent sense, Ton. Now I understand your wondering how and why one would "mess up" the alignment of a single artboard. Thanks for the clarification. I'm now ready to tackle the web.

[Ton Frederiks]

There is another thing that's missing in this "solution to the extra pixel problem" thread.

If you change the export resolution to something else than 72 ppi, you may introduce extra unwanted pixels.

Using multiples of 72 ppi is the easiest way to avoid that.

[eikonoklastes]

https://forums.adobe.com/people/Ton+Frederiks  wrote

There is another thing that's missing in this "solution to the extra pixel problem" thread.

If you change the export resolution to something else than 72 ppi, you may introduce extra unwanted pixels.

Using multiples of 72 ppi is the easiest way to avoid that.

This is a good point, and another reason to use the Export for Screens dialog when uh... exporting for screens. Using that dialog will always match the pixel count of your artboard to the output file when exporting at 1x Scale (provided, of course, you're circumventing the extra pixel issue).

However, exporting at different resolutions or scales should only export a resized image, not an image with extra columns or rows of pixels, that are not an intended part of the artwork.