A quick visual guide to learn the difference between them, in plain English.
Every image format has its pros and cons. Knowing when to use which not only allows you to serve up images with better quality, it also helps with web performance and more. A picture of your cat in JPG and PNG may look the same, but there is more under the hood.
Knowing when to use which image format is a useful skill for everyone, not just the designers.
Knowing when to use which image format is a useful skill for everyone, not just the designers. The engineers will build faster products. The sales will know how to propose to their clients. The C-level executives will know what can be used as an email signature. Mrs. Williams next door will know how to store her baby pictures on her computer without having to buy a new hard drive.
The following are some of the most common image formats that you should learn about. We try to avoid using technical terms so they can be easily understood!
–
JPG: good for photographs, bad for flat colors
The good old JPG is almost everyone’s “go-to” format because it seems to work under any circumstances…except when it doesn’t! It handles images with lots of details well and provides smaller file sizes, but struggles to render flat colors the same way. For example, saving a logo in a solid color in JPG may not only look fuzzy but also likely generate a larger file size compared to GIF or some other formats. However, due to how long JPGs have been around, it is widely supported by applications and platforms. Kudos for that!
Good for
– Photographs
– Gradients
Bad for
– Flat colors, such as logos and icons
– Images that require transparency or animations
–
GIF: good for flat colors, bad for photographs
If you are one of the 90s kids, you remember the time when the worldwide web was fully occupied by GIFs, such as the Space Jam official site. Its support for transparency, animations, and the ability to render flat colors with smaller file sizes and good quality makes it still one of the most popular formats 30+ years later since invented. However, its glitchy support for images with more details and colors (like a photograph) is a big drawback.
Good for
– Flat colors, such as logos and icons
– Animated images (but watch out for the larger file size!)
– Images with mostly flat color that require transparency
Bad for
– Photographs
– Gradients
– Transparency does not work as good as a PNG
–
PNG: when in doubt, use PNG (most of the time)
PNG is versatile and can be used for your photos, logos, drawings, memes…pretty much everything. It preserves image details better than a JPG. On the other side, it also generates bigger files (in general) so think twice before you export all those travel pictures in PNG for that web gallery you have. Other superpowers of PNG include its transparency support and good flat color rendering. If you need your company logo to have a transparent background so you can place it on an image, PNG is the way to go. As it is almost safe to say when you are not sure which format to use, use PNG, do watch out for the potential bigger file size!
Good for
– Photographs
– Gradients
– Images that require transparency
Bad for
– Images intended to contain smaller file sizes
– Images require animations
(PNG was once an infamous format for emails, but unless you are sending emails to early versions of Lotus Notes users you should be fine.)
–
SVG: good for simple graphics for web
This is what the cool kids are all about in the recent years. It is often lighter and faster compared to the other type of image formats, especially when used for rendering flat icons, illustrations, logos. Besides its high performance, it also talks to CSS so the web designers can change the attribute of it or even animate it. It can also be scaled without losing any quality yet remains a smaller file size. It however doesn’t really render photographic images and is not a format most applications or platforms support. So yes for your next website, no for your new Facebook profile picure.
Good for
– Simple graphics for web, such as logos, icons, charts, and illustrations
Bad for
– Photographs or images with too many details
– Applications or platforms that do not support SVG
–
Bonus: the JPG, PNG, or GIF flowchart
Life is hard. We understand. Before that one super image format gets invented and can be used for everything, we made a flowchart for you to quickly decide on which image format to export.
Next time when you receive a blurry logo in JPG, you know what to do. Share this article with the ones in need!
