Different image formats on the Web

Web Design is a fickle beast and it has many different nuances that may not be apparent on the surface, but are all too relevant. An important aspect of web design is as the title of this blog suggests, the different image formats available to web developers. This blog provides an excellent and in depth analysis of the different image formats and their uses, the blog in question goes into detail about the main ones, .jpeg, .png, and .gif. My favourite aspect of the blog post is the actual image examples they provide, it helps illustrate clearly the differences.

The advantages and disadvantages of the different image formats is an incredibly important thing for any web developer and is a huge aspect of web development. I won't go into too much detail, as the blog itself goes into that itself. However for a quick rundown, jpeg is an excellent format for providing good looking images with lots of colours and small file sizes. Unfortunately the small file size leads to some detail loss, and there is no option for transparency.

The gif file format is great for making small animations and for not losing any quality while supporting transparency. Of course, its disadvantages include, that it only supports 256 colours, which can lead to a lot of images looking rather funky. Gif seems to be best used for cartoon type images which have limited colours.

The png file format is a lossless image format meaning it doesn't lose any quality from the original, and it also supports transparency which makes it very useful. It's disadvantageous include, no animations, high file sizes sometimes and some browsers do not support the file format.

The blog also goes into more detail on a few more file formats, and while aren't as relevant to web development, it is an interesting read for web developers/designers and others who would just like to know a little more about how their favourite sites might work.