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 the 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 followings 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!
JPG doesn’t render flat colors well compared to GIF at the right. Unwanted noise is generated mainly around the edge of the colors.
JPG works great with photographs. More noise can be seen when the same photo is exported as a GIF at the right.
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.
GIF renders flat colors better compared to JPG. It has less noise and crispier edges than the JPG at the right.
GIF’s animation ability allows it to do some amazing things, such as creating an animated photograph (some called it a “cinemagraph”)
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!
PNG preserves more details than JPG. Look at that smoother gradient in the sky on the PNG!
Even though PNG and GIF both support transparency, PNG handles it much better. Rough edges can be seen in the GIF at the right.
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.
SVG allows an image to be zoomed in without losing quality such as with a PNG.
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!
