Which is better for svg or png layout?

Question

User interface

Can you please tell me what is the correct way to use an HTML page to insert small images?
I know that there are many image formats. But I want the pictures to take up little space when loading the page and display correctly if I suddenly need to scale this picture.
What is the difference between svg and png formats?

Answer 1

There is no difference for layout, but for optimization and for a beautiful picture, it is better to use svg ( sprite.svg ) for icons, and for pictures with webp / png alpha channels, and if without then webp / jpg

Answer 2

What is a vector is svg, what is graphics is png or jpeg. In addition, set up a bundler, it will embed svg directly into the page if necessary and optimize graphics.