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.

  • 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 Apr 6 '17 at 9:12
  • 1
    See my answer to Exporting from SVG to PNG with AI – Cai Apr 6 '17 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 Apr 6 '17 at 9:22
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
  • 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 Apr 6 '17 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! – Lucian Apr 6 '17 at 9:24
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

  • Quite polite and awesome way of doing it. Thanks. I will try with few icons now. – xangr Apr 6 '17 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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