Media library thumbnail is very grainy

Assigning to track lead.

I think anyone can action this? I will make an MR if I have time.

Working on it.

Will give this a test and report back. Blurriness of thumbnails will be more apparent on retina devices so may not be an issue for everyone. Speed of loading the media library and disk space usage are considerations because we will generate thumbnails of many images as users browse their media libraries.

Fair enough, but the screenshot is not from a retina screen, it's from a pretty cheap secondary monitor :) It doesn't look much different on my retina laptop screen.

Thank you so much for finding this one and working on a solution. It looks as though with our current configuration the squarer the image the sharper it will render.

It so happens that some of the images in this case are much wider than taller so the aspect ratio of these images lays bare a problem. Our rendered image appears as a square but in fact it’s a rectangle of tiny height with some CSS applied to set the image as a cover and fill the area.

If we crop to a square of 240px x 240px (or 220px x 220px would probably do) rather than only scaling then we can have sharp images and optimise for the thumbnail we want to present.

I suggest we use try applying a ‘focal point scale and crop’ instead of the ‘scale’ to Media Library thumbnail image style and try applying that. If we use a media library specific image style then image styles can be edited in future with clarity over what’s affected.

A very rough test with 220px focal point scale and crop looks as though that might do the trick.

Thanks for this optimised solution! Updated the IS with this info.

Hello @tonypaulbarker, @pameeela,

I have created a new image style named "Media Library Square Thumbnail" with focal point scale and crop effect and webp conversion effect. Applied this new style to the media library.

Please review this and let me know if it works.

Assigning to @tonypaulbarker for review.

Added one little comment. The UUIDs should be removed from configuration files in recipes.

Definitely want @tonypaulbarker to review this one :)

I have fixed the issue as mentioned in #16. Please review it @tonypaulbarker :)

@debrup I left a comment in the MR. The updated proposed resolution suggests 220px, which should be close to the rendered image size. This will help speed up loading of the media library when there are many images.

That looks good to me! Thanks @debrup.

The image is now looking sharp, let's move it on.

Looks great. Thanks for your contribution @debrup !