0

I have a vector file which contains many objects. One of them is attached below. The top is original, crystal clear/pixel perfect. But I want lower size (dimensions not by filesize). Original images are 64x64 and all PNGs originally are pixel-perfect.

But whenever I export smaller objects its always blurry/fuzzy/not sharp. I get this result with all kinds of objects and files. How they export this vectors with crystal clear look?

Sample:

Sample

The first one is from original developer which exported all vectors as 64x64. The second one is mine and exported as PNG from the same vector file around 20x20/24x24.

I created 72dpi@24x24 and 72dpi@20x20 even 72dpi@16x16. Whatever I do I always get that unclear fuzzy/blurry image.

Improve this question
3
  • 3
    You're exporting to small pixel sizes, that combined with aliasing gives you the blur, not a lot you can do about it really... which is why you generally need to design small icons at their intended size (i.e. why you will see icons with different 16x16 and 32x32 versions)
    – Cai
    Commented Apr 6, 2017 at 9:12
  • 1
    See my answer to Exporting from SVG to PNG with AI
    – Cai
    Commented Apr 6, 2017 at 9:14
  • I got it right now. I will try to make a different version to fit. Thanks. I will also evaluate SVG option.
    – xangr
    Commented Apr 6, 2017 at 9:22

2 Answers 2

Reset to default
4

One method you could use is to employ Photoshop to rescale the 64 x 64 pixel icon. If you use the "bicubic sharper" method when resampling, the results will look just a touch sharper and more detail is preserved especially where there are thin lines. Of course the difference is slight, but it might be enough.

Example of "bicubic sharper" method

Improve this answer
1
  • Quite polite and awesome way of doing it. Thanks. I will try with few icons now.
    – xangr
    Commented Apr 6, 2017 at 12:10
1

Things you can try

  • use the 64x64 PNG version and scale it down in your CSS code
  • if generating smaller PNGs, play with the 'Art/Type Optimized' setting in the 'Save for Web' dialog
  • switch to using SVG icons, which is a vector format and could display better
Improve this answer
2
  • I am wondering that browser support for SVG. I will dig into this. SVG maybe the solution or I will create different version as @Cai stated.
    – xangr
    Commented Apr 6, 2017 at 9:22
  • Yeah, its one of these options. Or make the vector size exactly as the indended PNG size. See what works best. If you feel this answers your question try clicking the check icon and the up arrow next to my answer above. Thanks!
    – lmlmlm
    Commented Apr 6, 2017 at 9:24

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.