Want more timely Centmin Mod News Updates?
Become a Member

CDN WebPerf Webp - how to use?

Discussion in 'Web Development & Web Performance' started by adamus007p, Mar 29, 2020.

  1. adamus007p

    adamus007p Member

    238
    14
    18
    Feb 8, 2019
    Ratings:
    +24
    Local Time:
    10:29 AM
  2. eva2000

    eva2000 Administrator Staff Member

    44,176
    10,068
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,562
    Local Time:
    6:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    Easiest way is to use Cloudflare Pro or higher paid plan and enable Polish with webP on the fly conversion. Cloudflare free plan doesn't support webP nor does it support Nginx level webP outlined at Nginx Serving WebP Images Conditionally Demo.

    If you want to use Nginx level webP outlined at Nginx Serving WebP Images Conditionally Demo, you need for a way to conversion your jpg/png files to webP and then use Nginx rules outlined at Nginx Serving WebP Images Conditionally Demo within your Nginx vhost. But for it to work you can not use Cloudflare with it Nginx level webP.
     
  3. adamus007p

    adamus007p Member

    238
    14
    18
    Feb 8, 2019
    Ratings:
    +24
    Local Time:
    10:29 AM
  4. eva2000

    eva2000 Administrator Staff Member

    44,176
    10,068
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,562
    Local Time:
    6:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    Most CDN's like Cloudflare, may not support Vary: Accept header so you'll have to test Cloudfront to see if CDN cache can serve webP correctly to only webP supported browsers like Chrome/Firefox and serve non-webP to Safari which doesn't support webP. If CDN like Cloudfront supports Vary: Accept, then it should work.

    But Cloudfront docs don't go into detail specific for Vary: Acept headers only for Vary: Accept-Encoding and other Vary headers at Request and Response Behavior for Custom Origins - Amazon CloudFront

     
  5. adamus007p

    adamus007p Member

    238
    14
    18
    Feb 8, 2019
    Ratings:
    +24
    Local Time:
    10:29 AM
    Do I understand correctly that with Free account Cloud Flare I can not use WebP at all?
     
  6. eva2000

    eva2000 Administrator Staff Member

    44,176
    10,068
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,562
    Local Time:
    6:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    yup Cloudflare can't properly cache webP files and different between supported webP browsers and non-supported like Safari if done at Nginx level
     
  7. adamus007p

    adamus007p Member

    238
    14
    18
    Feb 8, 2019
    Ratings:
    +24
    Local Time:
    10:29 AM
    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?
     
    Last edited: Mar 31, 2020
  8. eva2000

    eva2000 Administrator Staff Member

    44,176
    10,068
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,562
    Local Time:
    6:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    I have no experience with Prestashop and webP so you'd need to ask on Prestashop support/forums. The setup for webp is correct for Centmin Mod Nginx, just whether it works with Prestashop would depend on Prestashop itself.
     
  9. adamus007p

    adamus007p Member

    238
    14
    18
    Feb 8, 2019
    Ratings:
    +24
    Local Time:
    10:29 AM
    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.
     
    Last edited: Mar 31, 2020
  10. eva2000

    eva2000 Administrator Staff Member

    44,176
    10,068
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,562
    Local Time:
    6:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    Centmin Mod Nginx
    webP only works if image has both image.jpg and image.jpg.webp formatted extensions and not image.webp
     
  11. adamus007p

    adamus007p Member

    238
    14
    18
    Feb 8, 2019
    Ratings:
    +24
    Local Time:
    10:29 AM
    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.
     
    Last edited: Mar 31, 2020
  12. eva2000

    eva2000 Administrator Staff Member

    44,176
    10,068
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,562
    Local Time:
    6:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    For optimise-images.sh script only supports jpg and png file conversion to webP. Google search webP and you can read up on how much smaller image sizes are with webP versus jpg/png.
     
  13. adamus007p

    adamus007p Member

    238
    14
    18
    Feb 8, 2019
    Ratings:
    +24
    Local Time:
    10:29 AM
    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'
    
     
    Last edited: Apr 4, 2020
  14. adamus007p

    adamus007p Member

    238
    14
    18
    Feb 8, 2019
    Ratings:
    +24
    Local Time:
    10:29 AM
    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).
     
  15. eva2000

    eva2000 Administrator Staff Member

    44,176
    10,068
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,562
    Local Time:
    6:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    not right now for just creating webP. Though for jpg, you could try setting JPEGOPTIM='n' and/or OPTIPNG='n' - test on directory of test images as I have recent testing experience for that. Disabling these 2 will disable additional jpg and png optimizations done beyond the initial imagemagick resize optimization.

    FYI, centminmod/optimise-images is generally provided as is without any free support.

    From centminmod/optimise-images

    So JPG can change IMAGICK_QUALITY from 82% to 90% and see

    Also enable ADD_COMMENT='y' if you are re-running optimise-images.sh against same directory of files over and over as they get re-optimized by default unless you set ADD_COMMENT='y' which skips reoptimization if already optimized by optimise-images.sh script prior
     
    Last edited: Apr 4, 2020
    • Friendly Friendly x 2
  16. adamus007p

    adamus007p Member

    238
    14
    18
    Feb 8, 2019
    Ratings:
    +24
    Local Time:
    10:29 AM
    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.
     
  17. eva2000

    eva2000 Administrator Staff Member

    44,176
    10,068
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,562
    Local Time:
    6:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    webP conversion will always try to optimise jpg/png as the webP conversion is done as same time as jpg/png optimisation on the same command from ImageMagick convert command to save time and resources when running optimisation against 100,000s of files.

    example of the command optimise-images.sh used to optimise bee.png file + create bee.png.webp

    Code (Text):
    /bin/nice -n 10 /usr/bin/ionice -c2 -n7 /usr/bin/convert -define registry:temporary-path=/home/imagicktmp bees.png -interlace none -set comment optimised -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=2             -write mpr:bees -resize 2048x2048\> -write bees.png +delete             mpr:bees -define webp:method=4 -define webp:alpha-quality=100 -define webp:lossless=false -quality 75 -resize 2048x2048\> bees.png.webp


    example of command optimise-images.sh used to optimise samsung_s7_mobile_1.jpg file + create samsung_s7_mobile_1.jpg.webp

    Code (Text):
    /bin/nice -n 10 /usr/bin/ionice -c2 -n7 /usr/bin/convert -define registry:temporary-path=/home/imagicktmp samsung_s7_mobile_1.jpg -define jpeg:size=4096x4096 -filter triangle -define filter:support=2 -define jpeg:fancy-upsampling=off -unsharp 0.25x0.08+8.3+0.045 -interlace none -strip -set comment optimised             -write mpr:samsung_s7_mobile_1 -resize 2048x2048\> -write samsung_s7_mobile_1.jpg +delete             mpr:samsung_s7_mobile_1 -define webp:method=4 -define webp:alpha-quality=100 -define webp:lossless=false -quality 75 -resize 2048x2048\> samsung_s7_mobile_1.jpg.webp
     
  18. eva2000

    eva2000 Administrator Staff Member

    44,176
    10,068
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,562
    Local Time:
    6:29 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    can you share a copy of an original jpg image you are trying to optimise so I can see what before or after optimisation looks like. You can use image file sharing service to upload link to original jpg image