This post is largely based on my opinion and personal experience.
There will be many use cases I’ve missed out, but here are a few of them.
An image is an artifact that depicts visual perception, such as a photograph or other two-dimensional picture, that resembles a subject—usually, a physical object—and thus provides a depiction of it. In the context of signal processing, an image is a distributed amplitude of color.
JPG/JPEG
- JPEG or JPG (/ˈdʒeɪpɛɡ/ JAY-peg) is a commonly used method of lossy compression for digital images, particularly for those images produced by digital photography. …
- The term “JPEG” is an initialism/acronym for the Joint Photographic Experts Group, which created the standard in 1992.
Useful when displaying detailed photographs at a small size like thumbnails.
Nowadays l’d always use PNG for photos, as they have lossless compression and almost identical file size to JPG.
PNG
Portable Network Graphics is a raster graphics file format that supports lossless data compression. PNG was developed as an improved, non-patented replacement for Graphics Interchange Format. PNG supports palette-based images, grayscale images, and full-color non-palette-based RGB or RGBA images.
The “Go To” for any type of image but primarily drawings, logos, text and iconics.
GIF
The Graphics Interchange Format is a bitmap image format that was developed by a team at the online services provider CompuServe led by American computer scientist Steve Wilhite on 15 June 1987.
For dead simple animations, using CSS or SVG for this has been known to glitch.
ICO
The ICO file format is an image file format for computer icons in Microsoft Windows. ICO files contain one or more small images at multiple sizes and color depths, such that they may be scaled appropriately.
Useful for your websites fav icon with lightning fast loading times and transparency.
There are free tools which convert an existing image for you.
SVG
Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium in 1999. SVG images and their behaviors are defined in XML text files.
For images made from simple shapes, additionally they can be styled with CSS.
WEBP
WebP is an image format employing both lossy and lossless compression, and supports animation and alpha transparency. Developed by Google, it is designed to create files that are smaller for the same quality, or of higher quality for the same size, than JPEG, PNG, and GIF image formats.
By Google, It offers all benefits of other types but with 10% smaller file size.
Unfortunately it’s still not widely supported in all browsers so don’t recommend using it yet.
Avoid
BMP -Just no, please guys
TIFF – Pointless, same as PNG
*Only my opinion
