Icojoy - stock icons shop, article 'Vector, raster and pixelate icons'

Login

Vector icons

Raster and pixel icons

Main formats of raster and pixel icons:

Icons for site

Icons for software

For polygraphy

For use in animation

2007-08-01 Category: About icons

Now we will try to look from technical view different formats of icons, and which formats are better for different districts.
This article is not recomendation for choosing specific format, because each case may be exclusion from rules.

Icons are the images which have standart sizes (16х16, 24х24, 32х32, 48х48, 128х128 and others) and they may be with transparent or without it.

There are 3 forms of icons:

Vector (pic. 1a)
Raster (pic. 1b)
Pixel (pic. 1c).

Pic. 1. Example of vector (a), raster (b), and pixel (c) icon

As a rule these are sources files (the most videspread formats of files: AI, CDR, EPS, SWF, FLA, SVG) ) because they may be converted in rasters icons.

Lets stop on usual differences:

Vector icons may be increased/decreased up to any sizes (but if they are smaller than 20x20 it would be degraded )
Only in few places you can use vector icons. Becouse they are sources
If you don't know how to convert you vector icons to raster format, you need a person who can make it
As usual, vector icons look more smoother, more "drawed" than raster and pixel icons.

Perhaps they don't have clear borders. They may be in the same formats of files, in identical sizes. But there are general things, from which you should sort your icons to pixel or raster and for different appliance these things could play main role — that's why we divided it on 2 types.

As usual pixel icons have transparency just on 1 colour (RGB)
Raster icons — with Alpha-transparency (RGBA)
Raster icons look more realistic, and pixel icons especially drawn sharp, roughly and for this action as minimal 3 reasons:

This is the ancient type of icons: they were drawn even in times of few colours in palette (that's why you can see each pixel)
It's difficulty to make realistic antialiasing with size 16x16
To make clean this single colour of transparency, there is no way to make antialiasing over edge of image

Now pixel icons are drawn as usual for sizes 16x16+. Or just as a parody on old times.

Pic. 2. Examples of raster and pixel icons

a. Icon with Alpha transparency (RGBA) in file
b. Icon (RGBA), blend on background
с. Icon (RGBA) is shown with zoom - you can see that, pixels over edge (transparented pixels), Iook as they blended with layer, making
soft gradient (antialiasing)
d. Icon with one colour for transparency - as it shown in file
e. Icon with one colour for transparency, blend on background
f. Icon with one colour for transparency, it is shown with zoom, how to lay it on layer — you can see that pixels don't blend with layer and in result it is sharp, roughly edge.

ICO. Windows icons format. They could have one icon in different sizes and different colour themes in one file:

Important:

ICNS. Macintosh icons format. Also could have one icon in different sizes and different colour themes in one file:

Important:

PNG. Supporting of RGB\RGBA image
BMP. Supporting of RGB image
JPG. Supporting of RGB image with compression, It means that there is no transparency at all
GIF. Palette with 256 colours, including one colour for transparency
TIFF. Support images almost any format, any color themes (RGB, RGBA, CMYK e.t.c.), transparency and layers (optional). Can be used for polygraphy or as source
PSD. Absolutely any format of (bitmap) image, including layers. It's source-file
RSC, RSRC. Sources of icons for Macintosh, can include few icons at the same time.

Important: formats TIFF, PSD and RSC as real are sources and it is hard to include it to software or web without convertation

1. If you designer and you will work with icons in graphic editor, so there are many types of icons match for you ( if you need transparency, so you should select PNG or PSD files)
2. For work with icons directly in web, you should select GIF, JPG or PNG, but remeber, today there are only few browsers, which show transparency in PNG files correctly. So for quick and easy use in web optimal formats are GIF (with transparency) and JPG (without transparency).

1. First of all this is your OS's format: ICO for Windows and ICNS for Mac Os
2. Next usefull format is PNG, but not all compilers support PNG files with transparency. So, in start, you should have consultation with programmers — could they use this format or not
3. If those formats didn't match, perhaps, BMP with one color for transparency (it's means what all "transparented" pixels filled with one color (usually it's pure violet, R=255, G=0, B=255, because it's the most rarely color) is what you looking for.

1. If you search vector icon, so there is much depend on graphic programm, in which you will make up your composition (because convertation between different vector formats could be very problematic). For example, if you work with software by COREL, so you prefer files in CDR format, if software by Adobe or another company, you should use AI or EPS formats
2. If you need bitmap icon, so the most usefull formats are TIFF and PSD , and most useless are ICO and ICNS formats (you'll need special software to open it).

Any types (vector formats SWF and FLA are ready to use in Adobe Flash).

Remind, what all of these rules belong for modern software, OS (Windows, Mac OS), browser , so, if you will use older software or OS, you should see information about compatibility specifical for your software. Sincerely hope that this article was useful for you.

In writing this text is used material from www.axialis.com

www.icojoy.com | Zhebrakov Andrew (Andy-S)

Comments (5)

monochrome

recomended, optional