SEO Article - Optimization of web graphicsThe Smallest Is The Best!.. As Long As It Serves Its PurposeIt 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 JPEG 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 designing our web site.
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. Article by Decebal (Dudi) Scraba
Graphic Designer, website SEO optimization specialist and owner of www.ewolwe.com - a source of web resources
IMPORTANT COPYRIGHT NOTICE FOR WEBMASTERS!
You may publish this article on your website ONLY upon receiving permission (ask permission in writing to e-mail address: copyright-at-ewolwe.com) and ONLY by providing full credit to the author - Decebal (Dudi) Scraba along with a live link to www.ewolwe.com homepage, placed in the author's box. |
| 
.. home .. .. site map .. .. contact .. .. faq ..
Online SEO Optimization Guide:1: Research with search engines
2: Site Design - optimized from the start
3: Quick loading - speed up web pages
4: SEO, ranking, engine placement tips
5: Submission, web site promotion
SEO & Promotion Articles:> Optimization of web graphics in SEO
> Quick loading pages as a must
> W.A.F. free, quality inbound links
> SEO - WSSYA for high rankings
Wallpapers:> Desktop Wallpapers on categories: 3D, vectorial, dominant color, zodiac signs
Free Graphics Resources:> Vectorial built Clipart, Web Logos, Website Headers, 3D Desktop Icons
|
