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.

[ephemeron]

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!

[Ton Frederiks]

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?

[busybear10]

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. 😕 

[Ton Frederiks]

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

[paolo.ferri101]

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!

[paolo.ferri101]

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

[Ton Frederiks]

"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.

[Barefoot22]

Alas, the problem persists for me even after following the steps outlined in this conversation.  

  I create 3 rectangles (2 px height, 100 px length) with only fill and no stroke.  When I zoom to max to view them using pixel preview they appear as they should with no bleeding (see the LEFT side of the attached image) but when I export for screens  & bring the png back in there is overlap/ bleeding (see the RIGHT side of the attached image).  

    I've set the reference points for all artwork & artboards (I have a few) to the top left and taken every step to ensure that everything in the project is pixel perfect including ensuring that all positions are in whole pixels (no fractions).  

  I'm using global rulers (not artboard rulers).

  As I'm programing LED props (each pixel is 1 LED) even 1 px difference becomes a very visible problem.  Thanks for any further ideas/ solutions to this unresolved issue.  

Regards, 
Jen

[Ton Frederiks]

Hi Jen, can you share an example Illustrator file? 

CCfolder file sharing, Dropbox, WeTransfer, Google....

[Barefoot22]

Hi Ton,  

  Sure.  Here is the ai file:  https://drive.google.com/file/d/1ajReDTOvGS8uOW6EAMooaMUJDuD1e6vm/view?usp=sharing

thanks,

Jen

[Ton Frederiks]

Thank you Jen,

I cannot reproduce the extra pixel, but there is something weird with the anti aliasing in your file. When I copy an object to a new file it works as expected.

I have to look into it a little more to hopefully find what is causing the problem.

[Barefoot22]

After a few more hours of testing I'm convinced that this is a bug to do with the new Larger Canvas Format launched in version 24.2 of June this year.  I can't reproduce the problem on a regular sized canvas whereas it works (fails) every time when using the larger canvas format. 

After 3 days of trying to find a solution, this has been a dead end for my project.  If I want to avoid the overlap/ bleeding between pixels I must use a regular sized canvas and yet a regular sized canvas isn't wide enough for my project. 

: (
Looks like I may switch over to photoshop to avoid this.  Hopefully something like artboards exist there...

thanks anyway Ton!  ; ) 
Jen

[Barefoot22]

ps.  I've posted this as a new topic here: https://community.adobe.com/t5/illustrator/large-canvas-fails-to-create-pixel-perfect-artwork-the-ex...

[Ton Frederiks]

Hi Jen,

I had not noticed the large canvas, but I think you are right, that can cause the problem.

Large canvas seems to use some kind of scaling trick and that could result in the anti aliasing you noticed.

So that's another thing to be aware of to avoid the additional pixel problem (aka white line fever).

(Yes, Photoshop has artboards too).

regards, 

Ton

[Barefoot22]

thanks again Ton! 

[Mem113]

Try "Rearrange All Artboards".

After trying all the solutions regarding decimal removal, positioning artboard on 0x and 0y and changing to global rulers, I still encountered with the same problem. What fixed it for me was using "Rearrange All Artboards" button on Artboards window. Eventhough Illustrator placed the artboards on positions with decimals, I no longer have extra 1 pixel.

[bysea]

This IS the fix that worked for me too as the others used to work, but no longer. Thanks for posting! So much time wasted on this stupid "bug". Some will say it's not a bug, but if the only thing that fixes it is the above, then something else has gone awry.

[Edison5FD5]

Yes
This will work on single artboard, but multi artboard it will not work this formula

Answer:
Step 1: Creat New Artboard
Step 2: In top left there have option (Recent, Web, print, etc..)

dont make in Recent. you have to choose correct one Web or Print
after you can do multi Artboard in that then export the file. It will work 100%

[Monika Gause]

Yes
This will work on single artboard, but multi artboard it will not work this formula

By @Edison5FD5

And why will that not work? Setting the top left corner to non-decimal values will of course work. The document unit has to be pixels, naturally.

[Edison5FD5]

Actually that is glitch. @Monika Gause 

[Monika Gause]

Says who?

[Edison5FD5]

Yes
This will work on single artboard, but multi artboard it will not work this formula

Answer:
Step 1: Creat New Artboard
Step 2: In top left there have option (Recent, Web, print, etc..)

dont make in Recent. you have to choose correct one Web or Print
after you can do multi Artboard in that then export the file. It will work 100%

[JoseWela]

what worked for me, independently from setting the rulers to global or relative to the artboard, was just aligning the artboards to a round number, so in the x and y position of the artboard, if you see something like "X: 1000.375px. Y: 3712.571px" delete the decimals and that's it. Or use "export selection" which somehow always avoids the pixel problem, but won't let you export a batch of artboards...

[Ton Frederiks]

Export selection can also give additional pixels if the dimension of the selection contain fractional numbers.

Artboard rulers can also give additional pixels. Even if the Artboard looks aligned with Artboard Rulers, it can be misaligned when viewed with Global Rulers.

[generalbatzorig]

This is something I didn't know. I wonder if Indesign has the same issue as Illustrator. Once you send the Indesign file to printers, they will export it to PDF in order to make printing plates. Then the images get blurry because they are not aligned to pixel grid and the exporting process resamples images to a new document. I personally think the same thing happens at 300dpi level although it is much subtler to notice than exporting to web in Illustrator. But I wonder what your thoughts on this or if you have noticed anything similar in Indesign.