How do you choose the best image formats for websites? That’s a tricky question because we have to balance two conflicting principles:
- Web pages should load fast.
- Images should look good.
Finding this balance can be challenging. How do we maintain a high-quality image, while also minimizing the file size?
We begin with context: is your image a logo? Is it a high-quality photo? Is it an illustration with only a few colors? Will it be on top of a background? What’s the display size? Etc.
There are other things to consider, such as responsive image strategies, sizing images for optimization, retina resolutions, and server-side optimizations, just to name a few. For the scope of this article, let’s focus on the basics: choosing an image format.
Here’s a chart of the most used purpose of each image format.
Which Image Format Do I Need?
This can be confusing if you have no idea where to start. So let’s break down the pros and cons of each: JPG, PNG, GIF, SVG, and the newest and most complex image format, WebP.
Ready to find the perfect image format? Let’s get started.
JPG
JPG (Joint Photographic Experts Group) was created with the compression of photographs in mind.
What is JPG used for?
It works well with photographs and graphics, especially those that have lots of gradients and blurs. JPGs aren’t usually the best option with typography or graphics with sharp edges. While you can certainly use the JPG format, you’ll likely get a much cleaner and smaller image using a PNG or GIF format.
Pros
- Best for photographs
- Works well with gradients and blurs
Cons
- Not great with typography
- Usually not best for logos
Notice the blurred background in this photograph. This composition is perfect for JPG format. Not to mention that this is a high-quality image. Using high-quality imagery allows you to add more compression with less noticeable image degradation.
If we look at the above compression preview from Optimizilla, we can see that somewhere around 40% compression, things are looking pretty good. We’ve also reduced the file size by 95%! To the untrained eye, there isn’t much difference in quality. However, as we start to increase compression, the image quality degrades from decent to awful, or what the internet calls, “Potato Quality.” You’ll have to experiment with what works best for your situation.
GIF
GIFs (Graphics Interchange Format) can have up to 256 colors. As a static image, they ‘re very similar to PNGs. Both GIFs and PNGs use an indexed palette of up to 256 colors and support transparency. You can trim a lot off the file size of a PNG or GIF by limiting the number of colors used in the final image.
What is GIF used for?
The advantage of GIFs is that they’re great for frame-based animations. You’ll notice in this GIF, there’s a limited color pallet and banding in the shadows, but if we think about context, this is still amazing and conveys a certain emotion. So in this case, 256 colors might do just fine.
Pros
- Great for frame-based animations
- Great for logos and art with a simple color pallet
- Support goes all the way back to the dawn of the internet
- Supports transparency
- Low file size when done right
- “Dithering” can be utilized to minimize pixelation
Cons
- Only 256 colors
- Not good for Photographs, especially those of hi-resolution.
- Can be a larger file-size than PNG for the same quality.
- It’s pronounced like “Gif”, with a hard G
- No you idiot, it’s pronounced like “Jif”, with a soft G.
PNG (8, 24, 32-bit)
PNG (Portable Network Graphics) is the more modern answer to the 256 color GIF. There are three types of PNGs, 8, 24, and 32 bit. With each comes trade-offs of features vs. file size.
PNG (8-bit)
8-bit PNGs typically work well for graphics with few colors, such as a logo, or typography. PNGs also supports transparency, so you can select multiple colors from the file that you want to be transparent. A commonly used technique is to make the background of a logo transparent. You’ll have to experiment with what looks best.
Pros
- Graphics with few colors, such as a logo, or typography.
- Supports transparency
- Typically a smaller file size than GIF
Cons
- Transparency can be wonky on complex backgrounds.
- Does not work well with photography.
PNG Example
The composition of this image is perfect for the PNG 8-bit format. It has very few colors, hard lines, it’s not a photograph, and needs transparency.
PNG (24-bit)
A 24-bit PNG is an RGB format image.
8-bits(R) + 8-bits(G) + 8-bits(B) = 24 bits.
If you need more than 256 colors, and you have a complex image, a 24-bit PNG can be a good choice, as it supports over 16 million colors. Think of it as a JPG with a transparency option. You can apply an index color matte as a transparency, but it’s limited to one color. If you need advanced transparency, such as an alpha channel, you can create a 32-bit PNG.
PNG (32bit)
A 32-bit PNG has all of the advantages of JPG and PNG, with alpha channel support.
8-bits(R) + 8-bits(G) + 8-bits(B) + 8(Alpha Channel) = 32 bits
You might already be wondering, “How do I create a 32-bit PNG?” Even the almighty Photoshop only has a 24-bit option.
Although Photoshop doesn’t explicitly say so, when you export a 24-bit PNG with an alpha channel, it actually creates a 32-bit PNG.
Sounds great, right… so what’s the catch? The catch is file size; 16 million colors plus an alpha channel means more data. You’ll have to decide if this is what you really need. If you do need a 32-bit PNG, there are several npm packages out there, such as imagemin, that can help with this. One of my favorite tools for compressing one-off 32-bit PNGs is TinyPng.
SVG (Scalable Vector Graphic)
What is SVG used for?
SVGs are used almost exclusively with vector based imagery such as logos, icons or illustrations. They are extremely low in file size. Their source can be external, such as an image, or the SVG code itself can be embedded in your html. You can leverage this last advantage to create complex animations with CSS and Javascript.
Pros
- Used almost exclusively with vector based imagery
- Low file size
- Capable of complex animation
- Manipulate with CSS, even media queries
- Capable of being used as src, inline, or as a sprite
- Will never pixelate at any size
- Raster images can be embedded in SVGs when needed
Cons
- Disabled by default on WordPress for security reasons
- Not good for photography
WebP
What is WebP used for?
WebP is the newest image format, created by Google in 2010. WebP supports 24-bit RGB color with an 8-bit alpha channel, basically all the features provided by JPGs and PNGs with the added bonus of reduced file size. With the appropriate compression settings, you can typically squeeze more quality at a lower file size than the other image formats. The catch is that WebP currently lacks support for all browsers. WebP isn’t supported by any version of IE and no version of Safari.
Think of WebP as an enhancement for users running supported browsers, rather than another image option. If you do use WebP, you’ll want to include a fallback image.
photo credit Robson Hatsukami Morgan
Pros
- Higher quality at a lower file size
- Supports transparency
Cons
- Disabled by default on WordPress for security reasons
- Higher quality at a lower file size
- Lack of browser support
How do I create a WebP?
A couple of popular options for creating WebP images:
Tools
We’ve talked about the why and what, but what about how to actually compress an image? I personally use Photoshop and think it’s by far the best tool for image compression. However, there are many tools that do the same thing. Here’s a list of compression tools to get you started.
- Photoshop
- PixelMator for Mac
- Sketch
- Optimizilla (Free)
Bonus! Convert Any Image to Any Format
Now you have an understanding of the tradeoffs of different image formats. Here’s a robust tool to convert any image format to another. I personally use this to convert PNGs to Base64 when I need to drop that into CSS.
Check Out Online Image Tools
Final Thoughts
Now that you’ve read about image formats, tackle your next design project with confidence. Learn by doing and don’t be afraid to experiment to see what will work best. Good luck!
Have questions? What image formats are you currently using? Tell us on Twitter!
And if this post was helpful for you, we’d love for you to share it with your colleagues!
We're building an AI-powered Product Operations Cloud, leveraging AI in almost every aspect of the software delivery lifecycle. Want to test drive it with us? Join the ProdOps party at ProdOps.ai.