[10.7.2] No poster images / Low quality card images on high DPI displays

[ottodoesntknow]

Describe The Bug Since the last 10.7.2 update I'm seeing low quality images being used for the cards (posters, thumbs and library images). This is a Jellyfin Web issue as I can see them in high quality using Jellyfin Vue.

Steps To Reproduce

1. Update to 10.7.2
2. Go to the main page and look at the card images

Expected Behavior Clear and high quality images being used for the cards.

Screenshots Jellyfin Web:

Jellyfin Vue:

System (please complete the following information):

• Platform: Docker 20.10.5 on Ubuntu Server 20.04.2 LTS
• Browser: Edge Chromium 91.0.845.2 (Dev)
• Jellyfin Version: 10.7.2 (Hotio Docker image)

[oddstr13]

Could you please provide the URLs of the images?

Edit: It's probably related to #2514, even if that was supposed to fix this exact issue for other images. Is this on a High DPI monitor?

[ThibaultNocchi]

You can get info in #2191

[oddstr13]

You can get info in #2191

That is not the exact issue at play here, as #2191 is about source images with miss-matching ratio, but the images here look like they have the correct ratio, but are seeing the issue anyways.

[ottodoesntknow]

Could you please provide the URLs of the images?

Movie poster: http://192.168.0.19:8096/Items/d218622baae752ed2d1018a27bcd170d/Images/Primary?fillHeight=329&fillWidth=219&tag=bdecbcb1690aecb826f5f691e6dc7fa1&quality=90

Thumb: http://192.168.0.19:8096/Items/c5ba59b06b6a5fdbb04f6377ca44e573/Images/Backdrop?fillWidth=358&tag=995c8bed7de61b4b815aa20940a8f115&quality=80

Library image: http://192.168.0.19:8096/Items/1dbc59f98f7a5c0db1e7d825102c0336/Images/Primary?fillHeight=201&fillWidth=358&tag=8087f42dcce9f4ee8771832f66777749&quality=90

Edit: It's probably related to #2514, even if that was supposed to fix this exact issue for other images. Is this on a High DPI monitor?

Probably. I don't know how to check my exact DPI but I used this site and it gave me this:

[yuxincs]

I can confirm the issue with a 4K 27-inch monitor. With the same window size:

URL in 10.7.1:

Items/aafdf1b287b3438d26383b10f8353b5e/Images/Primary?maxHeight=812&maxWidth=542&tag=7c3b29d309eaaad83514d3711b75a6a6&quality=90

URL in 10.7.2: Items/aafdf1b287b3438d26383b10f8353b5e/Images/Primary?fillHeight=406&fillWidth=270.75&tag=7c3b29d309eaaad83514d3711b75a6a6&quality=90

It seems that Jellyfin-web is unaware of the HiDPI monitor to request the correct height and width.

Also, while resizing the window, I noticed that sometimes the image won't load at all due to invalid width.

For example, the request Items/aafdf1b287b3438d26383b10f8353b5e/Images/Primary?fillHeight=424&fillWidth=282.5&tag=7c3b29d309eaaad83514d3711b75a6a6&quality=90 returns a 400 with the following error message:

{
  "type": "https://tools.ietf.org/html/rfc7231#section-6.5.1",
  "title": "One or more validation errors occurred.",
  "status": 400,
  "traceId": "00-94729ea11d84d448bb0eea0c55182aa1-fedada3a38d15d46-00",
  "errors": {
    "fillWidth": [
      "The value '282.5' is not valid."
    ]
  }
}

I can create another issue if this is unrelated :)

[oddstr13]

Bleh, jellyfin/jellyfin-apiclient-javascript#167 didn't make it into the release then.

[TheNamelessWonderer]

@yxwangcs Your issue seems related to this one: https://github.com/jellyfin/jellyfin/issues/5788. Not sure if https://github.com/jellyfin/jellyfin/issues/5788 is related to this issue too.