Take few examples:

Full size image: The problem for that is it overflow when the screen size is smaller than the image size. (BAD)
100%: The problem for that is when screen size is larger than image size, it blurs the image. (BAD)
max- 100%: This is a good way, it ensure image is responsive and when the screen size is lareger it won't blur the image. (GOOD)
```
img {
    max-width: 100%;
}
```
Two images with 50% width: (OK)
Tow iamges with 50% width and margin: (GOOD), use calc() to help you

img:last-of-type {
    margin-right: 0;
}

img {
    margin-right: 10px;
    max-width: 426px;
    width: calc((100% - 10px)/2);
}

Raster and Vector

Raster: means png image.

Vecctor: means svg image (BETTER). Because it scales without quality degradation.

Check you page speed: