fix: Images on iOS are cropped weird

[Soxasora]

Description

Fixes #1793

My hypothesis is that iOS gives up on decoding and thus loading the image if during asynchronous decoding it runs out of resources, indeed on reload the problem might be resolved (essentially retrying decoding).

If we force synchronous decoding, iOS gives this job more priority by using the main thread, potentially fixing weird artifacts and image misplacement.

Screenshots

Additional Context

In a no-cache dev scenario this problem really doesn't exist because after the page is fully loaded, images start loading one by one.

Another possible fix, if this fails, could be to update CSS after all the images are loaded, much like we already do for videos as this fixes it in prod.

There's also another fix that implies reducing the thumbnail resolution to avoid running out of iOS resources

Previously drafted to explore new solutions

Checklist

Are your changes backwards compatible? Please answer below:
Yes

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
4, issue doesn't present itself in dev

For frontend changes: Tested on mobile, light and dark mode? Please answer below:
n/a

Did you introduce any new environment variables? If so, call them out explicitly here:
No

[huumn]

Did you explore decode() at all? That came up when I was researching the decode attribute. According to MDN, which is occasionally wrong, it appears that safari decodes sync by default (most of the time).

[Soxasora]

Ah, yes I drafted the PR earlier to explore better solutions but I didn't deep-dive into decode(), thank you.

it appears that safari decodes sync by default (most of the time)

I was trying with decoding attribute mainly for that, like MDN stated Safari can choose a decoding method opaquely.
But we don't live by hypotheses, I'll redraft and get to it, thanks k00b!

edit: this is the same issue of videos not being loaded, seems that Safari needs redrawing on imgproxied images

[Soxasora]

Loading the image after successful decoding should potentially fix this issue. We're still in a blind scenario but it's still good practice to do so anyway. Before claiming it as ready for review I'll try reproducing with caching

edit: same results outside nextjs dev, images load correctly so I think we can safely try it

[huumn]

Yep, I've confirmed there are no regressions. Let's give a shot.