Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I have designed an icon (using the Mac app Sketch). They are 24x24 pixels and their size is 3 Kb.

But I've seen icons with the same resolution and size between 300-400 bytes. Why is this, and how can I make my icons smaller?

share|improve this question

migrated from ux.stackexchange.com Sep 15 '13 at 18:32

This question came from our site for user experience researchers and experts.

3 Answers 3

up vote 4 down vote accepted

Graphic size optimization is both an art and a science. Different kinds of images respond differently to different compression schemes and output formats. For photorealistic images jpeg is usually the best output format. Jpegs can have various amounts of compression applied, and some images can withstand much jpeg compression without obvious degradation and some images will look degraded with too much compression. Graphical images with limited colors can be greatly compressed into PNG-8 or GIF format with no or minimal degradation. Graphical images with many colors may require PNG-24 to get the necessary fidelity.

"Necessary fidelity" is subjective, you have to decide if the compressed image is good enough for your purposes. It's often a compromise, and sometimes an imperfect compressed version is a worthwhile tradeoff to achieve a certain size reduction.

It's really just trial and error - try different output formats and compression levels and see what the best compromise is.

Tools:

I still use Photoshop CS3's Output for web and devices feature to produce the compressed and optimized images. If you don't have such software you can do a search on graphic compression tools. There are probably decent tools available for free. Once you get such a tool you'll want to try various output and compression options to get to know how much compression you can live with and what output options work best for the image in question.

share|improve this answer

You might want to look into icon fonts. When a font is resized, it usually keeps that crispy, clear quality. This happens because a font is not a collection of images (i.e. an image per letter), but a collection of shapes. This shapes are made out of straight lines and defined curves, and, as such, they can be mathematically replicated at any size that pixels might allow. Images, on the other hand, are a collection of pixels arranged in a certain order. When resized, the pixels become more, or fewer, but they are usually not as clear as they could (or should) be.

When creating icons, I suggest using illustrator or any other program that allows you, not to draw pixels, but to define curves. Once that is done, you can export that icon as an svg, and, in time, create your icon font (if you're intending to use it in web; if not, the svg will suffice).

That being said, the clarity of any icon depends on the amount of pixels required to show that shape properly. So if that still doesn't work for you, you might want to redesign a simpler one.

share|improve this answer
1  
Hello EdGG! Thanks for your contribution and welcome to GDSE. Cuould you please elaborate a bit more on your answer? For example, by explaining what icon fonts are? This is because we'd like your answer to still be valuable even if the link you give breaks at a later time. Thanks and enjoy your stay here! –  Vincent Sep 16 '13 at 10:08

I have tried different graphic compression tools. Below is the software that I have used, the file size before compression, and the file size after compression:

  • imageOptim 4 kb -> 872 bytes
  • smush.it! 4 kb -> 891 bytes
  • photoshop 4 kb -> 2 kb
share|improve this answer
1  
How can you test compression on a file you haven't seen? I'm not 100% sure, but I think not all 4kb icons will compress the same, it depends on the icon and the settings chosen to arrive at an acceptable level of compression (for the human eye). –  Mr E. Upvoter Sep 16 '13 at 11:33
    
You should also try out TinyPNG tinypng.org –  CatalinM Sep 17 '13 at 8:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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