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

Transparent Images for the Web and Print

Transparent Images for the Web and Print

by: Grannyกs Mettle

For transparent images that you have extracted from your photos, the next step is to choose where you’re going to post them. There are several options: you could either post the images on the Web for your website, on a page layout application, or on a presentation program.

Your image to the Web.

If your image is going to be posted on the web, it should be in GIF, PNG or ขFake Transparencyข with JPEG.

GIF is the original format with transparency support for the web. A disadvantage when using GIF is that the image can have color shifts, posterization and distortion, particularly on those with high color densities. In addition, GIF only supports 1bit transparency. This would be a problem for images with partial transparency because each pixel is either completely transparent or not. Enhancements like smooth drop shadows that fade away gradually may not be feasible.

PNG, on the other hand, is developed as an answer to the limitations of GIF. It allows high color and partial transparency with the use of alpha channels. However, the downside to this application is that there are still many browsers being used today that do not support PNG.

ขFake Transparencyข with JPEG works where the area of the image, which you have chosen to be transparent are filled with the same background color or texture as the web page. Many designers use this especially when image is placed on a colored background where alignment is feasible.

Your image to a page layout application.

Applications like InDesign, QuarkXpress, or Pagemaker are often used for page layouts. You have three applications to choose from:

Use the Adobe native PSD format when you need to retain transparency among Adobe applications.

Use Embedded Paths (EPS) as most desktop publishing applications accept the EPS format. In addition, EPS images support the use of embedded clipping paths. However, when used for transparency, the isolated object can only have hard edges, and again, it doesn’t support partial transparency.

Use Alpha Channels (TIFF) when you want to define transparency in shades of gray. For page layout applications, the TIFF format is used for images with alpha channel transparency.

Your image to a presentation program.

When the image is going to be used in a presentation program such as PowerPoint for onscreen display, PNG is usually the ideal choice. However, this only works if your presentation program supports PNG.

About Los Angeles Printing Services

Our Company is a Los Angeles based company that specializes in commercial printing and graphic design. Our mission is to provide clients with high quality printed outputs and professional web and graphic designs utilizing efficient and productive staff, uptodate software programs, and the latest printing equipment and technology. For inquiries and online pricing for your projects, please visit www.losangelesprintingservice.com.

About The Author

Grannyกs Mettle is a 30something, professional web content writer. She has created various web content on a diverse range of topics, which includes digital printing topics, medical news, as well as legal issues. Her articles are composed of reviews, suggestions, tips and more for the printing and designing industry.

Her thoughts on writing: กWriting gives me pleasure… pleasure and excitement that you have created something to share with others. And with the wide world of the Internet, it gives me great satisfaction that my articles reach more people in the quickest time you could imagine.ก

On her spare time, she loves to stay at home, reading books on just about any topic she fancies, cooking a great meal, and taking care of her husband and kids.

For comments and inquiries about the article visit http://www.losangelesprintingservice.com/catalog/BusinessCard.html

[email protected]

This article was posted on April 01

by Grannyกs Mettle

JPEG and GIF the differences

JPEG and GIF the differences

by: Maricon Williams

JPEG and GIF image formats are both compression based formats. They are the most widely used and supported image formats for web. They take an uncompressed image such as bitmapped image and compress them to a smaller file size. A lot smaller image size is moreover the result of this conversion. It may seem that one compression may result in smaller file sizes, nevertheless that is simply not the case. Now where lays the difference?

JPEG stands for Joint Photographic Experts Group. It supports 16.7 million colors. It is ideal for photographic images and high quality images. JPEG is a lossless method of compression or in common parlance, when the program that creates a GIF squashes the original image down to ensure not to lose any data. It uses an easy substitution method of compression.

GIF on the other hand, stands for Graphic Interchange Format. It supports only a maximum of 256 colors. It is the only alternative to make an image animated unless you want to use Flash. Between GIF and JPEG, only GIF allows transparency. GIF is good for images with flat expenses of color. It can be use for logos, titles, button, etc. The maximum compression of GIF depends on the amount of repetition there is in an image. A flat color can compress well to even one tenth of the original size while a complex noncompetitive color will save approximately 20%.

GIF format is good at compressing images with a small number of colors with no gradations. In actual fact, most web graphics are saved in GIF by contrast when applied to JPEG, it usually results in images which are larger than their GIF counterparts and may appear corrupted.

Each image format has its own advantage. GIF may win out with the nondithering, fewer color images while JPEG is excellent for dithered continuous tone images. An example to this is a photograph with several colors, shadows and even gradations. All these colors and shades call for the JPEG format.

JPEGs disadvantage is that it throws away parts of an image to save space. Apparently you just can’t discard any piece of information so what JPEG does is divide the image into squares. GIF is short of colors, that’s a blatant fact. Another disadvantage is that, Unisys discovered that it owned several patents to key parts of the GIF compression technology and has started demanding fees from every company which uses the GIF code. This is the reason why progress was muffled. Now that you already know the difference, you can now pick what’s good for you.

About The Author

Maricon Williams

I love reading. Give me a book and Iกll finish it in one sitting. Reading is the chance to be transported to a different world and so is writing. Iกm more enthusiastic about writing however, since you can relay your ideas to someone else. I can only imagine that feeling when I hear a complete stranger talking about my ideas which read on an article somewhere. To relay my message to as many people is the same as touching people with music. Only mineกs less harmonic. I try to make up for it with the color I bring with words. And most of the time, it’s more than enough.

For comments and inquiries about the article visit http://www.ucreative.com

[email protected]

This article was posted on March 07

by Maricon Williams

Image FormatsGIF, JPEG, BMP

Image FormatsGIF, JPEG, BMP

by: Stephen Hames

When browsing the internet you are likely to come across many different image formats. However, the most common formats are: CompuServe GIF, JPEG, and Bitmaps.

CompuServe GIF

GIF stands for Graphic Interchange Format and was standardized by CompuServe in 1987. The very first GIF format was GIF87a and saves images at 8 pitsperpixel with a colour level of 256. Then in 1989 CompuServe updated the GIF format to include animation, transparency, and interlacing, which was called GIF89a. Apart from animation, transparency, and interlacing there is little difference between to two.

JPEG

The JPEG image format was developed by Joint Photographic Experts Group. JPEGกs best feature is the compression, you can compact the image file to make it the size smaller (bytes). The problem with this format is that there is a tradeoff details detail and size. Generally its best to save JPEGกs at 50% compression.

Bitmaps

Bitmaps was invented by Microsoft (everyoneกs favourite company). The Bitmap format saves your image pixel for pixel, in other words, what ever you see on the screen before you save is what you see when you open the image again. The only drawback is that the file sizes can be extremely large, which may result in longer download/upload times

About The Author

Stephen Hames

I run and operate a web template website called SJH Designs, http://www.sjhdesigns.co.uk

This article was posted on August 08, 2004

by Stephen Hames