The million dollar question is: “Which image format is the ultimate solution for web usage?”. And the answer is… well, it depends. There’s no ultimate and common image format to meet all the needs when using it on the Web. Because it depends on where and how it will be used and what you want from the image: the quality or file size.

This is a common confuse for designers [especially for the beginners]. So today I’ve decided to describe those 3 most popular formats and share my knowledge with you.

PNG [Portable Network Graphics]

Best used for: icons, buttons and other website elements
Supports: transparency, 256 colors
Animation: no
Compression: on-demand, depending on the amount of colors

JPEG/JPG [Joint Photographic Experts Group]

Best used for: photos, images with many details
Supports: 16 million colors
Animation: no
Compression: gets rid of details that a human eye doesn’t actually perceive

GIF [Graphics Interchange Format]

Best used for: animation, buttons, icons, tiny web elements
Supports: transparency, 256 colors
Animation: yes
Compression: on-demand, depending on the amount of colors

I guess the only difference between GIF and PNG is animation. I use GIF only for animation; PNG – my favorite for the site and JPEG – for screenshots, photos, big images. Below, you can see the differences in file size:

Even the screenshot above is in PNG. Because when I chose JPEG at maximum quality it made 243KB, so I chose PNG-24 – almost the same quality at lower filesize.