What is the best way to export a logo for web?

[benucreative]

Hi,

I have a logo I created in AI with a clipping mask. When exporting as a png to preserve transparency, I noticed that the edges appeared blurry, even at 100%. As if there was no anti-aliasing. Section of logo for reference below:

Process was:

File > Export As > 300 ppi (Art Optimized) transparent background

Additional information and methods I tried:

1. if I go to view > pixel preview, the preview is very blurry.

2. if I export as svg, the color versions with a gradient and clipping mask are distorted (logo isn't even the same shape).

3. file > export for screens produced the same result as the png export

4. file > export > save for web (PNG-24, art optimized) produced an even blurrier result

After looking around the forum I discovered that the slightly blurry edges might be normal and it may be the size that I have to adjust. However, the logo needs to be used across a variety of web applications and sizes. It seems incredibly cumbersome to export the exact size for every single application...Still, the logo appears blurry online - could this be due to being compressed on the website?

Any tips and best practices would be helpful. I would just like to know if I'm on the right track or missing something completely.

Thanks!

[Scott Falkner]

PPI is irrelevant. What maters is the size in pixels. Illustrator has a unit it called pixels, but those aren’t pixels. Pixels have no size. If I tell Illustrator to make something 500 pixels tall then export it at 300 ppi it will not be 500 pixels tall. Illustrator’s pixels are actually points, or 1/72 inch. If I export at 72 ppi it will be 500 pixels tall but at 300 ppi it will be 2083 pixels tall because Illustrator will render my 500 point graphic at 300 pixels per inch.

So ideally you would prepare the artwork at actual size for 72 ppi rasterizing. This means if you want a 500 pixel image make it 500 pixels or 500 points and export at 72ppi. Using Save for Web or Export for screens save your artwork at 100% using 72 ppi.

[benucreative]

Yes I noticed that, knowing they're 1/72 of an inch is helpful. Thanks! It seems like you'd be exporting forever though if you had to export at the exact dimensions for every.single.application it would be used for...or is it like what Michelle said and you export it at the largest size and scale it down? And sometimes the exact dimensions aren't readily found...so then is it just trial and error? Doesn't seem very efficient...

[mglush · Accepted solution]

Hi!

I have a question for you--are you viewing your png at actual size or are you zooming in to look at it?

I used the Save for Web function under Export and exported as a png-24 (see below). At the size I created it, it is sharp, but if you zoom in to see it it does have a blurry edge. Remember, when you save for the web you are moving from a  tack sharp line to pixels, so sharp is a relative term!

Using the Save for Web option, you either have to create your art at size, or make it large enough for the largest size you will use it, and then you can shrink it for everything smaller. You should never scale it up, because then you will have a problem with blurriness.

Michelle

[benucreative]

Hi Michelle,

That's helpful thanks. The unfortunate thing is that it is blurry even at the exact size. The logo itself is 2100 x 2500 so it's definitely not getting scaled up. Yours looks sharp (my image is a snip which is partially why it's so blurry, but even so, the logo is still blurry). The problem is that it's blurry everywhere!

[mglush]

I was just wondering -- did you use the Save for Web Legacy option under Export? What were your settings?

[benucreative]

Yes, I tried that. Settings are in my original post. Number 4

[mglush]

Are you familiar with Photoshop? I was wondering what the results would be if you copied and pasted your illustrator file into Photoshop and exported it out of Photoshop as a PNG-24 with transparency. Can you try that and see if it comes out better?

Michelle

[benucreative]

Hi Michelle,

When I copy and paste it (as pixels or as a smart object) it's still blurry around the edges. Similar to how it looks in pixel preview mode in AI. I didn't think it was worth exporting at that point?

[benucreative]

Nevermind! Figured out it has to do with the monitor because we looked at it online on several different computers and it was ok after all. Thank you all for your help!

[Monika Gause]

shieldsarts  schrieb

Hi Michelle,

That's helpful thanks. The unfortunate thing is that it is blurry even at the exact size.

Can't see any blurriness in your screenshot.

[Nancy OShea]

The best way is to export as SVG.  Scalable Vector Graphics have a smaller file size, better image quality and can be re-scaled to any size (up or down) while preserving crisp details.  You cannot do that with raster images  JPG or PNG  without sacrificing quality.  

SVG is an XML based code that can be  enhanced in any code editor like Dreamweaver or Brackets to add text, links and even CSS animations.  SVG is supported by all modern browsers  and is perfect for icons, logos, info graphics and responsive image maps.

SVG: Scalable Vector Graphics | MDN

[Monika Gause]

https://forums.adobe.com/people/Nancy+OShea  schrieb

The best way is to export as SVG. 

That would depend on the nature of the gradient.

It doesn't really look like a linear gradient in that screenshot.

[benucreative]

Correct Monika, it's a radial gradient filling a square that then got clipped to the logo's shape. Is that why an svg export wouldn't work well for this type of logo?

[benucreative]

I noticed svg retained the crispness, but like I mentioned in my original post, the color version of the logo became distorted so it wasn't even the same artwork (I'm guessing it has to do with the gradient or the clipping mask). These were the settings I used.

[Nancy OShea]

Radial and linear gradients are indeed supported by the SVG code specs.  However Illustrator's interpretation of these specs may be off. 

Gradients in SVG - SVG: Scalable Vector Graphics | MDN

[Lisa23931531txcq]

Hi Nancy, the SVG looks great to me when I do it in terms of quality. That said, it seems to add two small 'flicks' onto the end of my logo. How can I ensure it exports as it should eg. as it looks in ai?

[Monika Gause]

Input a higher Decimal.

And please show a screenshot of the "flicks". Just so everyone is one the same page of what you mean.

[Abambo]

It's been a while and the question is answered so only one bit of information:

shieldsarts  wrote

When exporting as a png to preserve transparency, I noticed that the edges appeared blurry, even at 100%. As if there was no anti-aliasing.

Antialiasing makes the edges more or less blurry. The optical effect is that the lines seam to be sharper... For getting the same effect without AA, you would need an enormous resolution.

[Nancy OShea]

Abambo  wrote

...you would need an enormous resolution.

And excessive bandwidth.   By comparison, SVG carries very little bandwidth.

[Abambo]

https://forums.adobe.com/people/Nancy+OShea  wrote

   wrote

...you would need an enormous resolution.

And excessive bandwidth.   By comparison, SVG carries very little bandwidth.

...and they scale quite good regardless of the screens resolution.