Welcome to Motion Edge Design's Blog

Drop by often and get to know the latest news in today's designing world, as well as tips and strategies, or just simply chill out and spend some time reading our rants and stories of our daily working life. Feel free to post your comments.

The Most Asked Question On Web Images - Gif or JPG?

Web images are packed together in such a way to load in a greater speed over the Internet. They are as diverse as real world picture, since Web Images are taken by a huge quantity of people for different methods of implementation. Usually 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 experienced, the two main file formats used for Web images are GIF and JPEG as they provide excellent image quality with realistic end file range. The greater size that you can cut off from your web images, the speedier your site will load and the longer your visitors will stay at your website. 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 tidy and a well thought out type kind of person, it would do you a great deal of help in the future to get all your web images to be placed in an “images” subdirectory. That would be a highly recommended solution to break up your HTML files with your image files.

The first rule of web images is that GIF is firmly intended for solid colours only, measured up 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 is always a great approach to export your logo 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 variations in the quality and file size straight away. Mess around with the export function in your image editing software and you’ll get the big picture.

It’s like a web design trend 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. No doubt in anyway, that visitors love websites that are designed well to load up as fast as possible. If you happen to save your family pictures in GIF, you’ll be surprised to know that not only the quality is unacceptable, 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, and not to forget the ever popular animation properties. JPG can’t have transparent backgrounds and cannot be animated. GIF’s with transparent backgrounds are the right choice to embark upon when you have an item which will be placed on multiple backgrounds with different colours or tones. If you’re the time conscious type and under the impression that re-exporting your images into JPG’s with diverse background colours is not such a good idea, then GIF is always the finest way to choose. Animated GIF in a different role, is basically the arrangement of still images in a sequence to produce an animation. To simplify its definition, 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 this particular feature in which you can drop in images within the frames and allocate 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 most of the time. And believe me you want the file size of your images to be as low as possible, without defacing the quality of the final image, hence why the most recommended compression setting for JPG stands at 80. Just by stepping a step beyond this number will increase the file size in a great proportion. Most image editing softwares more often than not 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. It is not important to know exactly how many colours that you should 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 number to choose compared to choosing 16 or 128.

A trouble-free approach of reminding yourself which format to opt for 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 idea is simply to play with it. Get a group of images and export them into a variety of file formats and you’ll in due course will make this file formating task a second nature to you.

Technorati Tags: , , ,


Posted by John on Dec 14 2006 under Design Tips and Articles




One Response to “The Most Asked Question On Web Images - Gif or JPG?”

  1. Mujipur Rahman Says:

    Dear John,

    Nice articles from you.

    Rahman,
    http://www.esourcemy.com
    http://www.esource-malaysia.com

Leave a Comment