Dynamic creation of thumbnail > file size TOO BIG!

[Marttyn]

Hi!
This is not a bug, but a possible improvement that would result in better performance and load speed of the store.

I uploaded all my product images, and activated the dynamic creation of thumbnails. My thumbnail dimensions are 256x192px.
VM creates thumbnails with a filesize of about 25-35kb.
If i use a program called RIOT (Radical Image Optimization Tool) i get 6-9kb with 85% of quality.

For a store loading 20 products per page the resulting size of images is 180kb (for 9kb each) vs 700kb (for 35kb each)
From 9kb to 35kb there is a very big step in performance of the website.

Can you implement a better thumbnail creation?

[Maxim Pishnyak]

If i use a program called RIOT (Radical Image Optimization Tool) i get 6-9kb with 85% of quality.

Don't you think for some cases such quality wouldn't be enough quality?

If you interested you could digg VM code to find where you could adjust percent of quality for image thumbnailing. To deal with lowering image sizes without help of RIOT.

[Marttyn]

Don't you think for some cases such quality wouldn't be enough quality?

Hello Maxim!
Thank you for your reply 
RIOT at 85% of quality gives me ALMOST the same result as the VM.
Check the attached img, i applied zoom to see better.
The left one is generated by VM (27.6kB), and the right is from RIOT (5.22kB).
The main advantage of RIOT is that removes metadata of image, like EXIF, XMP, IPTC and ICC. In this case, metadata is about 10K of the file size!
But this can be done to the full size image, so when uploaded, no metadata is on the file, and generated thumbnail will not have that extra size for metadata.

I will try to modify the parameter that sets the quality of the generated thumbnails and see the results.
Can you point me where to find that? Is it possible to override default instead of modify core?
Regards!

[attachment cleanup by admin]

[Marttyn]

Ive found where to "touch" to select quality compression of the thumbnails!
Go inside: administrator/components/com_virtuemart/helpers/img2thumb.php
In line 318 (in my case) you can find this code:

Code Select Expand

return imagejpeg($new_img, $fileout, 100);

You can chage 100 to the desired value! in my case 85, and i get a 5kB thumbnail with almost imperceptible quality loss. Thats 80% file size reduction!
Im trying to find out how to make and override of this file so i dont have to modify the core. Because i will loss this modification when i update.

Dont you think it would be nice (and very easy to implement) to have this parameter in the configuration page so the user can choose thumb compression?
Think of an 80% reduction in size of images: virtuemart/category/related products views are some pages that load pleanty of thumbnails!

[Milbo]

Thank you, Marttyn. In fact 100% is too much. A nice config value here would fit.

[Maxim Pishnyak]

Once again.. big thanx for your contributions, Marttyn!

[Marttyn]

Hehe, thanks... im feeling useful now 
Any chance to get this for next update? 

[Milbo]

I set it to 87.

[jjk]

The main advantage of RIOT is that removes metadata of image, like EXIF, XMP, IPTC and ICC. In this case, metadata is about 10K of the file size!

Just a note: Digital cameras often add a lot of more or less useless exif data to the images and most digital cameras include a thumbnail in their EXIF data. So it does make sense to remove EXIF from thumbnails. On the other hand it can be useful to add certain EXIF data to images, like i.e. copyright information. It can also be used for SEO.

[Marttyn]

Hey Milbo, was this included in the new release 2.0.22c?
Maybe a config value as you suggested will be added to 2.0.23? 
Regards!

[Marttyn]

Ive checked that the you introduced a 89% quality to the thumb creation in the new release! Grate!
Still would be nice to have a config value if possible 
Regards!

[T.A. Garrison, LLC]

I'm hoping this is the right spot to post this, since you are taking suggestions about image sizes.

I've successfully created a single template for desktop and mobile devices. There are minor issues, but nothing anybody would consider a problem.

Virtuemart re-sizes images and that's fine. But the php code strips the dimensions - more correctly, it simply fails to include them.
If you know responsive techniques in 2013, "assuring" that all images have dimensions included allows the mobile devices to re-size the image accordingly.
Currently, VM 2.0.24c does "NOT" include image dimensions for "product-field-display" images. Therefore, images that have a 500 x 500 dimension show up on the mobile device as that size. In other words, if a mobile device finds the dimensions in an image, then it will re-size the image to "fit" the screen. If there are no dimensions, then the raw image is displayed - creating a problem on mobile devices with space, and, of course, throwing off the entire design.

I've scoured the Internet, including VM forums, to find a method that will include the dimensions of the images - to no avail.
I know there is php code that will provide image dimensions "on-the-fly", but what I've found seems to mandate specific image names.

What I'm hoping is that one or more of you knowledgeable people can figure out "how" to include the dimensions of the product images - throughout the VM templates. That would allow me (and others) to assure the template is responsive.
Isn't there a way to reverse the fact that the templates are not including dimensions?

I get that VM 2 is designed to stop the horrid practice of uploading gigantic images and expecting the browser to display the appropriate image size. I've hated that practice since before 2000. I'm all for only uploading the image that you are planning to display.

So, where can I make a change to call the dimensions of the images and have it displayed normally in the <img width="?" height="?" ....> attributes, and with what code?

Thanks.

[jjk]

I'm not a template designer, but maybe I can give you a hint. In the file vmsite-ltr.css the main product image is already set to 'max-width: 100%'. In the same file there also is a line .width1{width:1%;}.width2{width:2%;}.width3{width:3%;}......width99{width:99%;}.width100{width:100%;}. So basically its not fixed size.
But the image resides in an image container for which the size is controlled in the file yourdomain\components\com_virtuemart\views\productdetails\tmpl\default.php
There is a piece of code saying:
   <div class="width60 floatleft">
<?php
echo $this->loadTemplate('images');
?>
   </div>

   <div class="width40 floatright">

So I think you need to find a way to automatically adjust the 60/40 values or at least the 60 value (the first one controls the image container width).

[T.A. Garrison, LLC]

I'm not a template designer, but maybe I can give you a hint. In the file vmsite-ltr.css the main product image is already set to 'max-width: 100%'. In the same file there also is a line .width1{width:1%;}.width2{width:2%;}.width3{width:3%;}......width99{width:99%;}.width100{width:100%;}. So basically its not fixed size.
But the image resides in an image container for which the size is controlled in the file yourdomain\components\com_virtuemart\views\productdetails\tmpl\default.php
There is a piece of code saying:
   <div class="width60 floatleft">
<?php
echo $this->loadTemplate('images');
?>
   </div>

   <div class="width40 floatright">

So I think you need to find a way to automatically adjust the 60/40 values or at least the 60 value (the first one controls the image container width).

Yes, I've been working around that code. But what I need has to be more specific.
General widths and CSS changes are going to have a negative effect on other areas if I touch the .width?

In order to make an image re-size in a mobile device the image 'must' have it's own dimensions.
The image "could" be re-sized using CSS, but it would mean a lot more coding.

The div where the images are displayed needs to allow the dimensions for the images. This is something that the developers decided should be eliminated instead of included when coding "wherever" that part of the template is found.
The general practice (although completely wrong) is to let the browser decide the image dimensions to display. Mobile devices default to the actual image dimensions. This is why it was not good practice to exclude the code to show the dimensions.

But thanks....the class tags are not going to provide the dimensions in the <img > tag as is a "good" practice.

[jjk]

Did you check how product image scaling is done in existing responsive templates. I know there are free ones, too.