New blog post: WEBP strategies, Google Client API, FormBuilder and more

[ryan]

This week we’ll take a look at 3 different WEBP image strategies that you can use in ProcessWire 3.0.132+. Then we’ll dive into a major update for the Google Client API module, and finish up by outlining some useful new updates in FormBuilder—

https://processwire.com/blog/posts/webp-images-and-more/ 

[wbmnfktr]

So many new features... so little time. ?

[wbmnfktr]

FYI: The FormBuilder cookie feature throws an error when using Foundation v6 as output framework. The other options work without any flaws.

[Tom.]

Another good WebP strategy would be to use:

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
    // webp is supported!
}

This would be good paired with webp->url, so it will fallback to the default image if it isn't supported. 

EDIT: 
Pull Request - https://github.com/processwire/processwire/pull/145

[elabx]

Just awesome feature! I'm testing the output strategy with the hook, but I can't seem to make it work if the url() method is preceded by size(). Anyone bumped into this?

Ended up using method without the hook, leaving the jpg extension. Works just fine ?

[Tom.]

On 6/11/2019 at 11:06 AM, Tom. said:

Another good WebP strategy would be to use:

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
    // webp is supported!
}

This would be good paired with webp->url, so it will fallback to the default image if it isn't supported. 

EDIT: 
Pull Request - https://github.com/processwire/processwire/pull/145

This will not work as @horst correctly pointed out, it will not work with ProCache. 

I'm looking at the .htaccess method however, it doesn't seem to work if it is running in a subdirectory 

# Output WEBP image URLs from ProcessWire, but redirect them to the
# JPEG or PNG when the browser does not support WEBP.

RewriteCond %{HTTP_ACCEPT} !image/webp [OR]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{DOCUMENT_ROOT}/$1$2$3/$4.jpg -f
RewriteRule ^(.*?)(site/assets/files/)([0-9]+)/(.*)\.webp(.*)$ /$1$2$3/$4.jpg [R=307,L]

RewriteCond %{HTTP_ACCEPT} !image/webp [OR]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{DOCUMENT_ROOT}/$1$2$3/$4.png -f
RewriteRule ^(.*?)(site/assets/files/)([0-9]+)/(.*)\.webp(.*)$ /$1$2$3/$4.png [R=307,L]

.htaccess rules are definitely not my strong point. Though I've noticed %{REQUEST_URI} mentioned. What is the correct way of getting it to work in a subdirectory? 

[JFn]

I've just implemented Strategy #1 on an image-heavy website (full-screen backgrounds, image galleries).
Works like a charm, savings go up to 80% for some images!

You mentioned:

Quote

One drawback (or benefit?) to consider: If the user downloads the image for some purpose other than viewing it on the website, they probably won’t be able to because it’ll result in a WEBP image with a JPG or PNG extension.

I also thought this is a benefit, however for me it doesn't work as you describe. When downloading the image, the original jpg is still fetched, not the webp with jpg extension, although the Chrome network console clearly states that it's a webp that's loaded into the page. I tried with and without commenting out the '-strmatch 'nc=*' line.

[ceberlin]

I have problems with Method 2 at our provider DF.eu (Apache 2.4):

RewriteCond %{HTTP_ACCEPT} !image/webp [OR]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{DOCUMENT_ROOT}/$1$2$3/$4.jpg -f
RewriteRule ^(.*?)(site/assets/files/)([0-9]+)/(.*)\.webp(.*)$ /$1$2$3/$4.jpg [R=307,L]

Works not reliably on the LIVE server - Safari sometimes tries to show still WebP. On the MAMP/Mac Server it works.

RewriteCond %{HTTP_ACCEPT} !image/webp [OR]
RewriteCond %{REQUEST_FILENAME} !-f
# RewriteCond %{DOCUMENT_ROOT}/$1$2$3/$4.jpg -f
RewriteRule ^(.*?)(site/assets/files/)([0-9]+)/(.*)\.webp(.*)$ /$1$2$3/$4.jpg [R=307,L]

On the LIVE server this works (3rd condition commented out). I wonder, why.

[dragan]

So, for the first time ever, I am trying to use the Webp feature. Alas, no luck.

ProcessWire: 3.0.147
PHP: 7.2.19
Webserver: Apache/2.4.35 (Win64) OpenSSL/1.1.1b
MySQL: 5.7.24

I used the .htaccess method. I tried with FF + Chrome. I created new images, de-activated Pro Cache.

I have added this to site/config.php:

$config->contentTypes('webp', 'image/webp'); // seen elsewhere in a forum thread

+ these lines at the top of my .htaccess:

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

Still, no Webp images are generated (assets/files/123/ only has JPG versions) or shown in the browser. The mod_mime Apache module is definitely loaded, and I have restarted the server.

What else do I need to check?

 

[gebeer]

8 hours ago, dragan said:

What else do I need to check?

I had that problem, too. Until I discovered that my PHP gd library didn't have webp support installed. So you need to check that in phpinfo.

I am using laradock for my local dev environment. In my php-fpm container, I had to install libwebp-dev. For my specific environment this was achieved with

RUN apt-get update -yqq && \
    apt-get install -y libwebp-dev

RUN docker-php-ext-configure gd \
  --enable-gd-native-ttf \
  --with-jpeg-dir=/usr/lib \
  --with-webp-dir=/usr/lib \
  --with-freetype-dir=/usr/include/freetype2 && \
  docker-php-ext-install gd

 

[dragan]

9 hours ago, gebeer said:

So you need to check that in phpinfo.

Thanks. I already checked that:

I thought maybe it was just with images that are included within CKE, but it's also not outputting WebP format when I choose images inside my template.

?