Nowadays, the images on the web come in many different formats, which was not the case years ago. After decades of JPEG’s unrivaled dominance, in recent years, we witnessed the arrival of new layouts that challenged JPEG’s top position. Some of these formats not only became significant players among web browsers but also grew as a vital part of mobile operating systems.

In this article, we are going to introduce you to the various image formats you need to pay attention to in 2020. By breaking down the options, we aim to help you gather a clear understanding of which image formats are best to choose for the web as well as how to make the right selection.

Let’s take a look!

JPEG

Coined in 1986, the term JPEG stands for Joint Photographic Experts Group, and it possibly is the most common photo format used on the web.

Usually, a jpg file is used for web photos as they can easily be loaded on a page due to their creation of smaller files. The strongest sides of this image layout are that JPEG is, in fact, highly compatible and can display millions of colors.

On the opposite hand, because of the compression, JPEG photos endure a quality loss, which makes the format not recommended in every possible scenario. For instance, using JPEG format is not best when used for photos with fewer colors like simple laptop-generated graphics or other interface screenshots. Because of the tendency to look pixelated, JPEG files are bad for logos and line drawings as well.

PNG

Nearly as popular as JPEGs, the PNG image format is another classic that does not seem to go away any time soon. So, feel free to embrace its usage in the upcoming 2020 as well.

The term, a shortcut for Portable Network Graphics, introduces a photo layout that supports millions of colors, uses lossless compression and features a transparent background. Just like JPEG, the PNG files also face a variety of advantages and drawbacks that ultimately determine the frequency of their use.

Unlike JPEG, PNG photos do have a better resolution due to the lossless compression we already mentioned. This, however, creates much larger files than the JPEG ones, which makes the photo format not so highly adaptable for web photographs. Contrary to this, PNG is a fantastic option for images with text, icons, and logos.

GIF

Even if you are not familiar with web image formats, the chances that you will know a thing or two about GIFs are very high.

Needless to say, GIF is a format that is nothing like the two image layouts we talked about so far. It stands for Graphics Interchange Format, indicating its specific use cases.

One of the most amazing things about this photo format is that it allows showcasing animations. Although there are static GIF images, the majority of people use this layout to create animations.

Both JPEG and PNG obviously do not support animations, which makes GIF the only useful format for this purpose. Just like PNGs, the GIF files are available for optimization but support only 256 colors. While this characteristic makes GIF a very poor choice for displaying complex photos, it makes it super useful for line drawings, icons, and logos.

WebP

Continuing with one of the most modern and thriving image formats, WebP is developed by Google in 2010, and it allows developers to create richer yet smaller pictures that make a faster web.

WebP, pronounced as ‘Weppy’, due to being developed by Google, is a format specifically designed to be used on the web itself. For the Google images, the layout proves superior lossy and lossless compression. Such a feature allows the retainment of the original photos’ quality while reducing the file size. Compared to JPEG, WebP’s lossy files are 25-34% smaller. In comparison to PNG files, on the other hand, WebP’s lossless photos are 26% smaller and do not jeopardize the quality. From this, we can come to the conclusion that WebP, in fact, takes the best parts of the lossless PNG format and the lossy JPEG format. As a result, WebP layout is highly adopted when dealing with translucent pictures, and a number of graphical photos. Currently, the format is supported in both, Opera and Chrome browser.

Takeaway

When it comes to image format types to use in 2020, these are the few robust options you should consider. Our best suggestion, before picking the layout, is to decide on the kind of photos you need as well as their quality. Different formats deliver different results, so knowing the specifics of the files you need will help you easily make the right selection.

About the Author

author photo

Mirko Humbert

Mirko Humbert is the editor-in-chief and main author of Designer Daily and Typography Daily. He is also a graphic designer and the founder of WP Expert.