POOR PNG QUALITY - what am I doing wrong?

stoneraven · Postby **stoneraven** » Mon May 11, 2009 4:41 am

I have searched the archives but cannot find anything that helps so far...

The problem: I've created a logo that looks perfect if exported to a PNG at 300 dpi, but this is too big.

When I shrink it down to 110 x 110 pixels, the dpi automatically drops to 90 dpi and cannot be reset higher. Even at 90 dpi it should still look fine - but it does not - the circular edge of my logo is rough, and the text is almost unreadable.

I have seen many logos at 90 dpi that are much more complicated than mine - and they look amazing.

What could I be doing wrong?

I've tried exportiing a larger PNG, then sizing down, but this looks bad too.

I've tried making my background document the same size as the desired logo size (110 x 110 pixels) and snapping / aligning everything - but when exported to a png it looks terrible.

I have searched the Internet in so many ways but cannot find any tip that helps.

I must be doing something so obviously wrong... Any thoughts?

Thanks in advance.

Slow Dog · Postby **Slow Dog** » Mon May 11, 2009 7:43 pm

stoneraven wrote:I've tried making my background document the same size as the desired logo size (110 x 110 pixels) and snapping / aligning everything - but when exported to a png it looks terrible.

It doesn't look like you're doing anything wrong. What are you using to view your exported PNG? Things like smooth circular edges are achieved with alpha values (degrees of transparency) in the PNG, and will look awful if not supported in the viewing application (say, Microsoft Paint).

EarlyBlake · Postby **EarlyBlake** » Mon May 11, 2009 8:07 pm

I was wondering if a PNG format is going to do well under any MircoSoft application, since PNG is open source and MS tend to spike open source stuff.

Slow Dog · Postby **Slow Dog** » Mon May 11, 2009 9:52 pm

EarlyBlake wrote:MS tend to spike open source stuff.

That's just FUD spreading.

On my work system, PNGs are fine in Internet Explorer, Photo Editor, Picture and Fax Viewer. The thumbnail is smooth in Windows Explorer. It's just MS Paint that's rubbish, but it is the default PNG viewer.

stoneraven · Postby **stoneraven** » Mon May 11, 2009 11:25 pm

Thx for the comments so far, but I STILL NEED HELP please

I've looked at many PNGs in my various browsers and they all look great - only my logo looks terrible when small.

My logo is similar to a coin design in style - it's got several circular layers, text that is knocked out of black, and text that is curved along the the outer edge. Why does it look great at 300 x 300 pixels, but not at 110 x 110?

I have to solve this today - any suggestions as to where I might get help, even if I have to pay a bit?

Thanks!

Slow Dog · Postby **Slow Dog** » Tue May 12, 2009 12:19 am

stoneraven wrote:Why does it look great at 300 x 300 pixels, but not at 110 x 110?

There are seven times as many pixels? At the smaller size, there's not enough information left? Curved text that small is unlikely to render at all well.

When you say you "snap and align" everything, are you snapping and aligning all the elements to a pixel grid?
Look at my post here:
http://www.inkscapeforum.com/viewtopic.php?f=14&t=2854

Can you post your source svg file so we can see if there's anything that can be done?

aho · Postby **aho** » Tue May 12, 2009 5:11 am

Show us the SVG and the PNG.

It's a lot easier and faster this way.

John1923 · Postby **John1923** » Wed May 13, 2009 3:18 am

You want to change the density of the pixels to increase the quality.

change the units to cm then ramp up the dpi to get a small image with lots of small high quality pixels

john1923 · Postby **john1923** » Wed May 13, 2009 3:19 am

Why does it look great at 300 x 300 pixels, but not at 110 x 110?

Inkscape is keeping the size constant, less pixels in the same place

aho · Postby **aho** » Wed May 13, 2009 5:12 am

Ehm... the DPI of a PNG don't change anything on screen. Each pixel is one pixel and that's it.

Jaws · Postby **Jaws** » Wed May 13, 2009 7:07 am

I don't want to butt in here but is the OP talking about sending his logo to print?

Or is it possible there's a bitmap image that's part of the logo.

I can't say I've ever had a bad looking PNG from a pure Inkscape drawing.

As Aho said, post the SVG and PNG.

Cheers

stoneraven · Postby **stoneraven** » Wed May 13, 2009 9:16 am

Thx for the suggestions so far - I still haven't solved the problem though.

I've attached three files: 1) the source svg; 2) a png export at 110 x 110 pixels; and 3) a png export at 367 x 367 pixels

While I'm new to Inkscape and this kind of work, I've been able to make very small but sharp icons and buttons for my website, so I am confused by this...

Thanks again for all the help!

Postby **microUgly** » Wed May 13, 2009 10:17 am

I was going to post my suspicions earlier, but now you've posted an example my suspicions are confirmed.

There's no problem here.

Monitors have limited resolution and the effects you are identifying are a result of that. As detail becomes smaller, the effect of monitor resolution becomes more apparent.

The effect you described on the circle is called "stepping". It's more obvious on the smaller logo because the curve is smaller. But if you look carefully at the top portion of the large logo and you can see stepping their also.

Stepping is more visible obvious on an LCD than on CRT monitor. This is why MicroSoft introduced the "Cleartype" effect for it's fonts wich tricks the eye into making fonts look smoother instead of jagged.

stoneraven · Postby **stoneraven** » Wed May 13, 2009 10:24 am

I agree that the larger PNG is also showing signs of stepping...

But why can we see such fine detail in small photographs? (see attached)

If our monitors can display this level of detail as seen in the attached bee photograph - is there a way to achieve a sharper logo?

Slow Dog · Postby **Slow Dog** » Thu May 14, 2009 12:20 am

stoneraven wrote:If our monitors can display this level of detail as seen in the attached bee photograph - is there a way to achieve a sharper logo?

You're implying "Level of detail" = "Sharpness", and it ain't so. If you take a close look at the bee photo (using windows magnifier, say), you'll see the bee's hair isn't at all sharp. There's lots of fuzzy hairs that appear to be "detail" when viewed at a correct distance.

The other thing about the bee picture is that it's all low contrast - light coloured hairs against light background. Your logo, on the other hand, has black text on a white background; maximum contrast which accentuates the flaws.

aho · Postby **aho** » Thu May 14, 2009 1:59 am

>[...]maximum contrast which accentuates the flaws.

Well said.

Just take the small 110x110 image and zoom in to 800%. The "stroke" of the "fine print" don't even cover a whole pixel. Well, if you replace "www" with "WWW" and "com" with "COM" it would be legible at least.

eric · Postby **eric** » Fri Dec 24, 2010 8:27 pm

sorry for the date of this post, but i searched for similar problem and i found this thread, (not marked solved), then i put my contribution for other people..

the problem is the png exporter engine of inkscape, the antialiasing is verry hard..., and i not found how to set exporter's parameters to set lower antialias,or blur border with transparency lower than default.

... so one solution i have done, is to view directly the svg in another viewer than inkscape, try to drag and drop the svg file (inkscape use this type to save your work) directly in firefox (ver > 3) and your logo will display by the svg engine of firefox.. and see the difference... the text is more clear than inkscape himself.. use Ctrl+wheel mouse to zoom out or in, the quality stay excellent...

hope this help someone in hearth...

bye...

This is a read-only archive of the inkscapeforum.com site. You can search for info here or post new questions and comments at inkscape.org/forums

This is a read-only archive of the inkscapeforum.com site. This feature is no longer available.

InkscapeForum.com

POOR PNG QUALITY - what am I doing wrong?

POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Re: POOR PNG QUALITY - what am I doing wrong?

Who is online