: How can I make my icons smaller in file size? 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

@Shakeerah625

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

Vote Up Vote Down

@Vandalay110

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.

Vote Up Vote Down

@RJPawlick971

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.

Vote Up Vote Down