When I Export My Images, What Format Should I Go For? GIF or JPG?

How you can remove your doubts once and for all on choosing GIF or JPG for your web images. Clear cut straight to the point tips on how you can tackle this problem and stop worrying about it.
Web images are packed together in such a way to load faster over the Internet. They are as diverse as real world prospect, since Web Images are taken by a huge quantity of people for unbelievably all kinds of projects. Most of the time measured in pixels, they are also fashioned at 72 dpi as most monitors display items at 72 dot per inch. As much as you have already well informed, the two main file formats used for Web images are GIF and JPEG as they produce exceptional image quality with realistic end file range. The greater size that you can cut off from your web images, the quicker your site will load and the faster your visitors will be able to grab the information at your website, hence be happier and more satisfied. Unlike other file types where images are saved together with the file, web images are kept and loaded up independently from the page itself. If you're the structured planner type of guy, it would be your best interest to get all your web images to be placed in an "images" subdirectory. In my opinion, that's an excellent move to distinguish your HTML files with your image files.

The first rule of web graphics is that GIF is firmly intended for solid colours only, weighed to JPG which is pretty much in the more flexible department, allowing gradients, photo images, etc. For example, if you've just created a logo, which have a limited number of colours on it, it usually should be exported as a GIF. Should your logo has a picture or a gradient pattern in it (which is not so highly recommended), then go for JPG. Always go for JPG for items which have great diversity of various colours. For instance, photo images and gradient colours. Do not save your photo images into GIF's unless you want them to turn out ugly. You could try this for yourself, get a photo image or a gradient color and save them as a GIF and JPG, and you'll notice a great deal of dissimilarities in the quality and file size straight away. The best thing is to play around with your images and see the end results yourself.

It's like a well known standard of web design that it is always the highly recommended approach to choose the best format, for the reason that in return, you'll get the smallest file size possible. The smaller it is, the faster it loads, and that's the fine line between staying longer at your website and going for the close button at the top of your browser. Ask around, and you'll get the same answer all the time, web surfers don't like to wait too long for images to lload. If you happen to save your dog pictures in GIF, you'll be surprised to know that not only the quality is horrible, but they will end up with a bigger file size most of the time. Again, try opening up your favourite image editing software and try it for yourself, I bet you'll know exactly what I mean soon thereafter.

Some of the interesting rewards GIF format has over JPG is the transparency properties, as well as the ever popular animation properties. JPG can't have transparent backgrounds and cannot be animated. GIF's with transparent backgrounds are pretty much the best option to choose when you have an item which will be placed on multiple backgrounds with different colours or tones. If you're the time efficient type and under the impression that re-exporting your images into JPG's with assorted background colours is not such a good idea, then GIF is always the finest way to venture into. Animated GIF in a different role, is basically the arrangement of still images in a sequence to produce an animation. In plain English, it is a frame by frame image representation in a single file to create a web friendly animation. A lot of image editing softwares support such feature in which you can create images within the frames and set the delay period for each transition, e.g. which frame to stay longer and which frame to go at lightning speed.

Apparently in the cyberworld, size does indeed matter for a faster web surfing experience. And believe me you want the file size of your images to be as low as possible, without neglecting the overall quality, hence why the most recommended compression setting for JPG stands at 80. You will be surprised somehow that any number beyond this number will increase the file size in a great proportion. Most image editing softwares generally have a preview window when you're exporting your image files, which is undeniably useful when you want to test around with numbers below 80 in order to get the smallest file size possible. For GIF however, you'll get a totally new different picture as it involves the selection of the number of colours rather than by the compression rate. There are other properties which GIF has, such as Palette and Loss settings, but let's concentrate on the number of colours feature for now. Just ignore on the fact that you have to manually determinethe amount of colours that you have to pick as chances are, the software you're using will automatically choose the smallest number of colours your image represent. It goes by the multiplication increment of 2, so you'll have 2, 4, 8, 16, 32, 64, 128 and 256 number of colours. So if you have a logo with 3 colours, choosing a 4 would be the best action compared to choosing 16 or 128.

A trouble-free method of reminding yourself which format to decide is by simply remembering that simple and solid colored images are GIF and complex colored images are JPG. Sometimes the best way of familiarizing yourself with this theory is simply to play with it. Get a group of images and export them into a variety of file formats and you'll in the short run will make this file formating activity a second nature to you.

About The Author :

John Teh is an avid web designer at Motion Edge Design. He acts as a guide and can support you till you get your best designed websites online. He also provides useful tips and suggestions on ways to creating a strong online presence using quality designed websites. Your feedback & commitment will be appreciated at his website at Web Design Malaysia. He also provides ecover design services at his website.

By John Teh
Published: 12/15/2006

 
Use the feedback form below to submit your comments.
Your Comments:
Your Name:
Use the form below to email this article to your friends.
Recipient Email Address:
 Separate multiple email addresses by ;
Your Name:
Your Email Address: