Image becomes super blurry once published

Design help General
1

Hi

I am having some trouble with images becoming very blurry once published to the staging site. As an example, I have uploaded a 2x image which looks nice and crisp in the designer:

Screen Shot 2020-07-15 at 2.25.11 PM
Screen Shot 2020-07-15 at 2.25.11 PM3360×1464 479 KB

But when I publish and preview the same image on the staging site, it looks very blurry:

Screen Shot 2020-07-15 at 2.26.02 PM
Screen Shot 2020-07-15 at 2.26.02 PM3358×1520 408 KB

I can’t tell why this is happening, the image is uploaded at 2x size in the CMS. The image itself is an inline image positioned to cover a grid area (as opposed to a background image for the grid area div) so I can take advantage of Webflows src set and optimise images responsively. Any help would be amazing as I can’t find any help on other forum posts or the website.

Cheers!

EDIT 1: If it helps I am viewing both of these on the same device, a 2019 15" Macbook Pro.

Here is my site Read-Only: https://preview.webflow.com/preview/make-studios-au-wip?utm_medium=preview_link&utm_source=designer&utm_content=make-studios-au-wip&preview=b573744b0f199075a4a3e01e3fa4b5d7&pageId=5efab73edffa7bc575cc3a49&itemId=5efbeaecfa7703f9c90f27a8&mode=preview