Web Design Articles

Welcome Guest

Search:

Web Design Articles » Web-design » When I Export My Images, What Format Should I Go For? GIF or JPG?

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

View PDF | Print View
by: admin
Total views: 20
Word Count: 1014

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. That's an excellent move to separate your HTML files with your image files.

The first common rule of web graphics is that GIF has always been firmly intended for solid colours only, compared 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 / behind 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 load. If you happen to save your vacation 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. 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 feature. 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 tone. 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 a frame by frame image representation in a single file to create a web friendly animation. In plain English, it is is basically the arrangement of still images in a sequence to produce an 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 determine the 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 - http://www.motionedgedesign.com


Rating: Not yet rated

Comments

No comments posted.

Add Comment

You do not have permission to comment. If you log in, you may be able to comment.