Want to subscribe to topics you're interested in?
Become a Member

Wordpress Images not loading in Safari due to webP ?

Discussion in 'Blogs & CMS usage' started by ImAProfessional, Dec 12, 2019.

  1. ImAProfessional

    ImAProfessional New Member

    5
    0
    1
    Dec 2, 2019
    Ratings:
    +0
    Local Time:
    8:07 PM
    Since migrating over to Centmin Mod (which included a move from php 5.4 to php 7.3), images are inconsistently not displaying in Safari. All is well in Chrome.

    I noticed similar issue on https://servermanager.guide/ . The images also won't load in Preview on macOS, yet they'll open without issue in Affinity Designer. I've added the image from servermanager.guide below:

    [​IMG]

    Do you have any thoughts on where to begin looking in my server configuration?

    Thanks,
    David
     
  2. eva2000

    eva2000 Administrator Staff Member

    45,444
    10,313
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,997
    Local Time:
    10:07 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    Not a Apple/Mac/Safari user so limits my troubleshooting on my end. So not sure what Affinity Designer is ?

    Are you using Cloudflare in front of your Centmin Mod Nginx server ? Cloudflare free or pro plan ?

    For https://servermanager.guide/ it's behind Cloudflare free plan with webP express wordpress plugin to convert png images to webP format for web browsers that support it. What version of macOS and Safari you using ? maybe it doesn't support webP ?
     
  3. eva2000

    eva2000 Administrator Staff Member

    45,444
    10,313
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,997
    Local Time:
    10:07 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    ok seems you found a bug in my centmin.sh menu option 22 wordpress setup in your generated /usr/local/nginx/conf/wpincludes/domain.com/wpsecure_domain.com.conf

    find the webp location context for
    Code (Text):
    # WebP extension support if you are converting /uploads images to webp
    location ~ ^/wp-content/uploads/ {
      #pagespeed off;
      #pagespeed unplugged;
      #autoindex on;
      #add_header X-Robots-Tag "noindex, nofollow";
      location ~* ^/wp-content/uploads/(.+/)?(.+)\.(png|jpe?g)$ {
        expires 30d;
        add_header Vary "Accept-Encoding";
        add_header Cache-Control "public, no-transform";
        try_files $uri$webp_extension $uri =404;
      }

    change the add_header line for Vary from add_header Vary "Accept-Encoding"; to add_header Vary "Accept";
    Code (Text):
    # WebP extension support if you are converting /uploads images to webp
    location ~ ^/wp-content/uploads/ {
      #pagespeed off;
      #pagespeed unplugged;
      #autoindex on;
      #add_header X-Robots-Tag "noindex, nofollow";
      location ~* ^/wp-content/uploads/(.+/)?(.+)\.(png|jpe?g)$ {
        expires 30d;
        add_header Vary "Accept";
        add_header Cache-Control "public, no-transform";
        try_files $uri$webp_extension $uri =404;
      }

    then restart nginx/php-fpm and clear Cloudflare cache
    Code (Text):
    nprestart
     
  4. ImAProfessional

    ImAProfessional New Member

    5
    0
    1
    Dec 2, 2019
    Ratings:
    +0
    Local Time:
    8:07 PM
    Hi, this worked like a charm for a while! I just ran the update to 1.17.10 and the issue re-appeared. Taking a look at servermanager.guide, looks like the same thing is going on. Any ideas?

    Thanks for the support, and for making the web a better place!
     
  5. eva2000

    eva2000 Administrator Staff Member

    45,444
    10,313
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,997
    Local Time:
    10:07 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    what web browser/device and version you testing with ?

    what is output for command below - wrap output in code tags
    Code (Text):
    cat /usr/local/src/centminmod/config/nginx/webp.conf

    example
    Code (Text):
    cat /usr/local/src/centminmod/config/nginx/webp.conf                       
    map $http_accept $webpok {
       default   0;
       "~*webp"  1;
    }
    map $http_cf_cache_status $iscf {
       default   1;
       ""        0;
    }
    map $webpok$iscf $webp_extension {
      11          "";
      10          ".webp";
      01          "";
      00          "";
    }
    

    strange should be fixed on servermanager.guide with update for new centmin mod installs outlined at Beta Branch - update webp.conf for cloudflare compatibility in 123.09beta01
     
  6. ImAProfessional

    ImAProfessional New Member

    5
    0
    1
    Dec 2, 2019
    Ratings:
    +0
    Local Time:
    8:07 PM
    Code:
    cat /usr/local/src/centminmod/config/nginx/webp.conf
    map $http_accept $webpok {
       default   0;
       "~*webp"  1;
    }
    
    map $http_cf_cache_status $iscf {
       default   1;
       ""        0;
    }
    
    map $webpok$iscf $webp_extension {
      11          "";
      10          ".webp";
      01          "";
      00          "";
    Running Safari 13.0.5, Desktop 2560px wide display
    Cloudflare Free Plan
     
  7. ImAProfessional

    ImAProfessional New Member

    5
    0
    1
    Dec 2, 2019
    Ratings:
    +0
    Local Time:
    8:07 PM
    I just purged my Cloudflare cache, and cleared my browser caches - and it looks like that resolved things. Seeing images now on both my page, along with server manger. User error, I suppose.

    And a lesson learned - to clear Cloudflare caches after major upgrades!

    Thanks
     
  8. eva2000

    eva2000 Administrator Staff Member

    45,444
    10,313
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,997
    Local Time:
    10:07 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    Yeah it seems Cloudflare cache still managed to cache some webP mime type requests despite my above workaround at Beta Branch - update webp.conf for cloudflare compatibility in 123.09beta01.

    If you want to turn off Nginx webP completely when on Cloudflare free plan you can edit /usr/local/src/centminmod/config/nginx/webp.conf

    and change
    Code (Text):
    map $webpok$iscf $webp_extension {
      11          "";
      10          ".webp";
      01          "";
      00          "";
    

    to
    Code (Text):
    map $webpok$iscf $webp_extension {
      11          "";
      10          "";
      01          "";
      00          "";
    

    and restart Nginx
    Code (Text):
    ngxrestart

    so 10 mapping doesn't enable .webp extension on Centmin Mod Nginx. Then images will only be png and jpg without webP.