In this Article I'll try to explain the differences and when to use each (and when not to). I won’t go into the history of the images and why we have what we have but I will try to add a little of this to the article where applicable.
Types
There are 2 types of image we can use on the web, bitmap and vector. These are drawn in different ways and have vastly different reasons for use.
Bitmap
A bitmap image has a value for every pixel on the image. If you imagine a piece of paper divided into squares with each square coloured, then that is how a bitmap works. Depending on the format of image each pixel will have a value for red, green and blue and possibly an alpha value for transparency (see the Article on Colours of the Web for more information). For lots of detail where every pixel needs a colour focus and a set size, like photographs, bitmap images are great. However, for images with lots of uniform colour like a logo or icon or need to resize on different screens bitmap is not the choice and a vector is usually the choice.
Adobe Photoshop and Microsoft Paint work with Bitmaps.
Vector
A vector image is plotted like a graph and filled in with colour. If we plot a point at (0,0), then a second point at (0,10) and a third point at (10,0) we create a triangle. Add a flood fill at (3,3) and you colour the triangle.
The numbers for plotting are arbitrary so they could be mm, cm, meters or inches but are more like percentages of the canvas they are drawn on. This will mean vectors are perfect for resizing as they will not loose any quality no matter how large or small. However, they are more taxing to the device as they must be ‘drawn’, so the higher the quality, the more time it takes to ‘render’ the image.
Adobe Illustrator and Microsoft PowerPoint work with Vectors.
Formats
There are 10 formats of image we can use on the web, but some of these are not fully supported or have duplication in other formats, so are just no real use on the web (not covered here: apng, bmp, ico & tiff). Let’s get started with the formats.
AVIF
Can use full colour with alpha transparency. This format is a bitmap. Animation is possible, but at the time of writing support in not widespread enough to use on the web. This format offers the best compression, but it’s the least supported format both in terms of creation tools and browser support. Probably the best format going forwards but would use WebP at the time of writing.
Full name: AV1 Image File Format
Extension(s): .avif
GIF
Can use up to 256 colours with 1 colour for transparency. There is no alpha transparency (pixel partially transparent) so can appear jagged with curves and transparency. This format is a bitmap. We can have animation with gifs. This is an old format and not best for anything these days, except it is the most supported in terms of creation tools for animation. However, a video encoder may be the best choice animation. This is the choice for small animations.
Full name: Graphics Interchange Format
Extension(s): .gif
JPG
Can use full colour but there is no transparency available. This format is a bitmap. This is an older format and can produce great images, but as the image is compressed the loss of quality is stark. Using PNG or WebP is preferable to JPG for higher quality at smaller sizes.
Full name: Joint Photographic Expert Group image
Extension(s): .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG
Can use full colour and alpha transparency (pixel partially transparent) is available. This format is a bitmap. Can use animations in the form of apng which is supported but for small, animations an animated svg is a better choice and for video we would use a video format. PNG comes in a few formats, for the web PNG32 is comparable to jpg with full colour and PNG8 is comparable to GIF with 256 colours (both with alpha transparency) For static images WebP is the more useful choice.
Full name: Portable Network Graphics
Extension(s): .png
SVG
Can use full colour and alpha transparency (pixel partially transparent) is available. This is the only format we can safely use on the web that is Vector based. We can animate an SVG using something like SVGator or Adobe Animate. SVG is widely supported at the time of writing. At every size the SVG image will remain crisp and will loose no quality or gain size. However, anything with detail will cause the image to be VERY large.
Full name: Scalable Vector Graphics
Extension(s): .svg
As a test I output Garden Image as an SVG high quality and it was 17.5Mb, that's around 60 times larger than the WebP with a little less quality, I was able to out put a low quality version, but at nearly 3Mb I've translated it to WebP so you can see the quality below.
WebP
Can use full colour and alpha transparency (pixel partially transparent) is available. This format is a bitmap. This format does support animation, but the support is not as widespread as Animated GIF. WebP is now widespread in support and is best for Photographs and images with fading transparency that have a large amount of detail.
Full name: Web Picture format
Extension(s): .webp
Summary
For small animations, an animated GIF (or Animated SVG where transparency is needed) is best, for any detailed images like photography, Webp is best. For static images without much detail or colour like logos or cartoon (vector) an SVG is the best.