Article Surfing Archive

It is true! In graphics optimization, seen as a part of website optimization, the smallest is the best. Of course, the element in question should still serve its purpose of being the expression of an idea. Furthermore, it should be understandable, clear, suggestive and good-looking. Let's see together which could be the right choices (in terms of web graphics optimization) when we decide what type of graphics we’ll use on a website.

What kinds of web graphics are present on the Internet?

When it comes to their origin, there are two types of graphic digital files: vector graphics (created with software tools like Corel DrawTM , FreehandTM etc.) and raster graphics (photographs, 3D renders and any other type of bitmap files). Most of the web sites on the World Wide Web hold as graphic elements bitmap-type graphics in three different formats: GIF (standing for Graphics Interchange Format), JPEG (Joint Photographic Experts Group) and PNG (Portable Network Graphics). All these 3 types use different compression algoritms to considerably reduce the size of the graphic file. Because PNG is not so popular, I hope that you will forgive me if I stick to GIF and JEG in my article. Probably you already know a lot about these (or you can browse the web and find plenty of information) so I’ll get directly to the choices we must make when it comes to design our web site.

How many colors should we use for our web graphics?

What type of bitmap files will hold our web graphics?

Some specialists say that we should always go with JPEG, because it supports 16 milion colors and produces quite small files. Well, this is not entirely true, I think. I can only tell you for sure that we don’t have to go with the same type all over our website. How’s that? Let’s see!

When should we go with GIF?

• for graphics with fewer colors: web logos, cartoon-like drawings and line-art (pure black and white) drawings; whenever it is OK to use for our graphics the 256 colors pallette (or even the 216 “safe” colors pallette)
• for grayscale pictures with less halftones (with big contrast)
• for graphics with smaller screen size (even if with many colors) which rely on details; GIF format compression is lossless and keeps sharp contours and clear definition between areas filled with different colors;
• when we need the “Transparency” option of GIF Format, e.g. when a graphic should have a non-rectangular shape and/or we want to discard its background
• whenever an image saved in GIF format is smaller than one saved as JPEG, both images being at a comparable level of quality when displayed
• generally, for vector-generated graphics (unless they have blending and/or gradient fills)

When to use JPEG format?

• for color images with 16 milion colors and many halftones (photographs, 3D render output files, any other images with continuous-tones)
• for grayscale images which rely on subtle halftones
• for graphics/images with big screen size where colors and shades are more important than contours, outlines and boundaries
• whenever an image saved in JPEG format is smaller than one saved as GIF, both images being at a comparable level of quality when displayed
• generally, for photographs and similar images

Which are the inconveniences of each format?

From my point of view, these are the main limitations for GIF and for JPEG formats:

For GIF: limited number of colors (it can show 16 milion colors, but only in dithered mode, which I do not recommend)

For JPEG: compression is done by reducing quality of the graphics (loss of sharpness, “hair filaments”, “pixelate” areas etc.)

Whatever format you choose, when it comes to graphics optimization as a part of website optimization, the SMALLEST is the BEST! Beside the format choice, keep in mind some tips when you create and optimize your web graphics:

1. Minimize the screen size of your graphics to the point where it is still clear and suggestive.
2. Try and try again saving a graphic in one of the two formats, at different quality levels (for JPEG) and different number of colors (for GIF). Do this until you find the best size / quality ratio that fits your needs.
3. Use vector graphics software and limit the number of colors when you create the non-photographic graphics for your website.
4. Put emphasis on shape, contour, silhouette and contrast when creating / processing your graphics.
5. Choose carefully the resizing method in your image processor when you change the size / resolution of your graphics - “anti-alias” is not always the best choice.

I hope that this article will help you in your work and always keep in mind that, when it comes to graphics optimization and website optimization, the smallest is the best - as long as it serves its purpose.

Decebal (Dudi) Scraba
http://ewolwe.com/