Creating GIF and Jpeg Images for Your Website

The two most dominant Web image types are GIF (Graphics Interchange Format) and Jpeg (Joint Picture Experts Group). You can find the above types in most any website you visit. They both compress to a small file size and are easy to work with.

GIF: Pronounced jiff, like the peanut butter, is very good for logos and lettering. Highly detailed images don’t look good in the GIF format because it’s limited to 256 colors; rendering complex images – such as photos – with a grainy look.

Jpeg: Pronounced jay-peg, does quite well with photographs since it was originally designed for them. It is a lossy type of compression and will reduce the file size by dropping bits it doesn’t need.

General Website Preparation Guidelines:

It’s best to work with all your Web images at a much higher resolution than 72 or 96 pixels per inch (PPI). If you are creating original images, scan to at least 300 PPI. Though GIF is somewhat more forgiving of lower resolution than Jpeg, 300 PPI offers a good compromise for editing.

The reason you need to edit in high resolution is that your image manipulation and filtering will have a more detailed look when recompressed for the Web. The excellent detail of professionally crafted virtual eBook covers is on account of the high resolution image editing.

When working with logos and lettering, areas of concern are all the border lines that meet the background color. You should select two to four pixels (half on the lettering and the other half on the background) and apply a generous amount of your paint application’s smoothing filter.

Once you are done with the editing, it’s time to recompress and convert the images for use on the Web! Depending on your needs, resize the images to either 72 or 96 PPI and save them as GIF or Jpeg. Take your time and use many of the Web features of your paint application; experiment to see what is the best compromise between image size and quality.

Items to consider:

High, medium or low compression.

Colors: 16, 32, 64, 128, 256

Dither/no Dither

Of course, there are more detailed works on editing images for use on the Web; this article doesn’t pretend to be on par. Yet and still, by following the simple guidelines above, you’ll be able to produce some very decent images for your website.

Share on Facebook