Jump to content
ryan

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

Recommended Posts

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/ 

  • Like 12
  • Thanks 3

Share this post


Link to post
Share on other sites

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

1426364558_2019-06-0116_25_17.png.a3db09d6aae9010857e3c900eddb4a89.png

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

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 🙂

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...