Choosing The Right Image Format For Your Site

Choosing the wrong format for the images on your website can be a pretty costly mistake. The cost being primarily time. Time required to recreate or reformat the images, as well as the time required to load your website when large file formats are used in cases where they shouldn't be. Knowing what format to use and when makes a big difference in how your site is viewed.

For the purpose of this article, we're only going to cover the 3 most widely used and supported formats. Those 3 formats are JPG, PNG, and GIF. There are a number of other formats that can be used, but most are too large to be efficiently used on a website or aren't widely supported to ensure they can be reliably viewed on all devices. Sticking to these 3 formats mentioned below is your best bet...

JPG - This is going to be your go-to file format for most of the images on your website as they offer the best bang-for-your-buck in terms of quality and overall file size. If you want your website to load fast and look great, JPGs are the way to go.

PNG - For images that include transparency, text, or other fine detail where image quality is more important that file size, a PNG will be your best choice. PNGs retain their quality even after compression, so you can always count on it being just as crisp and detailed on your website as it was when it was created. The downside of course is that PNGs tend to be much larger files and can lead to slow loading web pages. Just be sure to use them sparingly and for smaller images and you should be OK.

GIF - GIFs have been around forever and are relatively small, fast loading, and are supported everywhere. While you're sure to get a much higher quality image with roughly the same performance out of a JPG, there's one thing a GIF can do that a JPG can not do: Animation. Animated content can be highly engaging when used properly. It can also be extremely tacky, a huge resource hog, and can slow down your website and even your computer as a whole when abused. If you're going to add animated GIFs to your website, do so sparingly.

In summary, as mentioned above, JPGs are going to be the best option for nearly all of the images on your website. For images with text or transparency, a PNG is your best bet. Need an animated image, go with a GIF. 

For any other questions related to how to best choose an image format for your site, shoot us an email to support@webstarts.com and we would be happy to help out.