Skip to main content
M
MattManMedia
Participant
December 21, 2017
Answered

Why is my PNG logo not as great as my SVG? Can I make the PNG look perfect?

  • December 21, 2017
  • 3 replies
  • 6751 views

So as I have mentioned I'm curious of the best method for exporting my logos in Illustrator I have continuously run into this issue where my logo becomes blurry/pixelated. The client I'm working with tells me when he views the logo (PNG) on his website it becomes like the left image.

The left image:

(width = 363, height = 450)

PNG exported through Save for Web, PNG24, 100% image size

Doc. Raster settings: RGB, 300 ppi, transparent background

The right a good old fashion SVG. Clear as day when placed on a web page.

So the question is:

1)Why are my PNG exports not coming through as clear as the image actually is?

2) Is there a main size that most graphic designers generally use when exporting a logo and does that sizing matter in why I'm having the issue I'm having?

Please help...

This topic has been closed for replies.
Correct answer Mylenium

There's nothing wrong. You simply need to understand the differences between dynamically rasterized vector graphics and pixel images. The PNG is just fine when exported at the native size. If you want a different look, export it at larger size/ higher DPI and scale it down so the interpolation may produce a more favorable pixel distribution, but even so - it's just an illusion and doesn't change the facts.

Mylenium

3 replies

Kris Hunt
Kris Hunt
Legend
December 21, 2017

If you or the client is using a high resolution monitor (like a Apple Retina display), then there will be a visible difference between a 1X bitmap image and a SVG. If not, there won't be. What I often do is output the bitmap logo @2X and use CSS to display it at 1X size. That way it looks as good as a SVG. The only downside is the file size is unnecessarily larger for people viewing it on a SD display, but for a logo, the size difference is negligible.

T
Test Screen Name
Legend
December 21, 2017

And if they want them without specifying a size explain this does not work. Or consider sending an SVG.

Mylenium
MyleniumCorrect answer
Legend
December 21, 2017

There's nothing wrong. You simply need to understand the differences between dynamically rasterized vector graphics and pixel images. The PNG is just fine when exported at the native size. If you want a different look, export it at larger size/ higher DPI and scale it down so the interpolation may produce a more favorable pixel distribution, but even so - it's just an illusion and doesn't change the facts.

Mylenium

M
MattManMediaAuthor
Participant
December 21, 2017

So is it more of an issue with the viewing medium. So increasing the size should help with this issue? I placed the image on a website as is. Essentially shouldn't that make the image its "default (100%)" size? Thus, creating a clear as day image, the same as the SVG? I think I may be missing something because when I created my own logo I intentionally made it very large for "scalability" and other reasons, that logo didn't have an issue with blur, but I don't feel like I should be providing clients with a 4000 x 4000 px image. Sorry, can you tell me in a little more detail I have had this issue several times.

With a web export, what is the standard size I should create a logo? I know that is quite a broad question, as many things can vary that number, nonetheless, a ballpark number for a website used only logo?

Thanks in advance.

T
Test Screen Name
Legend
December 21, 2017

The size you should create it is the size that will be used to display it. You must know this size. Web images are not generic things to use at any size, they are only for one size. sometimes you need to make a set.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices