Highlighted

The solution to the extra pixel problem

Enthusiast ,
Aug 03, 2017

Copy link to clipboard

Copied

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.

Views

9.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

The solution to the extra pixel problem

Enthusiast ,
Aug 03, 2017

Copy link to clipboard

Copied

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.

Views

9.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 03, 2017 4
Adobe Employee ,
Aug 07, 2017

Copy link to clipboard

Copied

Hi eikonoklastes,

Thanks for sharing this.

Regards

Srishti

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2017 1
New Here ,
Jun 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2018 1
Enthusiast ,
Jun 26, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2018 0
Explorer ,
Oct 02, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2018 4
Adobe Community Professional ,
Oct 02, 2018

Copy link to clipboard

Copied

Roger,

that's a very good tip!

I have not seen it mentioned elsewhere.

Thanks,

Ton

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2018 0
Explorer ,
Apr 17, 2020

Copy link to clipboard

Copied

Wow, thanks very much, this worked perfectly.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2020 0
Explorer ,
May 09, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2020 0
Adobe Community Professional ,
May 09, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 09, 2020 0
New Here ,
Oct 02, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2020 0
Engaged ,
Jun 03, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2018 0
Adobe Community Professional ,
Jun 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2018 0
Engaged ,
Jun 03, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2018 0
Engaged ,
Jun 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2018 0
Adobe Community Professional ,
Jun 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2018 0
Adobe Community Professional ,
Jun 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2018 2
Engaged ,
Jun 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2018 0
Adobe Community Professional ,
Jun 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2018 0
Engaged ,
Jun 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2018 0
Adobe Community Professional ,
Jun 03, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 03, 2018 1
Enthusiast ,
Jun 26, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 26, 2018 0
New Here ,
Dec 20, 2018

Copy link to clipboard

Copied

I am running CS6 on a Mac as part of the Adobe Master Collection.

I have made sure the artboard is set to 0.

I have also changed to global rulers.

I've also quit Illustrator and reset its preferences.

Nothing works!

I expect better from purchasing the CS3 & CS6 Master Collection!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0
Adobe Community Professional ,
Dec 20, 2018

Copy link to clipboard

Copied

Please share an example using dropbox , wetransfer ot other sharing method.

And explain what does not work, what and how do you export as what and at what resolution?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0
Community Beginner ,
Oct 31, 2019

Copy link to clipboard

Copied

I've made sure all of my artboards are set at whole coordinates...now I'm getting proper pixel sizes on 6/8 of my images. Using export for screens, 1x png. 😕 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2019 0
Adobe Community Professional ,
Oct 31, 2019

Copy link to clipboard

Copied

Please share an example using dropbox , wetransfer or other sharing method like CC filesharing.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2019 0
New Here ,
Apr 07, 2020

Copy link to clipboard

Copied

hi,
is this the only way to sort this out? I am seeing sometimes more than one pixel added. I check the size with the info tool and when I export I see one pixel or more...thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 07, 2020 0
New Here ,
Apr 17, 2020

Copy link to clipboard

Copied

Guys,

I am getting a bit frustrated: I have 100 Icons to export, how is it possible? 
Illustrator is one of the top softwares, why does it add a pixel when I didn't draw it? 

I would need a solution that wouldn't take a ton of time, considering the work I have to do....

Also I would suggest Adobe to make things a bit more intuitive.... If I don't draw the pixel, I get a pixel added and I need to find a solution, which doesn't seem fast and smooth...

I would suggest the approach: "if we don't draw an extra pixel, I shouldn't need to use time to understand why I am getting outcomes that I haven't produced..." that would simplify things a lot...

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2020 0
Adobe Community Professional ,
Apr 17, 2020

Copy link to clipboard

Copied

"Illustrator is one of the top softwares, why does it add a pixel when I didn't draw it?"

Illustrator is, unlike Photoshop that is pixel based, a vector editing program that does not draw pixels.

It can generate pixels when you export to an image format.

If you don't want extra pixels to be generated, you need to:

Work with pixels or points as the unit.

Make sure you don't use fractional pixel values in your artboards and their XY position.

Export artboards at 72 ppi or multiples of 72 ppi.

If you have 100 Icons, make sure that each icon has its own artboard and choose Rearrange all Artboards to align them to whole pixel coordinates.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2020 0