Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk
Jan 28 2013
Website Image Formats: Choosing the right format for the right task!
Ever thought what makes a website complete? A website isn’t complete unless it’s got all the elements that makes it work perfectly on all the web browsers. And to make that possible, a web developer takes care of many things other than the HTML and CSS codes. For example, a complete website would have an SEO friendly and W3C validated code, smooth navigation, pixel perfect layout, web typography, a color scheme that suits the business and optimized images. And today, we are going to discuss about the importance of images in a website, and what format one should select while making a website.
Images are an integral part of any website. And just as they saying goes ‘A Picture paints a thousand words’, images make a website more impactful. However, there are various formats an image can come with, like JPEG, PNG, GIF, etc., and deciding on what format should be used on the website could be a tough task.
Here’s throwing some light to dispel doubts and apprehensions related to them.
JPEG is one of the most popular image formats, and it stands for Joint Photographic Experts Group. Basically, image files saved in JPEG are very ‘lossy’, which means that the visual quality of an image gets reduced from the original image when it is saved in a JPEG file format. The main reason behind this is that the JPEG compresses most of the graphics used in an image so that the image file size stays on the lower side.
People using digital cameras in today’s time can easily click and save their images in the JPEG file format. Additionally, the JPEG file format is known as the most web friendly image file format as its size remains smaller than other available image formats, and it needs very less space, that doesn’t hinder the website’s page loading speed by much. Moreover, JPEG images are less grainy than GIF images, the format which was used before JPEG and PNG came into the picture.
Advantages of JPEG:
- JPEG images are rich in colors, which makes them perfect for photographs that requires specific attention to the colors.
- They are of 24-bit, and supports up to 16 million colors.
- JPEG is one of the most preferred image file format.
- It is compatible with most of the Computer Operating Systems such as Mac, PC and Linux.
Disadvantages of JPEG:
- Doesn’t offer high visual quality.
- Animation can’t be used in this file format.
- It doesn’t support image transparency.
GIF is one of the oldest image file format used on the web, and the file extension GIF stands for Graphics Interchange Format, which is restricted to the 8 bit palette and supports only 256 colors. This file format is still popular, and people use GIF images on their website as their size is pretty small if compared with other image formats.
The GIF compression works in two different ways:
- It trims down the amount of colors in rich color images, thus dropping the number of bits per pixel.
- It swaps the multiple occurring patterns, basically the large ones, and clubs them into one. For example; rather than storing five shades of the color ‘Red’, it stores only one red color.
The GIF file format is most appropriate for cartoons, graphics, logos and diagrams made using only a few colors. However, for animated images it is still preferred widely.
If compared to the JPEG file format, it is lossless and more efficient in compressing one color image, but lacks quality in detailed pictures. Therefore, GIF images are good if they carry 256 colors or below that, but if you need more impactful images then it won’t be an appropriate choices as you may lose up to 99% of its colors.
On the other hand, if you need great page loading speed for your website, GIF can prove to be the best solution because of its interlacing feature.
Advantages of GIF:
- It supports transparency
- Good for images with a little animation effect.
- The GIF images are of ‘lossless’ quality, however, the images should carry only 256 colors.
- It works great for images having limited colors.
Disadvantages of GIF:
- It only and only supports 256 colors.
- It’s the oldest image format as it exists since the year 1989, and since then it hasn’t been updated even once.
- Sometimes the file size can exceed the file size of the PNG format.
PNG is another widely popular image format, which is quite famous for transparent images. This file format was introduced with an intention of replacing the GIF as an image format. The file extension PNG stands for Portable Network Graphics. This image file format came into existence only a few years back. Many people aren’t even much familiar with it as other file formats such as JPEG and GIF.
The PNG file format has been made exclusively for the images used over the web. One can even call it as the the greater version of the GIF because the images saved in the PNG format are stored with 256 colors maximum. However, it maintains the color details more precisely, and it also lets the user save images in an 8 bit transparency.
PNG also supports 24 bit color images. Animated image formats that are derived from PNG are MNG and APNG, which are also supported by leading web browsers like Opera and Mozilla Firefox.
Advantages of PNG:
- PNG images are ‘lossless’, hence they don’t lose their original quality after compression.
- PNG is better than GIF in many ways, for example; it saves an image in a smaller file size than the GIF file format.
- It handles the transparency feature much better than the GIF.
Disadvantages of PNG:
- It isn’t good for larger sized images as it tends to save them into a very large file, which can even surpass the file size created by the JPEG format.
- Doesn’t support animated images.
- Still many web browsers don’t support PNG.
By now, we assume at least some of your doubts must’ve been addressed about which image file format you should use while placing images on your website. If you have any question or sugesstion, you can post them via the comment box given below.