high-quality images set to fill are appearing pixelated

I have set all of my images to "fill" so that they appear as large as posisble when viewed on mobile devices and so they align nicely on my pages. They are high-quality large images and they look great when in editing mode. They also look great on mobile devices. But when I've exited editing mode and I view the website normally in a browser on my desktop - they look pixelated. I've tried using JPGs and PNGs and haven't seen any difference. I'm attaching screenshots to show the difference of looking at the website normally, versus in editing mode. If I switch to the mode to "fit" instead of "fill", I don't see this issue, but then the images all look tiny and cropped on mobile devices and they don't line up nicely. Does anyone know a way around this issue?