• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
11

The solution to the extra pixel problem

Enthusiast ,
Aug 03, 2017 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

34.4K

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
community guidelines
Adobe
Adobe Employee ,
Aug 07, 2017 Aug 07, 2017

Copy link to clipboard

Copied

Hi eikonoklastes,

Thanks for sharing this.

Regards

Srishti

Votes

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
community guidelines
New Here ,
Jun 03, 2018 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.

Votes

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
community guidelines
Enthusiast ,
Jun 26, 2018 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.

Votes

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
community guidelines
Explorer ,
Oct 02, 2018 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.

Votes

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
community guidelines
Community Expert ,
Oct 02, 2018 Oct 02, 2018

Copy link to clipboard

Copied

Roger,

that's a very good tip!

I have not seen it mentioned elsewhere.

Thanks,

Ton

Votes

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
community guidelines
Explorer ,
Apr 17, 2020 Apr 17, 2020

Copy link to clipboard

Copied

Wow, thanks very much, this worked perfectly.

Votes

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
community guidelines
Explorer ,
May 09, 2020 May 09, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
May 09, 2020 May 09, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
New Here ,
Oct 23, 2020 Oct 23, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
New Here ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

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

Votes

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
community guidelines
New Here ,
Jul 16, 2021 Jul 16, 2021

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
New Here ,
Oct 02, 2020 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.

Votes

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
community guidelines
Community Beginner ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Engaged ,
Jun 03, 2018 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?

Votes

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
community guidelines
Community Expert ,
Jun 03, 2018 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.

Votes

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
community guidelines
Engaged ,
Jun 03, 2018 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?

Votes

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
community guidelines
Engaged ,
Jun 03, 2018 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.

Votes

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
community guidelines
Community Expert ,
Jun 03, 2018 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.

Votes

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
community guidelines
Community Expert ,
Jun 03, 2018 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.

Votes

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
community guidelines
Engaged ,
Jun 03, 2018 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.

Votes

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
community guidelines
Community Expert ,
Jun 03, 2018 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.

Votes

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
community guidelines
Engaged ,
Jun 03, 2018 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.

Votes

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
community guidelines
Community Expert ,
Jun 03, 2018 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.

Votes

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
community guidelines
Enthusiast ,
Jun 26, 2018 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.

Votes

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
community guidelines