Images loaded in with Javascript pagination are low resolution (Safari only)

I’ve been having a lot of problems with my site trying to incorporate a better pagination experience. I’m currently trying out 2 approaches; infinite scroll and load more:

Originally, both of these methods were causing issues in Safari when loading in images past page 1, and you can read up on my original problem in the seperate forum post: CMS images not loading after page 1 (Safari only) - Infinite scroll & load more issue

From what I can tell, the issue with Safari was something to do with not having an explicit height set for the images or image container (setting them to Auto or 100% and letting the width determine the height). Eventually I figured out a way around this issue by forcing the height of images – setting the container bottom padding to 75% and setting the img itself to absolute. Luckily all my images are the same aspect ratio so this works responsively. However this has caused a new issue!

For some reason, now when images load in (past page 1), they are loading in at a lower resolution. It’s not consistent, one might be a “p-500” version of an image (the majority of cases) while another might be a “p-1080” version. Maybe something to do with the image file size? Similar to before, this is only happening in Safari (Mac and iOS), Chrome for Mac is fine. This is also happening with both implementations I am trying. You can test out both versions from the links below:

Infinite scroll:
Load more:

With the infinite scroll approach in particular, you can see how when you refresh a “page”, the images are back to their proper resolution. For instance here is the same image being loaded first with javascript, and then once the page is refreshed:

My read-only project:

Sorry for the long post, this problem has been causing me grief and I’m trying to include as much info as I can. I am reaching the limit of 100 CMS items loaded at once (I have currently disabled pagination on the public home page) and so if I can’t fix this issue soon, I will either need to opt for a subpar pagination experience or live with the fact that Safari users will be seeing blurry low resolutions images :pensive: