ZIM Illustration is resized in the catalog UI and hence a bit blurry

[benoit74]

Current icon on ZIMs in the library catalog are always a bit blurry even if the real image if reasonably sharp.

Real image:

Problem is that the image is displayed as a div background-image, and the div is not exactly 48x48 pixels, so the image is resized to few more pixels (55x60 on my device / browser). And obviously adding few pixels is just adding blur.

Image if I force background size to 48x48 pixel:

PS: note that just adding the "background-size: 48px 48px" is just a trick to showcase the issue, it is not deemed to be the best approach, it has not been tested on all screen sizes / browsers and it has a side effect that the image is not centered vertically and horizontal anymore. If we go this way we need at least the "background-position: center;" additional style.

[benoit74]

Side-by-side example (left is fixed at 48x48, right is as-of-today)

[kelson42]

This is a bug, illustration (div size) should be 48x48