Which image file types to use for websites?

Over the years, there’s been various image file formats that’ve come and gone, or are tied to particular programs. However, three formats have become dominant: JPEG (or JPG), PNG, and GIF.

But which formats should be used for websites and blogs? The infographic below outlines the pros and cons of each format, and their main uses.

Image file types infographic
Infographic by WhoIsHostingThis.

My uses for each format are below.

JPEG

Most of my site’s pictures are in JPEG format. These include photos taken myself, as well as photos from various online sources.

Since JPEG images tend to be smaller file sizes than PNG, I tend to favor JPEG for most uses. I’ll occasionally convert PNG pictures to JPEG ones if there’s no reason to keep it as PNG (usually photographs).

PNG

I use PNG formatted images mainly for graphics. The most prominent use is for my site’s logo.

I also stick with PNG if image quality’s a concern, if file size doesn’t matter, or there’s little to be gained by converting to JPEG.

GIF

Other than maybe a few random images obtained online, or dating from my earlier blogging days, I never use GIF. JPEG and PNG are both superior as file formats.

GIF’s main use nowadays is for animated files. While they’re all the rage nowadays, I’m still more old-fashioned about animated GIFs. (Probably lingering bad memories of GIFs causing browser crashes years ago.) Thus, I don’t use animated GIFs on my blog. I begrudgingly tolerate them on social media (such as my Twitter feed), if only because that’s the main image format others insist on attaching to tweets.

As for whether GIF is pronounced “jif” or “gif,” I never really pronounce it out loud often. I suppose “jif?”

Image sizes

As for keeping image sizes down, there’s lots of software that’ll compress or format images into web-friendly file sizes. Ideally this could be done with whatever graphics program you use, before uploading images.

For this blog, I’m currently using the EWWW Image Optimizer plugin, which automatically and losslessly compresses graphics I upload.

Conclusion

To summarize the post and infographic, the uses for each format:

  • JPEG: For photographs.
  • PNG: For graphics and logos.
  • GIF: For animated images.

What do you use for image formats? Do you like animated GIFs? And is it “jif” or “gif?”

5 comments

  1. Wow I loved the graphics that gave the details for all three! This was a really informative post and I always wondered the differences between JPEG and PNG. Thanks for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *