Choosing the right file type for your web graphics is important. Not only do some of the file types support features you might want, but choosing the wrong file format can result in files that are larger than they need to be which can seriously impact the speed and performance of your website.
There are three types of image files that are compatible with all web browsers. GIF and PNG are what is known as lossless compression type files, which means that the quality of the image doesn't degrade each time you save them. You can also use these two types of files to create animated image files. Each time you save a JPG files on the other hand, the image will deteriorate a little more so it is always better to work with the original file in a lossless format such as BMP, TIFF or your image editors proprietary format, PSD for Photoshop for example, until you are ready to save it as a JPG file.
GIF - This type of file is great at compressing graphs and drawings, where there aren't many colours or there are large areas of a solid colour in your image. One of the main limitations of this type of file is that it cannot display more than 255 colours but, like PNG files, it does allow you to have a transparent background colour. If your image contains many shades of colours, gradients, more than 255 colours, JPG files might be a better choice.
JPG - This type of file is your ideal choice for compressing photos and images where there are lots of gradients. If you must work on a JPG file repeatedly, always try to use the original high quality file as a starting point or at the very least, save your file at the highest possible quality setting
PNG - This is the relatively new multipurpose file format. I mention this because, if backwards compatibility is important to it, you should be aware that it wasn't supported in Internet Explorer 6 and earlier. File size can be larger than their GIF or JPG equivalent. Why use it then? It can do everything that GIF and JPG files can do and is actually the only format of the three that will allow you to create a photo with a transparent background and supports scalable vector graphics such as logos and other drawings created in a vector graphics application such as Adobe Illustrator, Adobe InDesign or Corel Draw.
Of course there are many other file types for graphics but only these three are universally cross-platform compatible with all web browsers.
Which should you choose? Start with the above guidelines. If you end up having to choose between two of these formats, select the one that produces the smaller file size.
Add a comment: