14 Replies Latest reply on Jun 26, 2018 1:28 AM by eikonoklastes

    The solution to the extra pixel problem

    eikonoklastes Level 4

      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.

        • 1. Re: The solution to the extra pixel problem
          srishtib8795206 Adobe Employee

          Hi eikonoklastes,

           

          Thanks for sharing this.

           

          Regards

          Srishti

          1 person found this helpful
          • 2. Re: The solution to the extra pixel problem
            BGBenevolent Level 1

            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.

            • 3. Re: The solution to the extra pixel problem
              DougKatz Level 2

              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?

              • 4. Re: The solution to the extra pixel problem
                Monika Gause Adobe Community Professional & MVP

                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.

                1 person found this helpful
                • 5. Re: The solution to the extra pixel problem
                  DougKatz Level 2

                  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?

                  • 6. Re: The solution to the extra pixel problem
                    DougKatz Level 2

                    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.

                    • 7. Re: The solution to the extra pixel problem
                      Ton Frederiks Adobe Community Professional

                      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.

                      2 people found this helpful
                      • 8. Re: The solution to the extra pixel problem
                        Monika Gause Adobe Community Professional & MVP

                        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.

                        • 9. Re: The solution to the extra pixel problem
                          DougKatz Level 2

                          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.

                          • 10. Re: The solution to the extra pixel problem
                            Ton Frederiks Adobe Community Professional

                            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.

                            1 person found this helpful
                            • 11. Re: The solution to the extra pixel problem
                              DougKatz Level 2

                              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.

                              • 12. Re: The solution to the extra pixel problem
                                Ton Frederiks Adobe Community Professional

                                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.

                                2 people found this helpful
                                • 13. Re: The solution to the extra pixel problem
                                  eikonoklastes Level 4

                                  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.

                                  1 person found this helpful
                                  • 14. Re: The solution to the extra pixel problem
                                    eikonoklastes Level 4

                                    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.

                                    1 person found this helpful