My 2 cents.
JPGs file size are smaller than PNG, for a given image dimension. That said, JPG is lossy compression and PNG isn’t.
Plus, PNG has the added advantage of having transparency capability (alpha channel)… again, at an increase in file size.
If you don’t need transparency, you can use JPG format.
If you really want optimized images, read on…
Now, on to the matter of file sizes… the problem with Bootstrap img, img-responsive classes is they just resize the photo on the display device. But the original file size is still downloaded to the user, regardless of device/connection type. Thus, a 300K image downloaded to the desktop and displayed at 1200px will still be a 300K download on a mobile device displayed on 320px.
The way I personally deal with this issue is using an ImageResizing library. But this is for .NET server
There may be similar solutions for nodejs, or php servers.
Basically, I can append a width parameter on my JPG/PNG files and the server will serve a resized version of the photo.
Example: The original PNG file is 5MB large. Note the URL of the image file.
But using the same image, I can tell the web server (in my html code, to serve a 300px wide of the same image), like so:
And the server will send to the device, a smaller version of the same image automatically. So for a desktop, I can instruct the server to send an 800px or 1200px version, or whatever nnn pixel version I want. For example, in my admin program, I would use a small ?width=50 for thumbnail versions to be shown in the admin.