WebP image format

[vsn]

Does TB support generation of images in the webp format? If yes, how to activate and configer it and what are server requirements, for example php version or extensions? Sergey

[Traumflug]

There is some support for it, but not yet ready for consumption. Too many other, more crucial bugs.

[vsn]

I see. Is there any implementation timeline? This feature seems to be very usefully and very trandy. PS 1.7 is going to include it in some future release, by the way...

[Jonny]

If your theme supports WebP, then you can find an option on the "BO>Images" page to enable WebP, Panda theme v1 for TB supports WebP, here is a demo http://thirtybees.sunnytoo.com/en/

[vsn]

On 4/9/2019 at 11:09 AM, Jonny said:

If your theme supports WebP, then you can find an option on the "BO>Images" page to enable WebP, Panda theme v1 for TB supports WebP, here is a demo http://thirtybees.sunnytoo.com/en/

Hi Jonny, could you please share with a screenshot of this setting? I have upgraded both TB and the panda theme, but I am sill not able to see this setting. I guess some php extensions must be activated on my server. Thanks! Sergey

[colorful-ant]

i use panda 1.4.3 at the moment
backoffice - image settings - take a look

httpdocs / config / xml / themes / panda.xml

i changed the last lines to
 

</images>
    <lazy_load>1</lazy_load>
    <high_dpi>1</high_dpi>
    <webp>1</webp>
</theme>

 

[wakabayashi]

What are your experiences with webp. Does it speed up the site a lot?

[Jonny]

@colorful-ant Panda 1.4.3 doesn't support webp feature. If you need to use WebP feature, then upgrade your theme to Panda 1.4.6, your change to the  /config/xml/ themes/panda.xml is right.

@vsn I forgot to mention that for people who upgrade from old versions to 1.4.6, you need to add this code to the  /config/xml/ themes/panda.xml file.

<webp>1</webp>

 

[Jonny]

@wakabayashi Using webp can speed your site up for about 10%, because of .webp images are about 20% smaller than .jpg ones, so using webp can reduce content size, the less content, the less time to download.

[vsn]

I probably missed something... Even in case I modify /config/xml/ themes/panda.xml manually, should the images itself not be in .web format? I would expect you need to re-generate the product images into the .web format. Somehow. This is exactly the step I missing.

[Jonny]

Since you've already modified the panda.xml,  if you did the modification correctly, then you can see a WebP option on the BO>Images page, what you need to do are: 

1) Enable that option.

2) Regenerate thumbnails.

thumbnails will be saved in both .jpg and .wepb, .jpg are used for Safari.

Edited April 26, 2019 by Jonny

[datakick]

Also, make sure your server supports this. I had to recompile my php gd extension to include webp support, and also adjust my nginx setup to properly handle .webp extension

[Adik]

Petr, could you share your nginx.conf section for webp support?

is that enough?

map $http_accept $webp_extension {
    default "";
    "~*webp" ".webp";
}

 

Edited April 26, 2019 by Adik

[datakick]

this is my nginx.conf:

