VirtueMart Forum

VirtueMart 2 + 3 + 4 => General Questions => Topic started by: juanvilchez on December 28, 2017, 23:00:35 PM

Title: Thumbnail Quality
Post by: juanvilchez on December 28, 2017, 23:00:35 PM
I've searched the forum, and the topic has been treated dozens of times.

It seems that the algorithm used to generate the thumbnails from the images is uncapable of creating clean, sharp images. Probably it wasn't a very big issue some years ago, but now it's very noticeable considering nowadays mobile phone and computer screen standards (ultra high resolutions don't mix up well with JPEG artifacts!).

I've tried modifying the quality settings as stated in previous posts (in administrator/components/com_virtuemart/helpers/img2thumb.php --- return imagejpeg($new_img, $fileout, 100); ), but the difference was not noticeable at all, but the file size was nonetheless increased.

In those treads, it is proposed batch generation using Irfanview and other image editors but let's face it: it's rather unpractical! VM should provide a comprehensive all-in-one solution.

What is more important than making our stores and products look right?
Title: Re: Thumbnail Quality
Post by: GJC Web Design on December 28, 2017, 23:15:48 PM
do you know of a commonly available image library other than php GD?

the only alt. I know is Imagick (seems to be considered better) but afaik it is not widely available on hosts

Any solution has to be available on all common hosts
Title: Re: Thumbnail Quality
Post by: jenkinhill on December 28, 2017, 23:44:13 PM
Quote from: juanvilchez on December 28, 2017, 23:00:35 PM
VM should provide a comprehensive all-in-one solution.

VM is a community project so if you have a solution for your perceived issue which is suitable for use on all types of server platform then please feel free to submit it.
Title: Re: Thumbnail Quality
Post by: Studio 42 on December 28, 2017, 23:51:43 PM
If you need high quality image, use PNG and  not jpg, of course in this case your image are bigger but you get better image quality.
Note that i added a webp convert in Vm Be Pro (https://shop.st42.fr/en/products/vm-be-pro-batch-product-edit.htm) and a punyPng button to get best PNG compression.
You can check here about webp  : https://www.andrewmunsell.com/blog/png-vs-webp/
Note that my website image is not optimised for image quality, i prefer in my case faster render.
Here to compare sizes :
child-pro-phone_600x600.png   157 659
child-pro-phone_600x600.webp   12 750
vmproducts_samples.jpg   260 228 (quality 70% i think)
vmproducts_samples.webp   214 590
To use webp, you can use a simple rule in the .htaccess
# use webp
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]

Webp is not supported by all browser, but with this rule, it autoswitch by browser