I just checked and see the images have updated here. The larger images certainly are sharper as Wayan suggested.
I would suggest that you consider making a set of picture groups based on your break-point spans. You can then change the url for each of the background break-point spans targeting the lower break-point which will give you the same quality but a more nimble download size.
For instance if you have a break-point span from 640 px to 1080 px you would make the image 1080 px and then go to the background image url and change the link to that smaller sized picture in your resources. This way you serve background pictures to devices that will only require that max size for the screen.
The only problem with doing this is that most mobile devices now are either retina or hd display and require more pixels to fill the area of a normal sized picture. The rule seems to be to double the pixel size of the image. The correct way to serve pictures to retina and hd seems to be to provide both a regular and a retina hd 2x or 3x version. I have not figured out a way to do this yet....has anyone ?
Bootstrap 5 CSS Grid.