CDN WebPerf Webp - how to use?

Hello I am looking any tutorial how to implement and use Webp.

Is Webp will be working with cdn? Coudflare or Amazon Cloudfront?

I have found this centminmod/optimise-images
Wordpress - Installing WebP Express Wordpress Plugin on Centmin Mod Nginx

What it the best and current option?

I am not looking option only for Wordpress but also for other CMS.

 

I use Amazon CDN, how I can imprement it? The same Nginx Serving WebP Images Conditionally Demo ?

or can i use for Wordpress: Wordpress - Installing WebP Express Wordpress Plugin on Centmin Mod Nginx ?

 

Do I understand correctly that with Free account Cloud Flare I can not use WebP at all?

 

Hello @eva2000

I have found that it exist centminmod/optimise-images

What do you think can i use to to manually convert jpg to webp and use it in Prestashop?

Do I need add just this below?

Code (Text):

# Rewriting for images pretty url - both jpg and webp formats
 
    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;
     expires 30d;
    add_header Vary "Accept";
    add_header Cache-Control "public, no-transform";
        allow all;
        try_files  $uri  $uri/  /index.php?$args;
    }





    location /admin/ {                           #Change this to your admin folder
        if (!-e $request_filename) {
            rewrite ^/.*$ /admin/index.php last; #Change this to your admin folder
        }
    }



location /blog/ {                           #Change this to your admin folder
            index index.php;
           try_files $uri $uri/ /blog/index.php?$args;
    }
    location / {
#http2_push /themes/domain/css/app.css;
#  location ~ ^/(.+/)?(.+)\.(js)$ { allow all; expires 30d; }
#  location ~ ^/(.+/)?(.+)\.(css)$ { allow all; expires 30d; }
#location ~ ^/(.+/)?(.+)\.(gif|jpe?g|png|webp|eot|svg|ttf|woff|woff)$ { allow all; expires 30d; }
#  location ~ ^/(.+/)?(.+)\.(php|cgi|pl|php3|php4|php5|php6|phtml|shtml)$ { allow 127.0.0.1; deny all; }   
      client_max_body_size 100M;
        if (!-e $request_filename) {
            rewrite ^/.*$ /index.php last;
       }
   
   }
 
 
    location ~ /\.git {
          deny all;
   }
 
    location ~ /\.env {
          deny all;
   }
     location ~ /.well-known {
                allow all;
        }


 # File security
    # .htaccess .DS_Store .htpasswd etc
    location ~ /\. {
        deny all;
    }
    # Source code directories
    location ~ ^/(app|bin|cache|classes|config|controllers|docs|localization|override|src|tests|tools|translations|travis-scripts|vendor|var)/ {
        deny all;
    }
    # Prevent exposing other sensitive files
    location ~ \.(yml|log|tpl|twig|sass)$ {
        deny all;
    }

    # Prevent injection of php files
    location /upload {
        location ~ \.php$ {
            deny all;
        }
    }
    location /img {
        location ~ \.php$ {
            deny all;
        }
    }





# Feed
location ~* \.(?:rss|atom)$ {
  add_header Cache-Control "max-age=3600";
}

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|mp4|ogg|ogv|webm|htc)$ {
  access_log off;
  add_header Cache-Control "max-age=2592000";
  fastcgi_ignore_headers Set-Cookie;
}

# Media: svgz files are already compressed.
location ~* \.svgz$ {
  access_log off;
  gzip off;
  add_header Cache-Control "max-age=2592000";
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
  add_header Cache-Control "max-age=31536000";
  access_log off;
  fastcgi_ignore_headers Set-Cookie;
}

# WebFonts
# If you are NOT using cross-domain-fonts.conf, uncomment the following directive
location ~* \.(?:ttf|ttc|otf|eot|woff|woff2)$ {
 add_header Cache-Control "max-age=2592000";
 access_log off;
}

#apple problem icons
#location ~* ^/(?:favicon|apple-touch-icon|android-chrome-|mstile-|safari-pinned-tab.svg|browserconfig.xml)$ {
  #root /home/domain/public_html;
#}

I don't know how to correct it to works with png.webp or rename webp.



1. I have used a script to convert images into WebP.
2. I have add a part of config in nginx, but still is not working
3. I have add a include to nginx config

Code (Text):

create /usr/local/nginx/conf/webp.conf and add to it:


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

This exist even I have more in webp.conf

Code (Text):

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

map $http_cf_cache_status $webp_extension {
    default "";
}

and then

Code (Text):

add to your nginx.conf i.e. /usr/local/nginx/conf/nginx.conf and
include file for /usr/local/nginx/conf/webp.conf within the
http{} context location

