With so many different web image format options available for your HTML5 and CSS3 web pages, it may seem overwhelming. But, choosing an image format is easy because each format has its own advantages and disadvantages. Take a look to find out which format is best for you:
GIF is best when you need transparency or animation. Avoid using GIF on photos, as you won't get optimal compression, and you'll lose color data.
JPG is most useful for photographic images, which are best suited for the JPG compression technique. However, keep in mind that JPG isn't suitable for images that require transparency. Text in JPG images tends to become difficult to read because of the lossy compression technique.
PNG is useful in most situations. Older browsers may have trouble with this format.
SVG is useful for images which need to be re-sized without a loss of image quality or when the image is relatively simple.
BMP and other formats should be avoided entirely. Although you can make other formats work in certain circumstances, there's no good reason to use any other image formats most of the time.