Should i use png or gif

I set the quality to 70 to make it easier to show you what I mean. If you look closely at the image, you should see that the edges around the text and that blue shape are blurred. So where does JPG fit in on a website? Photos, plain and simple.

Want a big background photo for the website? Photos of your products on display? Shots from your yearly camping trip? And that brings us to PNG. The way it works is actually somewhat similar to the way the GIF format works. In fact, the old PNG-8 variant is limited to colors, but people hardly use that anymore.

The format we most typically use is called PNG, and it supports up to 16 million colors, meaning that it acts as a lossless format. No detail is lost. There is built-in file compression. Have a look at the PNG version of my very simple graphic from earlier:. However, this is true only for the most minimalist of images, with solid colors and simple shapes. That photo of Gary, the pretty chill donkey? Its PNG version weighs in at 2. As a bonus, PNG supports transparency, which means you can take a PNG image with no background, and overlay it on any kind of background you like.

PNG, however, does it better. I then placed those images on another, darker background to show you how each format handles transparency:. As you can see, the transparency provided by the GIF format leaves the shapes with rather jagged edges. PNG wins, here. On websites, PNG is typically used for things like logos, icons, and generally very simple graphics. Each has its own history and way of doing things.

The information in this article barely scratches the surface, and each format on its own could easily fill a book or three. The three formats are also supported across all major browsers Chrome, Firefox, Edge, Safari and the vast majority of less well-known browsers. 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. 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! 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! 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. 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.

Hence it is desirable, that the background of these logos and icons is made transparent so that a single image can be used over multiple background variations. PNG images support transparency in two ways — inserting an alpha channel that allows partial transparency or by declaring a single colour as transparent index transparency.

Partial transparency makes the edges blend smoothly into the background. GIF images support transparency by declaring a single colour in the colour palette as transparent index transparency.

Because of absence of partial transparency, the edges specially rounded or too-detailed edges get a poor jagged effect. Though this can be solved to some extent using dithering, with improved PNG support, GIF is unsuitable for images with transparent backgrounds.

There is a significant difference in the number of colours that can be supported by these 3 formats. JPEG images can support around 16 million colours. This is what makes them suitable for storing images of natural scenes. Use PNG8 for simple shapes with fewer colours and PNG24 for high quality, complex logos and shapes with rounded corners on a transparent background. GIF images are limited to colours. If index transparency is used, then one of these colours is assigned as transparent and the remaining are used for other colours.

Animation, in this case, refers to any change or movement in the image. Of these 3 formats, only GIF supports animation. This capability makes GIF format suitable for delivering engaging ads and banners.

Of late, with the advent of companies Tumblr , 9Gag , Giphy etc. To summarise once again, use JPEG format for all images that contain a natural scene or photograph where variation in colour and intensity is smooth.