Website Image quality compromised on the default Products Page

[adam26d]

Using version 8.

I’ve uploaded ITEM images with decent quality, they appear fine on the individual item pages. But the image quality is compromised on the products page, and homepage as if a small image was stretched.

A closer check revealed that there was an autogenerated thumbnail version replacing the image. It would be better turned off for low quality images.

Is there a known workaround for this issue?

TIA

Edit
Related issue: Website automatic thumbnail compromising image quality · Issue #14677 · frappe/frappe · GitHub

[rmehta]

Can you share some screenshots? Also on the GitHub Issue?

[adam26d]

As requested.

Products page has autogenerated _small.jpg version. Its quite blurry.

I cant change the tumbnail in item options.

Finally the original image which has fair quality on the individual product page.

Note:

• I see that the quality looks the same here, probably because the images i’ve posted here are compressed to fit the screen. To notice the difference look at the originals here:\

• Products page https://demo.plus.co.zm/products

• Item page https://demo.plus.co.zm/all-item-groups/raw-material/solar-fan-otez4

[generare]

Have you find a solution for this? It is indeed creating very blurry images out of fine quality pictures, also in ERPNext v10.

[adam26d]

I dont quite remember how I solved it. I think I replaced the saved images within the folder sites/site_name/public/files/

[generare]

Thanks. It’s quite a tedious solution. There must be some optimisation script that we could just change the value for the “small” image.

[adam26d]

@generare

It’s quite a tedious solution.

Yes it is.

@generare

we could just change the value for the “small” image.

Including the option to turn-off the thumbnail would be a quick fix.

[generare]

I got a solution for this. I overwrote the css via custom theme like this:

.product-image-square {
background-size: contain;
}

The original value for background-size was “cover”.

[adam26d]

@generare

kindly share the link to the right CSS file to edit. Thank You!

[generare]

there is no link but you can add this above css via the admin. Go to a custom theme settings and add there. Let me know if you find.