Openlibrary: Book covers appear fuzzy on high res displays

[cdrini]

Description

Covers on the works/books pages look fuzzy on high res displays. They're getting rendered at 180px and are exactly 180px.

Evidence / Screenshot (if possible)

Relevant url?

e.g. https://openlibrary.org/books/OL45985M/From_Sundials_to_Atomic_Clocks

Expectation

They shouldn't be fuzzy.

Details

• Logged in (Y/N)? Y
• Browser type/version? Firefox 68.0a1 (Nightly)
• Operating system? Android

Proposal & Constraints

We can use srcset! Showing the -M.jpg image by default, and the -L.jpg image for 2x displays. (e.g. https://covers.openlibrary.org/w/id/8576656-M.jpg, https://covers.openlibrary.org/w/id/8576656-L.jpg 2x).

Stakeholders

@jdlrobson

[seabelis]

I have noticed this and I think it might have to do with the images themselves. I think when the images are imported they tend to be lower quality. When I replace these with actual scans of the book covers, whether from IA copies or personally scanned images, they look much better. It's also something I've noticed on Goodreads.
This is from my own scan; is it also fuzzy? https://openlibrary.org/books/OL26454925M/Bring_Up_the_Bodies

[cdrini]

Yeah, it's still fuzzy. For reference, here's how my laptop (which has a 1.25x display) displays the image:

| Using -M.jpg (current) | Using -L.jpg (desired) |
|---|---|
| | |

[seabelis]

Yes. I see.

[mekarpeles]

We should just be using -L for books pages.

[cdrini]

I think srcset is a better solution because it loads them as necessary. E.g. if you _zoom in_ on a page, srcset allows for the image to be _automatically_ replaced with higher quality versions (even if you're not using a high-res display). That way we could have 3x, 4x, or even 5x images. It also means smaller files transferred to non high-res displays, which is nice. I think trying to make OL work well in low-income countries where internet speeds/bandwidths are low is a good goal :) .

[jdlrobson]

+1 to srcset. Be careful not to ship too large an image however as retina displays will load 2 images for every image you give it.

[cdrini]

Oooh! I haven't heard of that. How can we avoid that?

[jdlrobson]

Oooh! I haven't heard of that. How can we avoid that?

I recall it's browser specific. I'm not sure if it's still a problem with modern browsers but I've encountered that problem before. Solutions might be as simple as making sure srcset attribute comes before src. Just something to look out for during code review.

[devarshigoswami]

If no one is tackling this issue, Can I have a go?

[BrittanyBunk]

This is similar to another issue I posted (if someone wants to find it) in how when a picture is uploaded, it won't be full-sized, and that might contribute to fuzziness - at least on an editor's side.

[jdlrobson]

Oooh! I haven't heard of that. How can we avoid that?

I recall it's browser specific. I'm not sure if it's still a problem with modern browsers but I've encountered that problem before. Solutions might be as simple as making sure srcset attribute comes before src. Just something to look out for during code review.

Update here. Doesn't look like this should be a problem any more.

@devarshigoswami please go ahead and try fixing this using the srcset method outlined above: https://github.com/internetarchive/openlibrary/issues/2144#issuecomment-531953106

[jdlrobson]

Nice job @devarshigoswami you are on a roll with your pull requests! 👍

[devarshigoswami]

@jdlrobson sir, Thanks a bunch, but you know It was a really small issue and It could be solved only because of the community's insightful suggestions...keeping that aside, I would really like to know what you have to think about issue #3231 and how I can tackle it