Inside this Article
JPG (Joint Photographic Experts Group) – for Friendly Donkeys, and Other High-Detail ImagesEver since the JPG format was released in 1992, it’s been a staple of online imagery, consumer-grade photography, and any other use case that requires a significant amount of detail in a small file size. The JPG has been dominant for a long time because it gives you exactly that: lots of detail, relatively small file sizes. Of the formats on this list, JPG is the best option for photos with lots of color and detail. It’s also quite flexible because you can export JPG images at varying degrees of quality, which allows you to decide exactly how much quality you’re willing to trade for smaller file sizes. Let’s take another look at our good old friend, Gary. Here he is in a JPG image with the quality set to 100 (the highest value). The image “weighs” 633 kilobytes. And now, let’s set the image quality to 80. If you look closely, detail has definitely been lost, but not that much. And even with this minimal loss of detail, the image’s size has been reduced to 121 kilobytes. At a quality level of 50, the image starts to show much more serious image compression. However, the diminishing returns in terms of file size are notable. We’ve lost only 41 kilobytes, bringing us down to 80 in total. And at a quality level of 30, it’s just not worth it. 65.4 kilobytes. So, you generally want to keep the image quality value around 80, and it’s usually not worth going lower than 70 at all. Go too low, and you end up losing a lot of detail, with not a lot to show for it in terms of reduced file size. You should keep in mind that JPG’s built-in compression tends not to play nice with images that need smooth, crisp lines, like images with text on a solid background, or logos. To show you what I mean, I’d like to present this very simple graphic: I set the quality to 70 to make it easier to show you what I mean. If you look closely at the image, you should see that the edges around the text and that blue shape are blurred. Here’s a zoomed-in version: So where does JPG fit in on a website? Photos, plain and simple. Want a big background photo for the website? JPG. Photos of your products on display? JPG. Shots from your yearly camping trip? You see where I’m going with this.
PNG (Portable Network Graphics) – Mostly for Logos and IconsAnd that brings us to PNG. The way it works is actually somewhat similar to the way the GIF format works. In fact, the old PNG-8 variant is limited to 256 colors, but people hardly use that anymore. The format we most typically use is called PNG-24, and it supports up to 16 million colors, meaning that it acts as a lossless format. No detail is lost. Ever. There is built-in file compression. While JPG compresses images by sort of blurring pixels together, PNG doesn’t do that. That means it’s fantastic for images where you want crisp lines. Have a look at the PNG version of my very simple graphic from earlier: And the zoomed-in version: The PNG version of the simple graphic is about ten kilobytes larger than the JPG version, but that’s a negligible difference for an impressive increase in quality. However, this is true only for the most minimalist of images, with solid colors and simple shapes. That photo of Gary, the pretty chill donkey? Its PNG version weighs in at 2.32 megabytes, which is huge for an image of those dimensions. I haven’t included it here because I respect any bandwidth or data cap limitations you may have. As a bonus, PNG supports transparency, which means you can take a PNG image with no background, and overlay it on any kind of background you like. The thing is, PNG was hardly the first image format to support this feature; GIF images can do it, too. PNG, however, does it better. For this comparison, I took the terrible graphic, removed the white background, and saved the image in both PNG and GIF formats. I then placed those images on another, darker background to show you how each format handles transparency: As you can see, the transparency provided by the GIF format leaves the shapes with rather jagged edges. PNG wins, here. On websites, PNG is typically used for things like logos, icons, and generally very simple graphics. They’re also used for ads, and sometimes for very small “thumbnail”-sized images, where the extra detail of a lossless format is appreciated.
Bringing It All TogetherThere’s a lot to know about these image formats. Each has its own history and way of doing things. The information in this article barely scratches the surface, and each format on its own could easily fill a book or three. But for getting your website up and running, it’s probably best to keep things simple. Speaking of keeping things simple, here’s that cheat sheet I mentioned earlier:
Finally, these are long-established image formats, so they’re pretty simple to use: Just upload them to your website, and go. It would be very, very hard to find website builders (like Wix or GoDaddy) or web hosts that don’t support all three. The three formats are also supported across all major browsers (Chrome, Firefox, Edge, Safari) and the vast majority of less well-known browsers. Follow the general advice in the article, and you’ll be fine… …until WebP replaces JPG, GIF, and perhaps even PNG. But that’s a whole different article, so don’t get me started.
|Format||Greatest Strength||Greatest Weakness||Generally Used For||Type|
|GIF||Animation||Complexity||Animated images; memes||Lossy|
|JPG||Complexity and file compression||Compression makes simpler graphics look bad||Photos||Lossy|
|PNG||Simple, clean graphics; lossless quality; transparency||Complex images like photos can have massive file sizes||Logos; simple graphics||Lossless|