fix: use correct width/height for preview images, scale by dpr

[rexxars]

Description

Recently we changed the default previews to be a bit smaller (35px vs 40px). The thumbnail image that we are fetching is however still 80px, which creates a slightly unclear thumbnail when scaled down, since it's not a factor of 2 larger.

This changes the dimensions to 35 pixels which is the actually correct size, and passes a dpr property to the image URL library based on what the device reports as it's DPR (through the window.devicePixelRatio property, rounded down and capped at 3).

This makes the thumbnails clearer on regular screens (because the size is correct - 35px vs 40px) and clearer on high-DPI monitors such as Mac retina displays and mobile phone displays.

Current (1 DPR display):

With this change (1 DPR display):

What to review

• Does the change in default media size have any side-effects that I have not accounted for?
• Does the (slightly) added complexity make sense?

Notes for release

• Make preview images clearer, especially on high-DPI devices

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

perf-studio – ./

🔍 Inspect: https://vercel.com/sanity-io/perf-studio/CUdPRgurWVBrqyCEzDugMotCiNro
✅ Preview: https://perf-studio-git-fix-thumb-size.sanity.build

test-studio – ./

🔍 Inspect: https://vercel.com/sanity-io/test-studio/Gsi1Em1cZdYCG4p23vMFBRkkWh9m
✅ Preview: https://test-studio-git-fix-thumb-size.sanity.build