4

I created a logo in Illustrator CC and after I 'Save for Web' using PNG-24 with a transparent background and put it in my website html there is a thin white stroke around the logo. This is definitely not a html problem but an issue with exporting with illustrator.

I definitely have not got a white border on the image in illustrator. It does not show up when I preview the image in Windows but does in my HTML. Im not using any CSS either.

Improve this question
2
  • Is your used page wider than the image? Then you would get a white border ...
    – Mensch
    Commented Nov 16, 2014 at 17:17
  • I had the same problem with a background that completely covered the artboard, both pixel-perfect. I tried the rest of the solutions, and the only thing that worked was to export it to a higher resolution and then resize it in Photoshop.
    – DanielBlazquez
    Commented Mar 31, 2020 at 9:59

4 Answers 4

Reset to default
3

My bet is that your artboard isn't aligned to the Illustrator pixel grid. Try going to the artboard tool:

Artboard Tool

Then in your toolbar, verify that your artboard's X, Y, Height, and Width are all whole pixel numbers (no decimals!).

Artboard Properties

Be sure to select a corner point and not the center. We want each edge of your artboard to land perfectly on the pixel grid.

If they were already whole pixel numbers, this probably won't make any difference, but if they were, change them to whole pixels, then double check that your artwork still fits ok, and then try Save for Web again.

Improve this answer
1
  • This was almost my solution. Rather than the artboard, my issue was the elements themselves. During resize some of them had gone from whole pixels to partial pixels. (Like a 200 x 200 turning into a 100.00 x 100.01). I'm not sure why it was adding extra partial pixels, but manually removing them fixed it.
    – user51095
    Commented Sep 17, 2015 at 14:29
1

This still make the artwork shift some times ive noticed when you use "align to pixel grid". I got it fixed by double clicking on the artboard. This will shift to the correct pixel, this is handy when you have a backdrop perfect matched to artboard size

Improve this answer
1
  • Welcome to GDSE. If you want to know more about the site, please see the help center. Keep contributing and enjoy the site!
    – Luciano
    Commented Mar 9, 2016 at 17:20
1

I had the same issue when saving as "PNG-8". You could try making sure you select preset "PNG-24" in the Save for Web dialogue box (top right). My problem was solved when I did this.

Improve this answer
1
  • Hi @Zemogle, welcome to GDSE and thanks for contributing. Although your answer is indeed a common root cause of white borders in PNGs the question specifically mentions using PNG-24.
    – PieBie ♦
    Commented Oct 25, 2016 at 6:54
0

I also had white strokes around the artwork in the exported PNGs while using File -> Export -> Export As..., the solution was to set the Anti-aliasing to Art Optimized instead of Type Optimized, see image.
enter image description here

After exporting, the white border completely disappeared and as a nice side-effect the light-colored gaps between objects were also fixed (that were close to each other, but not joined into one shape).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.