Search Engine Optimization

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, ...

SE Optimizd Websites

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. ...

Achieve Higher Targets

Here's an mp3 file that was uploaded as an attachment: Juan Manuel Fangio by Yue And here's a link to an external mp3 file: Acclimate by General Fuzz Both are CC licensed. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, ...

SSEO Packages

Some block quote tests: Here's a one line quote. This part isn't quoted. Here's a much longer quote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus. In pretium pede. Donec molestie facilisis ante. Ut a turpis ut ipsum pellentesque tincidunt. Morbi blandit sapien in mauris. Nulla lectus lorem, varius aliquet, ...

Contact Information

I'm just a lowly contributor. My posts must be approved by the editor.Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at ...

Posted by SEO Professionals India - - 0 comments

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

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 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.

Leave a Reply