The Smallest Is The Best!.. As Long As It Serves I

The Smallest Is The Best!.. As Long As It Serves Its Purpose.

by: Decebal Scraba

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 goodlooking. 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 bitmaptype 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, cartoonlike drawings and lineart (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 nonrectangular 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 vectorgenerated 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 continuoustones)

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:

Minimize the screen size of your graphics to the point where it is still clear and suggestive.

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.

Use vector graphics software and limit the number of colors when you create the nonphotographic graphics for your website.

Put emphasis on shape, contour, silhouette and contrast when creating / processing your graphics.

Choose carefully the resizing method in your image processor when you change the size / resolution of your graphics “antialias” 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/

About The Author

Copyright 2005 Decebal (Dudi) Scraba

Graphic Designer since 1994, Web Designer and Website Optimization Specialist

http://www.ewolwe.com/

[email protected]

This article was posted on January 09

by Decebal Scraba

Computer Graphics: They’re Not All The Same

Computer Graphics: They’re Not All The Same

by: Mandar

Graphic images on your computer come in two different forms, raster images and vector images. Raster images are made by programs such as Photoshop and Corel Photopaint. Vector images are produced by Adobe Illustrator, Freehand, and CorelDraw. While the results from these different programs can look similar, the ways in which they are made are very different.

Raster images are made up of millions of individual squares, or pixels, of various colors. The more pixels you have, the better the image will look. The number of pixels, or resolution, is usually expressed in dots per inch (dpi). Images on the Web are shown at 72 dpi. A highresolution image would run 300 dpi or higher. Some types of printing can get into the 1600 dpi range. Much like a mosaic, a raster image can look smooth from a distance but as you zoom in closer you can see the individual pixels.

A vector image is drawn from mathematical formulas for lines and curves and is redrawn each time you zoom in for a closer look. The quality of the image stays the same regardless of the level of magnification. Vector files, since they are formulas instead of information on millions of individual pixels, tend to use less memory than raster files.

The edge of a circle, rendered as a raster image, may look smooth initially, but eventually as you zoom in you will see a jagged stairstep edge of the individual square pixels that make up the image. A lower resolution image will look jagged or pixellated much sooner than a high resolution image. A circleกs edge in vector form will always be smooth no matter how close you zoom in since it is recalculated each time you change the view.

Raster based programs are best at working with photorealistic images and make subtle (or bold) changes in color, shadow and texture. Vector based programs excel at easy control of edges and tend to produce a more graphic style of art. Regardless of the type of image, higher resolution is always better for producing a good result. While your image may be vector or raster, or even a combination of the two, the Art Staff at ExpertShirt.com will work hard to translate it into the best textile printing possible.

About The Author

Mandar is a graphic artist and manabouttown with Expertshirt.com. Design your own custom tshirt online at http://www.expertshirt.com.

[email protected]

This article was posted on August 20

by Mandar