PNG, JPG or SVG: which one to use?

Question

Images

What is the best image format to use on a website?
The choice consists of: PNG, JPG and SVG.

Answer 1

For photos - JPEG.
For schematic images (icons, diagrams, drawings, graphic primitives) - PNG or SVG. For complex schematic images, PNG can be more beneficial.
Also note that embedding a bitmap in SVG is possible, but pointless.

Answer 2

For svg icons, for photos - jpg, if you need transparency on the photo - png

Answer 3

Different formats for different purposes.
I'll add my opinion to the previous answer.
Let's say background. It can be simple, some kind of abstract, but which cannot be rendered with pure css. For these purposes, svg will also be an ideal choice, since it can be a couple of kilobytes with an unlimited size, while for jpg the same image can be very complex and, with the most ideal option, it can be compressed to a couple of hundred kb.
However, if the same svg background is overflowing with small elements, with a sufficiently large number of dots, then it will not be practical to use such an svg as a background, because even with a weight less than in a jpg of the same size, this svg will visually take a long time to render.
Another point, for chrome it is highly recommended to use webp, which, with the same visual quality, is significantly less in weight than jpg and png. Yes, and google loves it as its format and as a result favors it very much - just run the site through PageSpeed ​​Insights and see what it will recommend there.
If there is no webp on the site, the recommendation will be required)