Using the Correct Image Types for the Web

Jpegs, Tiffs, Bitmaps, what does it all mean? With the web being a predominantly visual medium getting your images out for all to see seems simple, but have you ever seen a really badly compressed photo (as we discussed here) and just thought "what were they thinking"? It is a common mistake but an easily rectifiable one.

There are an array of file types one can save an image as, the trick is finding the one that is right for the type of image you are saving. Here is a quick and simple breakdown.

The All Mighty Jpeg

Jpeg stands for Joint Photographic Experts Group. Jpeg files are your go-to file type for saving images. It works with just about anything besides transparency and can be saved as high or low resolution as you like, just watch not to compress it too much and end up with a pixelated nightmare. In the file to your left the size is 8KB, an average size file.

Jpegs are best used for photos and images that have many colors and are complex. If you worry about how your colors may render and want complete accuracy, high resolution jpeg will probably suit you best.

GIF 

Gif or Graphic Interchange Format is another widely used file type. Gif images usually give you a range of colors (256) and a smaller file size. Its best use is when your image uses few colors, much like the Sam Skunk illustration on the left and supports transparency. The file size for this image is also 8KB, the same as the jpeg which is due in part to its small size.

The other big perk of the gif file is that it can also be used for animation, and supports metadata.


PNG

Png files AKA Portable Network Graphic can come in two flavors, 8, 24 and 48 bit each allowing greater color precision. Png is the alternative to the older gif format. It, like gif, offers smaller file sizes and transparency. Like the others, the image to the left is 8KB. One big benefit of png is that it allows for more accuracy when saving a file that would normally be best suited for jpeg, all in a smaller file.





Now this is merely the tip of the iceberg. There are many file types and tweaks for each. Photographers may work in primarily RAW files and Tiff files, while Graphic Designer may work with high resolution Jpegs and PDF files. The files outlined above are just a very basic look at some common file types on the web and their best uses. For more information you can read more at WFU.com and webstyleguide.com

Spring Above Marketing is available for all your web needs, please dont hesitate to contact us!