3. PNG – 8 or 24 Bit for lossless Compression

Originally the Portable Network Graphics Format of the PNG Development Group was developed to meet the licensing issues of the GIF compression algorithm (the so called LZW compression) with a new, innovative file format. The license problem was resolved by 2004, but in the meantime PNG advanced to a flexible format, that can be applied for various scenarios: Photos, lossless compressed with PNG-24. And graphics, identical to GIF with PNG-8.

PNG does not support animations, but offers a feature that is even more important for modern, high quality graphics on the web: Transparency through alpha channels. Photoshop pros and illustrators know what’s going on: Alpha channels describe an image’s multilevel transparency. While GIF images can only have one color assigned as 100% transparent, these channels even allow half-translucent areas, and soft gradients into the page background.

PNG-24 vs. PNG-8

PNG-24 for photos and PNG-8 for graphics - the difference lies in the allocated memory for the colors. 24 bits are equal to three bytes for the three base colors red, green and blue, thus, each base color can be assigned one of 256 numbers. Multiplied with each other you get to 16.7 million possible colors.
With PNG-8 we only have 8 bits in total, that is 1 byte and equals to overall 256 different colors.

At first sight, PNG seems to completely replace the JPG and GIF format. And this is indeed true in the case PNG-8 vs. GIF, but the comparison to JPG is influenced by another variable: Because of their compression type JPG files may lose information, but they are in return many orders smaller that the lossless PNG-24 photos.


Example Image

Image Information




70 KB (640 x 425 px JPG with quality 75)

Acceptable JPG compression



350 KB (640 x 425 px PNG-24)

Way larger PNG-24 file with ignorable details remaining

4. SVG – Scalable without Quality Loss

With SVG, there’s a new format in town. While the JPG, GIF and PNG formats save each single pixel, the later describes the structure and outlook of the image through vectors, polygons, circles, ellipses and rectangles.

That already makes it clear, that it’s useless for photos, but opens new horizons for graphics and illustrations. Because SVG graphics are scalable: The pixel-independent description of geometrical shapes’ relations to each other really allow any output size: 100 x 100 or 2500 x 2500 pixels, it doesn't matter. Typefaces or fonts actually work in a similar fashion since they only contain the curves, the characters' outlines.


Example for an SVG converted photo

The technical features of the SVG format itself are no less impressive: PNG or JPG images, vectors, shapes, text, animations, color gradients, and even filter effects (lighting, shadows, blur) are packed into the (compressed) file. And even better: All browsers support these features in their current HTML5 compatible version. Let alone IE8 (IE9 if you consider SVG effects) and early smartphone browsers have their troubles, while the Internet Explorer at least can be fixed with a plug in, i.e. the Adobe SVG Viewer .

SVG is the format for a new generation of websites. It will not replace the lossy JPG photo format, but it guarantees superfine resolutions in the area of logos, graphics, cliparts and icons – flawless web design, that looks amazing on mobile devices with an extremely high pixel density.

Pixel Image vs. Vector Graphics

The advantage of scalable graphics is clear, if you hold a pixel image right next to its vector counterpart and zoom in a little. In the conventional raster image, single pixels will be stretched over multiple monitor pixels, because there is no underlying rule on how to add intermediate pixels and colors. The vector image on the other hand knows how the lines goe and provides smooth contours and lines, clean and always in highest resolution. With SVG you never have to worry about retina iPad versions of your illustrations.