Question about ImageManager:resize

[312erik123]

Hello,

Trying to reduce the footprint of some parts of my website by using webp images. So I've been trying ImageManager:resize to convert to webp, however, the size of the image is always exactly the same as the input jpg-file. Anyone know why that is the case? How can I use ImageManger to convert wepb and reduce the size of my images?

Thanks Erik

[nickz]

23 hours ago, 312erik123 said:

How can I use ImageManger to convert wepb and reduce the size of my images?

Well me not being a friend of all things Google have come acrosse this report:
https://siipo.la/blog/is-webp-really-better-than-jpeg

Most people won't see a difference when an image weights 30kb vs 27kb.

You energy is wiser spend on marketing or sales. 😄

 

[datakick]

46 minutes ago, nickz said:

Well me not being a friend of all things Google have come acrosse this report:
https://siipo.la/blog/is-webp-really-better-than-jpeg

Most people won't see a difference when an image weights 30kb vs 27kb.

You energy is wiser spend on marketing or sales. 😄

 

I don't like google company much as well, but that's not a reason to not using *open* image format developed by them. Especially when it's as good as webp.

I did a quick stats on my store for my product images. I don't have many images, and those that I have are mostly screenshots of module config pages. So the statistic is definitely biased. Nevertheless, the result are very nice:

• Total images: 576
• Total size of jpg version: 6074191
• total size of webp version: 3140802

That's roughly 50% less.

[datakick]

23 hours ago, 312erik123 said:

Hello,

Trying to reduce the footprint of some parts of my website by using webp images. So I've been trying ImageManager:resize to convert to webp, however, the size of the image is always exactly the same as the input jpg-file. Anyone know why that is the case? How can I use ImageManger to convert wepb and reduce the size of my images?

Thanks Erik

You are probably using old tb version that contained a bug. If so, update to 1.5

[the.rampage.rado]

Now I remembered - I had the same but. He's probably using the imagemagic module. Uninstall it (it's not needed in the modern TB1.4-1.5+) and regenerate the images, you'll see a drop in the size.

[312erik123]

Hey!

Thanks for you quick responses. @the.rampage.rado I'm not using ImageMagic.

@datakick Tried to update to latest bleeding edge, same issue. When i generate thumbnails, they are generated as both jpg and webp, where the webp is significantly smaller. However when i try to do the same thing for the homeslider, the images are the exact same size. This is how I call ImageManager:Resize method

ImageManager::resize($sourceFile, $filepathWebp, null, null, 'webp') -  where the sourceFile is a jpg file, the filepath is specified with a wepb extension...any ideas?

[movieseals]

We no longer need to use Imagemagick?  First time I hear of this.  Any reason why?  I just want to understand the logic behind dropping it.  I was currently using it to automatically generate webp since my theme did not create them at upload.

[the.rampage.rado]

3 hours ago, movieseals said:

We no longer need to use Imagemagick?  First time I hear of this.  Any reason why?  I just want to understand the logic behind dropping it.  I was currently using it to automatically generate webp since my theme did not create them at upload.

My theme also did not create any webp 😄

But the core does since 1.4 so no need for this module. It had some nice features like white background trim, etc. but in my case it was causing exactly the same issue as the topic creator.

I also removed the watermark modules from my site - I don't sell unique items so I decided this overhead is not needed too.

@movieseals Could you check your jpg and webp files if they are not exactly the same size?

[movieseals]

10 hours ago, the.rampage.rado said:

My theme also did not create any webp 😄

But the core does since 1.4 so no need for this module. It had some nice features like white background trim, etc. but in my case it was causing exactly the same issue as the topic creator.

I also removed the watermark modules from my site - I don't sell unique items so I decided this overhead is not needed too.

@movieseals Could you check your jpg and webp files if they are not exactly the same size?

Thank you for the information!  The jpg and webp have about a 50% difference in size, in favour of the webp, so no problem so far on that side.

[movieseals]

What about modules?  If we upload images from a module that did not necessarily support webp, will TB generate both anyways?  I used to be on TB 1.3, just now discovering the features of 1.5.

Never used watermark.  Trying to diminish my use and reliance on non-native modules as much as possible.

Edited November 20, 2023 by movieseals

[312erik123]

No modules don’t do that, thats what’s what I’ve been trying to do with the home slider module. 
 

@datakick & @the.rampage.rado do you know how to debug ImageManager.php or similar classes? Been trying “echo” and “echo <script> console.log…” but I get nothing…

[312erik123]

Hello,

Problem solved, or kind of solved... The overrides from ImageMagic remained eventhough i had disabled the module. With them removed I now get webp-images, most of them are quite a bit bigger than the jpgs...maybe a quality setting...

And for anyone else looking to trouble shoot php code using Logger::addlog(""); works well!

Edited November 21, 2023 by 312erik123

[the.rampage.rado]

24 minutes ago, 312erik123 said:

Hello,

Problem solved, or kind of solved... The overrides from ImageMagic remained eventhough i had disabled the module. With them removed I now get webp-images, most of them are quite a bit bigger than the jpgs...maybe a quality setting...

And for anyone else looking to trouble shoot php code using Logger::addlog(""); works well!

So basically I was right!? 😛

[312erik123]

Yes😀 Good spot!

[the.rampage.rado]

