Sorry, but your instructions on how to find what you’re referring to do not provide enough information. I’ve bumped up your posting privileges. If you’d like to post the entire URL now, you can do it.
Are you referring to images contained in the carousel or an image of the carousel?
The measurements you provided the dimensions of the photo in pixels, not its resolution. Resolution is determined by how many pixels are included in a given area and is not necessarily linked to clarity. A blurry photo is a blurry photo, despite its resolution or pixel dimensions.
Why would you use an image width a height of 5304 pixels that would only be displayed at a height of 512 pixels in a web browser? All those extra pixels will just add up to a slower download.
Why did you cut out part of the image? Was this an attempt to make the image smaller? Is this cut-out part of the image for inclusion in the carousel or for another place on the website?
You’re obviously doing something wrong, but I can’t tell from what you’ve written what that might be. It also seems you’re likely a little confused about how digital images need to be prepared for websites.
You listed a fixed height — 512 pixels — for the photo. REM, which you also mentioned, is a measurement based upon the root element size of the typography used on the website. Is this a responsive website where the photos take on a size determined by the width of the browser window or are we really discussing a fixed image size with a height of 32 rems? Your CSS indicates that it’s fixed to a 32rem height but with a 100% width to the parent element. Off the top of my head, this seems a little odd since I think it will result in an image that will stretch horizontally (depending on the browser window width), but not vertically.
There’s also a class in your HTML — active — that’s a bit of a mystery since you didn’t include the CSS in your posted example. I also don’t know why that class only pertains to the first image and not the second.
If we’re really discussing a fixed height, you should resample the image in a photo editor, like Photoshop, to be exactly that width, then save it using JPEG compression to a good compromise between file size and sharpness. Upload that to the website, and it will display exactly as you saved it.
I have a feeling, though, there’s something else going on in all this that you haven’t told us because, possibly, you’re not aware of it. For example, you mentioned Bootstrap, which implies we’re not talking about fixed image sizes, but rather responsive widths that could display at larger sizes depending on the width of the client browser. It’s not likely, but we could also be talking about a server web application that uses something like a GD library to resample and compress the images once they’re uploaded. That’s not likely, but, like I said, I suspect there’s something you’re not telling us because a photo that looks good when it’s sized correctly should look exactly the same before it’s uploaded as it does once it’s uploaded and displayed by a web browser.
So, bottom line: there’s really not enough information in what you’ve written to provide an real answers — just a bunch more questions and observations. Maybe someone else can better decipher it all than I can. If you want to post that link, like I mentioned, you should be able to do that now.