Jump to content
thirty bees forum
  • 0

Question about ImageManager:resize


312erik123

Question

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

Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0
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. 😄

 

Link to comment
Share on other sites

  • 0
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.

  • Like 1
Link to comment
Share on other sites

  • 0
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

Link to comment
Share on other sites

  • 0

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?

Link to comment
Share on other sites

  • 0
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?

Link to comment
Share on other sites

  • 0
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.

Link to comment
Share on other sites

  • 0

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 by movieseals
Link to comment
Share on other sites

  • 0

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 by 312erik123
Link to comment
Share on other sites

  • 0
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!? 😛

Link to comment
Share on other sites

  • 0
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 by 312erik123
Link to comment
Share on other sites

  • 0
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. 

Link to comment
Share on other sites

  • 0
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 by 312erik123
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...