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.
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.