current image format of choice

[Semperfidelis]

Greetings-

I've been learning a lot about image formats, but the content is a bit dated, and was wondering what is the current popular format for web please. A quick check on caniuse.com on webp seems to show it as a good choice. Therefore, if I was to work on a site today I would go with this and SVG for my icons and drawings. I am extremely new though, and any advice would be greatly appreciated. I am wondering besides browser support, what other considerations I should make. I think image processing software, and tools and frameworks for building the site, automating the process, and hosting the content would be some of them. I did see an article on this from 2019, but I need more insight please. 

Thanks

Edited March 7, 2021 by Semperfidelis
updated with more details

[Ingolme]

MDN has a good description of image formats and what they're good for: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#supported_image_formats

Personally, I find PNG to be the most reliable format for complex images. While WebP has slightly better compression, it is not as widely supported by browsers, though all the biggest browsers support it.

SVG is good for simple shapes, since it is a vector format. It is ideal for icons, logos and similar images.

[AARRGGHHH]

I tend to lean toward PNG as well, since the compression is lossless (no data is lost).  One observation worth noting is that PNG basically assumes your visitor is using broadband (most people are), since PNG images can be too large for slow connections. 

JPG is certainly still usable, providing you choose your settings wisely.  A quality setting of 80 to 95 is usually best, less than 80 tends to produce poor results, greater than 95 is unnecessary, since it tends to increase file size without improving quality.  If you have hard edges in your image, such as text, be sure to turn subsampling OFF (sometimes called "444"). Subsampling compresses by averaging color values of neighboring pixels, if an image has hard edges, such as text on a background, the neighboring pixels may have very different color values, averaging those values will produce artifacts.  It always bothered me that Photoshop did not have a subsampling option.  I'm not an adobe fan, does anyone know if they ever added that option?