include /usr/local/nginx/conf/webp.conf;

This also exist in nginx config.

It seems that something is still missing and I do not see webp.

What is wrong or missing?

 

From my understanding it should be based on nginx.

If browser support webp serv webp if not server jpg.

I can open manually webp.

I was thinking if the problem is about wrong name.

Not image.jpg.webp but image.webp.
What do you think?


This is my modification of config:

Code (Text):

    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;
   #     try_files  $uri  $uri/  /index.php?$args;
      
  autoindex on;
  add_header X-Robots-Tag "noindex, nofollow";
  #location ~* ^/tmp/.+\.(png|jpe?g)$ {
    expires 30d;
    add_header Vary "Accept-Encoding";
    add_header Cache-Control "public, no-transform";
    try_files $uri$webp_extension $uri =404;

      
    }

I was looking at forum of prestashop but nothing there or in the Internet.


I wanted to double check if I miss something from nginx or centminmod perspective.

When everything is correct I will look up at prestashop itself.

Thank you for confirmation.

 

Does Webp works for jpg or for png only?

Cloud it be jpg converted to WebP and served as WebP?

I am wondering about compression difference between jpg and webp.

 

Hello George,

I don't know why but after the update of nginx I see webP. It start working.
I do not use any CDN. Next step to test it with CDNs.


With nginx 1.17.9, OpenSSL 1.1.1d was not working. Weird.

Now works:

Code (Text):

 nginx -V
nginx version: nginx/1.17.9 (030420-012327-centos7-kvm-ad760fc)
built by gcc 8.3.1 20190311 (Red Hat 8.3.1-3) (GCC)
built with OpenSSL 1.1.1f  31 Mar 2020
TLS SNI support enabled
configure arguments: --with-ld-opt='-Wl,-E -L/usr/local/zlib-cf/lib -L/usr/local/lib -ljemalloc -Wl,-z,relro -Wl,-rpath,/usr/local/zlib-cf/lib:/usr/local/lib -flto=4 -fuse-ld=gold' --with-cc-opt='-I/usr/local/zlib-cf/include -I/usr/local/include -m64 -march=native -DTCP_FASTOPEN=23 -g -O3 -fstack-protector-strong -flto=4 -fuse-ld=gold --param=ssp-buffer-size=4 -Wformat -Werror=format-security -Wimplicit-fallthrough=0 -fcode-hoisting -Wno-cast-function-type -Wno-format-extra-args -Wp,-D_FORTIFY_SOURCE=2 -Wno-deprecated-declarations' --sbin-path=/usr/local/sbin/nginx --conf-path=/usr/local/nginx/conf/nginx.conf --build=030420-012327-centos7-kvm-ad760fc --with-compat --with-http_stub_status_module --with-http_secure_link_module --with-libatomic --with-http_gzip_static_module --add-dynamic-module=../ngx_brotli --add-dynamic-module=../incubator-pagespeed-ngx-1.13.35.2-stable --with-http_sub_module --with-http_addition_module --with-http_image_filter_module=dynamic --with-http_geoip_module --with-stream_geoip_module --with-stream_realip_module --with-stream_ssl_preread_module --with-threads --with-stream --with-stream_ssl_module --with-http_realip_module --add-dynamic-module=../ngx-fancyindex-0.4.2 --add-module=../ngx_cache_purge-2.5 --add-dynamic-module=../ngx_devel_kit-0.3.0 --add-dynamic-module=../set-misc-nginx-module-0.32 --add-dynamic-module=../echo-nginx-module-0.61 --add-module=../redis2-nginx-module-0.15 --add-module=../ngx_http_redis-0.3.7 --add-module=../memc-nginx-module-0.18 --add-module=../srcache-nginx-module-0.32rc1 --add-dynamic-module=../headers-more-nginx-module-0.33 --with-pcre-jit --with-zlib=../zlib-cloudflare-1.3.0 --with-http_ssl_module --with-http_v2_module --with-openssl=../openssl-1.1.1f --with-openssl-opt='enable-ec_nistp_64_gcc_128 enable-tls1_3 -fuse-ld=gold'

 

1. Is it possible to do not optimize jpg/png but just generate webP?

2. Is it possible to optimize jpg/png but have a better quality during optimization?
At the moment after the optimize jpg looks not good as orignal files (jpg).

 

Does it mean when I generate webP the script anyway optimize jpg/png even when setting JPEGOPTIM='n' and/or OPTIPNG='n'. ? So there is option to generate webP and do not touch original jpg/png?

Please confirm it.




I have other idea:

original folder with jpg/png
copy of original folder with jpg/png

make use copy of folder and generate webp, copy only webp to original folder.