Portrait-orientation photos in posts are blurry at desktop sizes on high DPI displays

[gesteves]

Describe the bug

If you publish a post with a photo in portrait orientation, and look at the individual post on a desktop computer with a high DPI (aka retina) screen, it looks pretty blurry. This is because images in posts are downsized to 1000 pixels on the long side, so for images in portrait orientation, you end up with an image that isn't wide enough to be rendered sharply in high density displays. As a photographer who wants to share my work on Bluesky, the low quality of the images I post bums me out.

To Reproduce

Steps to reproduce the behavior:

1. Be a photographer
2. Post a photo in portrait orientation
3. Look at it on a retina display on a computer
4. Sob quietly

Expected behavior

1. Be a photographer
2. Post a photo in portrait orientation
3. Look at it on a retina display on a computer
4. Bask in all the fine details you can see in the photo

Screenshots

Actual behavior:

Expected behavior:

Details

• Platform: Arc Version 1.60.0 (53678), Chromium Engine Version 128.0.6613.138, 2021 16-inch MacBook Pro, MacOS Sonoma 14.2
• App version: Build version: 1.91.1; Bundle info: fb71fff (prod); Bundle date: 24091621; Platform: web

Additional context

Mostly pointing this out because I saw "We're loading too many too large images" in #1675; this is actually the opposite problem, the images are too small for a high DPI display.

For landscape-orientation photos, it's not that big of a deal. The container is 562 px wide, so on a display with a devicePixelRatio of 2, you'd need an image that's 1124 px wide to look as sharp as possible. Images get sized down to 1000 px on the long side, which is short of the optimal width, but close enough to still look reasonably sharp in the post.

For a 2:3 portrait-orientation photo, though, sizing it down to 1000 px on the long size results in an image that's just 667 px wide, resulting in a blurry image due to upscaling by the browser.

(More specifically, the issue is that there's a single asset that's being served in these image tags regardless of breakpoint or pixel density; an ideal solution would be to implement srcset/sizes on these img tags to serve the correct sizes at various breakpoints and pixel densities.)