Dun dun dun… here we are, at the battle of the image formats!
When you’re choosing an image format for your website or communications, you should know that there are some key differences between them. Ignorance might be bliss, but it can also cost you quality, memory, and page loading speed. This isn’t something you should ignore.
There’s no single “best” image format, but there are certain formats that will be more appropriate than others for the purpose you need. We’ll walk you through what you need to know:
See also: DAM solution for your business – Pics.io
1. The Possible Image Formats
There are lots of image formats out there, but here we’ll talk about some of the most common ones: JPGs, PNGs, and GIFs. They all came onto the image format scene within a few years of each other, and they continue to prove their worth today. If you’re using a basic image editor or creator on your computer, it’ll likely default to one of these formats.
JPG
The good old JPG file, also known as a JPEG or Joint Photographic Experts Group file, is a compressed type of image that works well in most scenarios. It’s great at saving space while keeping almost the same look as an original image, and it’s been around for almost 30 years now.
The excellent compression of a JPG file gives it the ability to save you some crucial page load time on your webpage. This is essential for building user satisfaction and user engagement. If you’re using images as part of an article, a long page load time could turn users off from reading the article altogether.
PNG
The PNG format, or Portable Network Graphics format, has a lot going for it. It has the capacity for lots of colors, great quality (more on that later), and even transparency.
Let’s say you want to add a picture of a star on your website, but you don’t want any white space to look odd against your page’s blue background. If you use a PNG, you can essentially “cut out” the unwanted parts of the image! It’s kind of like the difference between drawing a star on a square piece of paper and being able to cut around the edges of that star.
When you need an irregular shape, like a company logo, PNGs are the way to go. This way, you can add it easily to whatever kind of background you want.
The PNG fan club actually has a funny rivalry with GIFs. For example, Greg Roelofs, one of the original designers of the PNG, maintains a website where he says things like “Unofficially [PNG’s] acronym stands for ‘PNG’s Not GIF.'”
GIF
Whether you pronounce it like the peanut butter brand or keep the hard “g” from “graphics”, you can’t escape the charm of the graphics interchange format. These have changed the way we react to things online and convey super-specific emotions. The magic lies in the animation.
You might be surprised to know that GIFs can be stationary pictures as well. They don’t have to be animations. The thing is, the animations are their main appeal, and if you’re looking for a still image, you might be better off with a JPG or PNG anyway.
2. Quality
When you need special tricks, like animation or transparency, it’s easy to decide which image format to use. But when you just need a rectangular image that doesn’t move, your biggest concern might be something like the quality of the picture. Here’s what to consider:
Lossy vs. Lossless
One thing to know about JPG files is that they involve lossy compression. What does this mean?
When you convert other files to JPG files (for example, you can find out how to convert PDF to JPG here: https://setapp.com/how-to/convert-pdf-to-jpg), you’re compressing the file. This is great when you need to save space while maintaining a nice image. You do lose quality, but in most cases, it won’t be noticeable.
Sometimes, though, it is noticeable. If you’re uploading an image with text on it, like an infographic or cartoon, you might find that JPG versions make the text too fuzzy. And every time you edit and save a JPG, you’ll lower the quality more and more.
PNG files, on the other hand, use lossless compression. This means that when you save something as a PNG, you preserve the same quality as the original image. If you need as much definition as possible, like for an online photography portfolio, you’ll want to go with a PNG over a JPG.
Color Selection
GIF files are actually lossless as well, meaning you won’t lose quality when you save something as a GIF. So then, why do they look grainy sometimes?
One reason is the smoothness of the animation. When you’re creating or saving a GIF, you likely won’t need movie-quality smoothness, and so you’ll end up with fewer frames per second than what you’re used to in TV and film.
The other reason is that, though GIFs are lossless files, they might look lossy due to their limited color selection. At most, a standard GIF file can include 256 colors. If you’ve got gradients of any kind in your image (including shading), the file will have to skip some colors in between others, creating a grainy look.
If you really wanted, you could separate a GIF into separate blocks to get 256 possible colors for each block, giving you a wider range of colors throughout the complete image. But this will make your file size larger as well, and in most cases, it won’t be worth the effort.
For a visibly high-quality digital image format, a JPG will usually be better than a GIF. Even though JPGs are lossy, this usually looks better than the limited color scheme of GIFs.
3. File Size
Because JPGs are lossy files, they’ll often be smaller in file size than other image formats. This means they’ll take up less space on your computer, and they’ll be less likely to run into loading problems on webpages. Not that a “smaller file size” here doesn’t mean the image itself is smaller—it just means the file uses less memory.
If you’re sending an image in an email, you might be better off using a JPG than a PNG or GIF. Email messages have limits on how big a file you can send, and you might not want to take up too much space on the recipient’s computer anyway, in case they need to download the file.
PNGs are higher-quality than JPGs a lot of the time, but the tradeoff is in the file size. Both image file formats are compression types, but JPGs focus more on the actual compression, while PNGs focus on preserving the quality of the image.
Choose Wisely
Taking the time to learn the differences between the different file formats means you’re already miles ahead of lots of people who upload random file types to webpages and emails. Armed with the knowledge of compression styles and file size, you’ll be able to decide which image format to use for which occasion.
And for more essential design tips, check out the rest of our blog!
