Why Are There So Many Image File Types? The Basics of JPG, PNG, and Compression

When you go to save an image, there are so many formats — JPG, PNG, GIF, WebP — that you hesitate over which to pick. You may have heard “save photos as JPG and logos as PNG,” but it’s hard to find an explanation of why.

In this post, I’ll unpack, without any code, why there are so many image formats, what the compression beneath them is, and which format is good to choose when.

An image is, in the end, numbers #

An image on the screen is a dense gathering of tiny dots. Each of these dots is called a pixel, and every pixel has its color written down as a number. As mentioned earlier, computers represent everything in 0s and 1s, and images are no exception: a color is turned into a number, and that number is stored in 0s and 1s.

The trouble is that there are too many dots. A single modern photo holds millions of pixels, so writing out all the color numbers as-is makes the file enormous. That’s why almost every image is stored after going through compression.

Compression is the technique of shrinking the size #

Compression is the technique of holding the same picture in less data. There are broadly two branches.

One is lossless compression. It cleverly shrinks the data without throwing any of it away, and when unpacked it returns to exactly what the original was. For instance, when the same color runs over a wide area, it saves space by noting “this color from here to there.” The other is lossy compression. It throws away a little information people’s eyes don’t easily notice, and in return shrinks the size much more. You trade a bit of quality for a lighter file.

So each format is good at something different #

This is why there are several image formats: each has a different compression method and a use it suits.

JPG uses lossy compression and suits photos. It’s strong at holding photos, where colors shift subtly, in a small size. PNG, by contrast, is lossless, so it suits logos, text, and graphics with crisp lines, and it can also keep the background transparent. GIF is used for simple moving images. Lately, newer formats like WebP and AVIF, which deliver similar quality at a smaller size, are widely used too. The reason a photo saved as PNG becomes needlessly heavy, and a logo saved as JPG gets messy edges around the letters, lies in this difference.

Choosing the format well makes the screen faster #

Images are among the heaviest resources on a web page. Text is light, but images are not, so a page packed with large images takes a long time to open. So just choosing a format suited to the use and shrinking the size to what the screen needs makes a page noticeably faster.

The CDN and cache covered earlier work together here too. If you keep a well-compressed image close to the user and cache what has been received once, even heavy images are delivered fast. Format choice and delivery optimization work together to produce a faster page.

So, when you handle images #

The rule of thumb is simple. Color-rich images like photos go as JPG or WebP, and graphics that need a logo or transparent background go as PNG — and that rule covers most cases. It’s also important not to upload an original much larger than what’s shown on screen. If you upload a tiny image in its giant original size, users end up downloading far more data than they’ll ever see.

Why this makes work easier for non-developers #

• You choose formats correctly. Knowing that photos and graphics suit different formats, you can cut down on mistakes that make images heavy or blurry when you upload them.
• You diagnose slow pages. Knowing that images make a screen heavy, you can look at the images first when a page is slow.
• You trim originals before uploading. Simply resizing to the screen dimensions before uploading can noticeably speed things up for users.

Wrapping up #

Today we looked at how an image is, in the end, numbers that record color, how compression is used to shrink that large size, and how each format has a different compression method and a fitting use. The keys are the rule of thumb — photos as JPG or WebP, crisp graphics as PNG — and the principle of shrinking to fit the screen.

If you’d like to know more about how images are represented in 0s and 1s, read How Computers Represent Everything in Binary; if you’re curious about the CDN and cache that deliver heavy images fast, read Cache and CDN — What “Try Clearing Your Cache” Really Means.