server {
    listen 80;
    index index.php index.html;
    server_name localhost;
    root /var/www/default;

    # use original IP address changed by cloudflare
    set_real_ip_from 103.21.244.0/22;
    set_real_ip_from 103.22.200.0/22;
    set_real_ip_from 103.31.4.0/22;
    set_real_ip_from 104.16.0.0/12;
    set_real_ip_from 108.162.192.0/18;
    set_real_ip_from 131.0.72.0/22;
    set_real_ip_from 141.101.64.0/18;
    set_real_ip_from 162.158.0.0/15;
    set_real_ip_from 172.64.0.0/13;
    set_real_ip_from 173.245.48.0/20;
    set_real_ip_from 188.114.96.0/20;
    set_real_ip_from 190.93.240.0/20;
    set_real_ip_from 197.234.240.0/22;
    set_real_ip_from 198.41.128.0/17;
    set_real_ip_from 2400:cb00::/32;
    set_real_ip_from 2606:4700::/32;
    set_real_ip_from 2803:f800::/32;
    set_real_ip_from 2405:b500::/32;
    set_real_ip_from 2405:8100::/32;
    set_real_ip_from 2c0f:f248::/32;
    set_real_ip_from 2a06:98c0::/29;
    real_ip_header CF-Connecting-IP;

    location / {
        try_files  $uri  $uri/  /index.php?$args;
        index index.php;
    }

    location ~* \.(eot|gif|ico|jpg|jpeg|otf|pdf|png|svg|swf|ttf|woff|webp)$ {
        rewrite ^/([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$1$2$3.jpg break;
        rewrite ^/([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$1$2$3$4.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$1$2$3$4$5.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg break;
        rewrite ^/c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ /img/c/$1$2$3.jpg break;
        rewrite ^/c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ /img/c/$1$2.jpg break;

        rewrite ^/([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$1$2$3.webp break;
        rewrite ^/([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$1$2$3$4.webp break;
        rewrite ^/([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$1$2$3$4$5.webp break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$1$2$3$4$5$6.webp break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.webp break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.webp break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.webp break;
        rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.webp$ /img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.webp break;
        rewrite ^/c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.webp$ /img/c/$1$2$3.webp break;
        rewrite ^/c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.webp$ /img/c/$1$2.webp break;
 
        allow all;
    }

    location ~ \.php$ {
        try_files  $uri  $uri/  /index.php?$args;
        index  index.html index.htm index.php;

        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

        fastcgi_pass php:9000;
        fastcgi_index index.php;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_intercept_errors on;
        fastcgi_read_timeout 360s;
        include fastcgi_params;
    }
}

 

[Adik]

Thank you Petr, do not forget about expires of webp files:

location ~* \.(eot|ttf|woff|eof|woff2|css|js|jsonp|jpg|jpeg|gif|png|ico|svg|webm|mp3|mp4|webp)$ {
        add_header Access-Control-Allow-Origin *;
        # ~ 10 Days
        expires 604800s;
    }

Edited April 28, 2019 by Adik

[Okiproko]

I did not understand something ...

I also followed the instructions to the letter, but nothing appears ...

I use Thirty Bees 1.0.8 and Panda Theme 1.4.6

In BO-> Images, Webp appears and activated

Regenerated images, but nothing in front office

and in the Images directory since FTP, no image was created in Webp

Is there anything else to do?

[Jonny]

I guess that's probably due to your server doesn't support webp, although webp is a built-in extension of php, but it's not installed on all server. You can find a tool on my site to test if webp is supported. You can ask your server provider to help you add webp-support.

[Okiproko]

Thank you for your return Jonny, we already talk together on the same subject from the forum www.sunnytoo.com

[Petter]

If using modpagespeed on either Apache or Nginx, depending on what's your webserver, all you have to do to support webp is to enable support for webp in modpagesped configuration.

Modpagespeed will convert suitable image formats to webp if requested from a webp compatible web browser.

https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source

[Smile]

I have updated Panda to 1.5.3 and TB to 1.1.0. I tested the server with the file from sunnytoo. Webp was supported "Congruts, so webp is supported.".

 

But it does not show under the image settings.... 😕 

What can be the case?

[SLiCK_303]

@Smile, do you have the following lines at the end of your themes config.xml file...

[Smile]

Yes that seems the issue the whole file was not on this test environment. But the file looks a whole different.

<?xml version="1.0" encoding="UTF-8"?>
<theme version="1.0" name="panda" directory="panda">
  <author name="Jonny Li" email="[email protected]" url="http://www.sunnytoo.com"/>
  <descriptions>
    <description iso="en"/>
  </descriptions>
  <variations>
    <variation name="panda" directory="panda" responsive="1" default_left_column="1" default_right_column="0" product_per_page="9" from="1.1.0"/>
  </variations>
  <docs>
    <doc name="documentation" path="doc/"/>
  </docs>
  <metas>
    <meta meta_page="pagenotfound" left="0" right="0"/>
    <meta meta_page="best-sales" left="1" right="0"/>
    <meta meta_page="contact" left="0" right="0"/>
    <meta meta_page="index" left="0" right="0"/>
    <meta meta_page="manufacturer" left="1" right="0"/>
    <meta meta_page="new-products" left="1" right="0"/>
    <meta meta_page="password" left="0" right="0"/>
    <meta meta_page="prices-drop" left="1" right="0"/>
  </metas>
  <modules>
    <module action="enable" name="stthemeeditor"/>
    <module action="enable" name="steasycontent"/>
    <module action="disable" name="themeconfigurator"/>
    <module action="disable" name="thememanager"/>
    <hooks>
      <hook module="beesblogrecentposts" hook="displayHome" position="7"/>
      <hook module="blockcart_mod" hook="displayTop" position="6"/>
      <hook module="blockcategories" hook="Header" position="7"/>
      <hook module="blockcategories" hook="actionAdminLanguagesControllerStatusBefore" position="1"/>
      <hook module="blockcategories" hook="actionAdminMetaControllerUpdate_optionsBefore" position="1"/>

      <hook module="blocklanguages_mod" hook="displayMobileMenu" position="2"/>
      <hook module="sttwitterembeddedtimelines" hook="displayFooterPrimary" position="2"/>
    </hooks>
  </modules>
  <images>
    <image name="cart_default" width="45" height="51" products="true" categories="false" manufacturers="false" suppliers="false" scenes="false"/>
    <image name="small_default" width="70" height="80" products="true" categories="false" manufacturers="true" suppliers="true" scenes="false"/>
    <image name="manufacturer_default" width="169" height="104" products="false" categories="false" manufacturers="true" suppliers="true" scenes="false"/>
    <image name="category_default_2x" width="870" height="218" products="false" categories="true" manufacturers="false" suppliers="false" scenes="false"/>
    <image name="thickbox_default_2x" width="700" height="800" products="true" categories="false" manufacturers="false" suppliers="false" scenes="false"/>
  </images>
</theme>

?

Edit: shorten the file a bit...

Edited February 12, 2020 by Smile

[Smile]

Although it looks different at the end compared to the once here I added <webp>1</webp> and this did the trick. It seems the files are the same but the order in the rules is different. Something to care about?