When should you use JPG, PNG, GIF, SVG or WebP as your image file types? Not only is it crucial to know when to use which format in terms of quality it also has a huge impact on how fast your website loads. Today you’ll learn about the pros and cons of using either of the most popular web-image type formats.
Before we move on I want to make an important distinction between two different image compression methods, Lossless & Lossy:
- Lossless means that you can compress an image to a smaller file size without compromising its quality.
- Lossy is the opposite. When you compress an image, it will lose some quality as a result. How much is contextual.
Alright, let’s go through each of the popular image file formats.
GIF
The GIF (Graphics Interchange Format) file format was released in 1987. Its latest release was in 1989. In spite of its age and lack of serious technical improvements over time, GIFs are more popular today than ever.
GIFs are especially popular on social media platforms, where both static and animated GIF are used to share memes. There’s also a lot of free GIF editing software available which makes it easy for regular people to quickly create their own memes and share them with their friends and followers.
But although GIFs are extremely popular, you should be very careful about when you use them. Consider the context. GIFs are most practical when used in a non-serious context, as you’ll see when you read on.
Technical facts about GIFs
- Limited colors: GIFs can display a maximum of 256 colors. In comparison, PNG and JPEG can display millions of colors. This makes GIFs a horrible choice for displaying most photography. If you make the mistake of converting a product image to a GIF (e.g. to cut down file size) your product/website will look amateurish and outdated.
- Lossless compression GIF uses lossless compression, which means that you can downscale down its resolution (and file size) without hurting the visual quality. It shares this feature with PNG and SVG. JPEG, however, does not have lossless compression.
- Small file size: compared to JPG, and especially PNG, GIFs are generally much smaller in file size, which makes them advantageous in terms of website page loading speed (performance).
- Progressive loading: you can show a lower quality version of your image first, and then higher quality when the image is fully loaded on a page. This is both practical for performance and the user experience.
- GIFS can be animated. This is by and large why GIFs are still popular, in spite of its low visual quality.
- Browser compatibility: static GIFs are backward-compatible all the way back to IE6. Animated GIFs, are compatibility from IE9 and up.
Biggest takeaway:
Don’t use GIFs if maintaining the original image or video quality is important.
JPG, PNG, SVG, and WebP are much better suited for displaying high-quality images. But of course, those file formats come with their own pros and cons as you’ll see soon.
Should you use GIFs for short videos?
Animated GIF how-tos are popular on many platforms that deal with everything from illustrating exercise technique, to chopping vegetables. First We Feast is a great example of someone who effectively uses GIFs for quick illustrations.
We used to use GIFs to illustrate quick how-to concepts here at TechStacker, because it’s fast and effective. Now we’re using WebM, which is better quality, faster, and easier to control (play, pause, loop) than GIFs.
While GIFs have been a solid lightweight alternative to e.g. MP4 for short video clips, I suggest that looking forward, you’ll benefit more from leveraging the powerful WebM video/audio format for animations.
I previously covered why WebM is superior to GIFs for animations.
What about using GIFs for small logos?
I’ve read several articles within the last couple of years where they recommend using GIFs for small graphics like icons. I don’t understand this advice. It might have been true 5+ years ago, but not today.
GIFs are inferior to SVGs. Not just when comparing file sizes. SVGs are better in every technical aspect, from color depth to scalability.
GIF is a raster format. If you zoom in on it or try to increase itS resolution, it becomes pixelated. SVGs are infinitely scalable. Don’t use GIFs for graphics. Use SVG for logos, icons etc.
Unless you need to support browsers below IE9.
But even if you need to support dinosaur browsers, you can always use a fallback which serves an alternative file format for old browsers. We use Cloudinary to host most of our media files. They, among other things, can automate serving different file formats for different browsers (fallback), so you don’t even have to write any code yourself.
JPEG/JPG
JPEG (Joint Photographic Experts Group) often written as JPG, is a lossy compression format, initially released in 1992. JPEG is commonly used in graphics applications like Photoshop and Illustration. JPEG is the standard file format for most digital cameras.
Technical facts about JPEGs
- Colors JPEG, unlike GIFs, have millions of colors, which make them much better suited for pictures and graphics than GIFs.
- Lossy compression: lossy means that JPG loses quality when you compress it to reduce its file size. How much quality it loses, depends on a myriad of factors related to the type of image you’re compressing.
- File size JPEGs are significantly smaller than their PNG counterparts when you compare JPG and PNG of the same resolution.
- Still: JPEG is a still image format, which means that unlike e.g. GIFs and SVGs, JPEG has no support for animation.
- Browser compatibility: JPEG is compatible with all modern browsers, and all the way back to IE6.
In other words:
You should only use JPEG over PNG if having a smaller file size is more important than image quality.
JPEG can be lossless. There’s a different format called JPG-2000, but it’s not widely adopted, and the vast majority of JPEGs on the Internet are lossy.
While JPEGs inevitably lose some image quality during compression, sometimes it’s worth it, depending on what you use the image for.
If you have a big hero image with a dark overlay and text on top, you can probably get away with using a well-compressed JPEG over a PNG and save tons page loading speed.
PNG
PNG (Portable Network Graphics) is a raster graphics format initially released in 1996. PNG supports lossless compression, transparency, and more than 16 million colors. This makes it a preferred format when maintaining proper image quality is important.
There are two PNG formats, PNG-8 & PNG-24, let’s break down the technical facts of both.
Technical facts about PNG-8
- Limited colors: PNG-8 supports only 256 colors, and is similar to GIFs. But PNG-8 comes at a smaller file size than GIFs.
- Animation: unlike GIFs, PNG-8 has poor animation support.
Technical facts about PNG-24
- Rich colors: PNG-24 supports more than 16 million colors. This makes PNG-24 similar to JPEG in terms of color depth.
- Larger file sizes: the PNG-24 format is significantly larger than JPEG.
PNG-8 and PNG-24 both support transparency, like GIFs, but at a higher quality through a so-called “alpha channel”, which means that (unlike GIFs) it can have real transparency.
Biggest takeaway:
Use PNG(24) over JPEG if you need to display the highest image quality possible at any level of size/zoom.
While PNG has more options than JPEG, it does come at a price: a significantly bigger average file size. This quality vs. bandwidth trade-off is one you need to make based on the specific context of your project.
It’s pretty simple, actually. If your images are “decorated” to any significant degree, e.g. with text (like the hero background example from the JPEG section) then it probably makes more sense to use JPEG and save the excess bandwidth for both you, and your users. If however, you’re displaying product items from a jewelry store, then you probably want to use PNG.
SVG
SVG (Scalable Vector Graphics) is a vector graphic file format, based on XML. SVG can be used for static graphics and animations. SVGs are popularly used instead of JPEG, GIF and PNG images for icons, logos, cartoons and other graphics.
Technical SVG Facts:
- Scalability: SVGs are (in theory) infinitely scalable. You can make them as big or as small as you want, without compromising quality.
- File size: SVGs are on average much smaller than GIF, JPEG, PNG, even at extremely high resolutions.
- Animations: just like GIFs, SVG support animations, but with much more flexibility and incomparably higher quality.
- Codable: SVGs can be manipulated directly with HTML, CSS, and JavaScript (e.g. for animations).
- Graphics only: SVG is a vector-graphic format. Unlike PNG, JPEG, and GIF, they cannot be used for photography.
Biggest SVG takeaway:
If your current graphics (not pictures ) are JPG, PNG, or GIF then you should replace it with SVG. Smaller file size, higher quality.
Using SVG in place of most other formats, will massively reduce the overall page load on your website, and therefore the user experience. It will reduce your server/file hosting bill as well.
What’s not to like?
WebP
WebP is a modern image format initially released in 2007 by Google. WebP gives you superior lossless and lossy image compression, compared to any of the other popular formats.
Wait, why did I wait to tell you this, until the last section of this guide?
Let’s take a look at the WebP facts, then it’ll make sense.
Technical WebP facts:
- Compression: WebP can be compressed through both lossless and lossy compression.
- File size: WebP can reduce JPEG files up to 34% and PNG images up to 45%.
- WebP can be used on both graphics and photography.
- Browser support: Only Chrome and Opera fully support WebP.
In spite of only Chrome and Opera supporting WebP, that still accounts for around 70% of the entire Internet. But that’s of course, still pretty far from being 100%, hence why I didn’t say “just use WebP” at the beginning of this article.
Luckily you can still use WebP on all your projects, as long as you include a fallback. I recently published a more detailed article about that and the many benefits of using WebP instead of JPG and PNG.