Regarding modules and webp - you have to customize the module to be able to work with webp images.

I did so for Warehouse's lightweight image slider and now it displays web images. Of course no jpeg fallback, etc as it uses the originals that are uploaded.

[312erik123]

5 minutes ago, the.rampage.rado said:

Regarding modules and webp - you have to customize the module to be able to work with webp images.

I did so for Warehouse's lightweight image slider and now it displays web images. Of course no jpeg fallback, etc as it uses the originals that are uploaded.

Exactly, thats what i do with the Homeslider. I have overridden the "processImage" function to generate wepb and jpg images in 2 sizes and included a responsive scrset in the homeslider.tpl file. I guess you could do that for basically any module.

Edited November 21, 2023 by 312erik123

[the.rampage.rado]

3 minutes ago, 312erik123 said:

Exactly, thats what i do with the Homeslider. I have overridden the "processImage" function to generate wepb and jpg images in 2 sizes and included a responsive scrset in the homeslider.tpl file. I guess you could do that for basically any module.

https://github.com/thirtybees/homeslider this home slider?

If so could you push those changes? The community will definitely be grateful. 

[312erik123]

7 minutes ago, the.rampage.rado said:

https://github.com/thirtybees/homeslider this home slider?

If so could you push those changes? The community will definitely be grateful. 

Well, more of a hack actually so maybe not a good idea to push into the codebase, but this is the code:

Override with this method:

    protected function processImage($sourceFile, $sourceFileName)

    {

        $imageSize = getimagesize($sourceFile);

        if (! $imageSize) {

            throw new PrestaShopException($this->l("Failed to resolve image size"));

        }

        $mimeType = strtolower(substr(strrchr($imageSize['mime'], '/'), 1));

        if (! in_array($mimeType, static::ALLOWED_EXTENSIONS)) {

            throw new PrestaShopException(sprintf($this->l("Unsupported mime type  %s"), $mimeType));

        }

 

        // resize file to target destination

        $filename = md5(microtime()) . '_' . preg_replace('/[^a-zA-Z0-9._-]/', '', $sourceFileName);

        $filenameSmall = preg_replace('/(\.jpg)$/', 'small$1', $filename);

 

        $filenameWebp = preg_replace('/\.jpg$/', '.webp', $filename);

        $filenameWebpSmall = preg_replace('/\.jpg$/', '.webp', $filenameSmall);

       

        $filepath = static::getImageDir() . $filename;

        $filepathSmall = static::getImageDir() . $filenameSmall;

 

        $filepathWebp = static::getImageDir() . $filenameWebp;

        $filepathWebpSmall = static::getImageDir() . $filenameWebpSmall;

 

        if ($imageSize[0] > 1000) {

            $changeFactor = 0.5;

        } else {

            $changeFactor = 0.8;

        }

 

        if (! ImageManager::resize($sourceFile, $filepath, null, null, $mimeType)) {

            throw new PrestaShopException($this->l('An error occurred during the image resizing'));

        }

 

        if (! ImageManager::resize($sourceFile, $filepathSmall, $imageSize[0]*$changeFactor, $imageSize[1]*$changeFactor, $mimeType)) {

            throw new PrestaShopException($this->l('An error occurred during the image resizing'));

        }

 

        if (! ImageManager::resize($sourceFile, $filepathWebp, null, null, 'webp')) {

            throw new PrestaShopException($this->l('An error occurred during the image resizing'));

        }

 

        if (! ImageManager::resize($sourceFile, $filepathWebpSmall, $imageSize[0]*$changeFactor, $imageSize[1]*$changeFactor, 'webp')) {

            throw new PrestaShopException($this->l('An error occurred during the image resizing'));

        }

 

        return $filename;

    }

And include this in the homeslider.tpl:

              <picture>

                  {$imageUrl=$link->getMediaLink($slideImageUrl)|escape:'htmlall':'UTF-8'}

                  {$imageUrlsmall=preg_replace('/(\.jpg)$/', 'small$1', $imageUrl)}

                  {$filenameWebp = preg_replace('/\.jpg$/', '.webp', $imageUrl)}

                  {$filenameWebpSmall = preg_replace('/\.jpg$/', '.webp', $imageUrlsmall)}

 

                  <source media="(max-width: 600px)" srcset="{$filenameWebpSmall}" type="image/webp">

                  <source media="(min-width: 601px)" srcset="{$filenameWebp}" type="image/webp">

                  <source media="(max-width: 600px)" srcset="{$imageUrlsmall}" type="image/jpeg">

                  <source media="(min-width: 601px)" srcset="{$imageUrl}" type="image/jpeg">

                  <img class="img-responsive"

                        src="{$link->getMediaLink($slideImageUrl)|escape:'htmlall':'UTF-8'}"

                        alt="{$slide.legend|escape:'htmlall':'UTF-8'}"

                        {if isset($slide.size) && $slide.size} {$slide.size}{/if}

                  </picture>

Maybe someone can do a proper implementation with this as a base? (and of course don't forget to remove ImageMagic 🙂 )

Edited November 21, 2023 by 312erik123

[movieseals]

The size of the images is related to your compression setting.  The default of 90 is quite excellent.  If you it at 100 or more than 90, it will be bigger (slightly) than you jpeg.