Types of Images

Raster

The raster image is defined by the arrangement of pixels in a grid with exactly what color the pixel should be.
Examples: PNG(.png), JPEG(.jpg), GIF (.gif)

The vector image is defined using algorithms with shape and path definitions that can be used to render the image on-screen written in a similar markup fashion.
Example: SVG (.svg)

JPEG or JPG (Joint Photographic Experts Group)
- Best for Photographs
- Can be compressed
  - lossy
  - lossless
- do not support transparent background
PNG (Portable Networks Graphics)
- Used for web graphics, like logo, illustration
- inherently lossless and hence not compressed much
- bigger file size
- support transparent background
GIF (Graphics Interchange Format)
- used for animation
- inherently lossless
- takes up large space and not recommended to be used
- prefer PNG for still image and WebP for animation
SVG (Scalable Vector Graphics)
- Used for logos, icons, simple graphics
- scale well with increase in size
- small size
WebP (Web Picture format)
- Excellent choice for still and animated images
- Can be compressed
  - lossy
  - lossless
- developed by Google
- based on WebM video format
- better compression than JPEG/PNG
- not well supported everywhere

TIFF (Tagged Image File)
- Used in photography as source/backup image
- lossless compression
- generally large and not portable
- Not good for web/online
BMP (Bitmap File)
ICO (Microsoft Icon)
AVIF (AV1 Image File Format)
- based on AV1 format
- open and royalty free