Jump to content

Welcome, Guest!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

  • 0
vsn

WebP image format

Question

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

  • Like 1

Share this post


Link to post
Share on other sites

18 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0
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

Share this post


Link to post
Share on other sites
  • 0

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>

 

Share this post


Link to post
Share on other sites
  • 0

@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>

 

Screenshot01048.jpg

Share this post


Link to post
Share on other sites
  • 0

@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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0
Posted (edited)

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.

Screenshot01053.jpg

Screenshot01052.jpg

Edited by Jonny

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0
Posted (edited)

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

is that enough?
map $http_accept $webp_extension {
    default "";
    "~*webp" ".webp";
}

 

Edited by Adik

Share this post


Link to post
Share on other sites
  • 0

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;
    }
}

 

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
Posted (edited)

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 by Adik

Share this post


Link to post
Share on other sites
  • 0

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

1702772760_Capturedecran2019-05-02a13_22_49.thumb.png.ad022c611f32f1c9a424b470fea15b1e.png

Regenerated images, but nothing in front office

2105704245_Capturedecran2019-05-02a13_22_58.thumb.png.d0befc5ff9389ffb21b9277dfdf1ca96.png

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

1694888915_Capturedecran2019-05-02a13_24_09.png.9498c5d223efc9b19a029b27665839d3.png

Is there anything else to do?

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
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...