Webp support

[matjazp]

Should webp extra image get deleted if you replace the original image? That is: upload an image, thumb is generated, then create webp extra by using $myimge->webpurl, then in the admin you replace the image by uploading with the same name eg. replace img1.jpg with img1.jpg. Original image is replaced, thumb is recreated, but webp stay the same. This is how it should be?

[horst]

Please file a github issue (with the pw version)

[matjazp]

I first time used $config->pagefileSecure = true; option in config.php. When I echo the image webp extra like this in the template:

echo "<a href='{$img->webpUrl}'>Click to view image</a> ";

and then click on the link, the image can be viewed in the browser, as expected. But when I set pagefileSecure to true, reload the page and click on the link, the image is downloaded. I can see the warning in Chrome console:

Resource interpreted as Document but transferred with MIME type application/octet-stream: "http://localhost/site/assets/files/1015/nature1.webp". 

Also, headers changed to:

Content-disposition: attachment; filename="nature1.webp"

Content-transfer-encoding: binary

Content-Type: application/octet-stream

 

Is this expected or maybe something wrong with my webserver config (IIS)? I didn't change access permissions on the template and also viewing the image logged as admin user.

[MilenKo]

Hello to all mighty people and Happy New decade start. Wish you all the greatest goodness, joy and happiness. Well, and a lot of great code as well ?

I've implemented WEBP images to optimize my soon to be released profile and by a lucky coincidence I discovered on my Mac that no images are showing when using the Safari. I thought that Apple would have embraced the idea by now when several other browsers have already done that but it seemed like I was wrong.

I tested the .htaccess approach, however I could not make it working under Safari, so I decided to add a little function to my _functions.php:

//WEBP Image Support
function webp_support($imgURL)
{
    // Check if the browser headers contain image/webp support
    if(strpos($_SERVER['HTTP_ACCEPT'], 'image/webp')) { 

        // If yes, use the webp image url
        return $imgURL->webp;
    
    } else {

        //Else, show the original image url
        return $imgURL;

    }
}

After that, in every image call I do the following:

<?php
$img = $page->images->first // Call for the image location
$image = webp_support($img->size(100,100)) // Used to size an image and convert it to WEBP

//Image call in the markup
echo "<img src='{$image->url}' alt='{$image->description}' >";

That seems to be working fine and show the WEBP format on Chrome, Opera and Firefox under MacOS/Windows/Linux but show the original image version under Safari. I did not test with the Windows version of Safari since it is a long time not updated version and it won't make much sense to support the newer format anyway.

My question for you is if there is a simpler approach than my current to show WEBP images to the supported browsers and fallback to original If not?

[3fingers]

For one site I made some time ago I've tried to use the following "official" strategy:

Blogpost from Ryan / May 31, 2019

but, somehow the fallback didn't work on Safari and IE11. I didn't investigate further because I had to deliver the project and until then I've dropped that feature for now.
Your solution looks simple and elegant for me, I couldn't tell the difference against the .htaccess approach (I'm no expert by any mean).

[tpr]

@MilenKo

Just a minor issue that caught my eyes: I would "cache" the webp support in eg. config.php so it shouldn't be evaluated on each function call:

$config->isWebpSupported = strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false;

if($config->isWebpSupported) {
  // ...

or use a static variable inside the function to evaluate only once:

function webp_support($imgURL)
{
    static $isWebpSupported = strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false;

    if($isWebpSupported) { 
    	// ...
    } else {
        // ...
    }
}

Note that I used "!== false" because if "image/webp" is at the beginning, the strpos gives 0, and it's false (not sure if it can be at 0 position, but it's a good practice to use like this imo).

(untested, haven't written PHP for months :))

[adrian]

2 hours ago, MilenKo said:

I thought that Apple would have embraced the idea by now when several other browsers have already done that but it seemed like I was wrong.

Just in case you haven't come across this site before: https://caniuse.com/#search=webp

[MilenKo]

Thanks @tpr for the static variable and "cache" approaches. I believe that after reading the @teppo detailed instructions about the different approaches, I would start using the <picture></picture> approach for new sites, however would give another try to the automatic webp conversions through .htaccess and code calls in the instructions. I have no doubt that in the next one or two versions, Apple would be having already the WEBP implemented which would simplify the things, however until then, it is good to know the best practices and most important, which way works best for us and users.

Since my profile is fully completed but it is not yet live since I am adding the content now, it won't hurt me to try all the kindly suggested approaches and see for myself which one to keep.

Btw, HAVE AN AMAZING AND PRODUCTIVE 2020 YEAR!

[AndZyk]

On 1/2/2020 at 6:05 PM, 3fingers said:

For one site I made some time ago I've tried to use the following "official" strategy:

Blogpost from Ryan / May 31, 2019

but, somehow the fallback didn't work on Safari and IE11. I didn't investigate further because I had to deliver the project and until then I've dropped that feature for now.
Your solution looks simple and elegant for me, I couldn't tell the difference against the .htaccess approach (I'm no expert by any mean).

I also had the same trouble with strategy 2. So I switched to strategy 3, wich is a little more effort but better in my opinion. ?

Regards, Andreas

[mahu]

Hi,

i'm trying to add text-watermarks to images placed in a textarea using a textformatter. It works with jpegs executing the function $image->width(123)->watermark('some text') that replaces the variation with a watermarked one. But the webp variation will be created from the original file and there is no watermark. I played a bit with a hook before imSaveReady but the only thing i could achieve, was a watermark on the original file, but here i don't want it.

Has anyone an idea how i can achieve this (using processwire functions and hooks)?

[Ivan Gretsky]

Good day!

I got a strange issue with webp images on one server. The same image works fine on Firefox and does not show (though blinks for a momдnent when trying to open it) in Chrome. I did regenerate it without luck. Then installed Imagick sizer, regenerated - same thing.

Same code works fine on local machine, generating images readable in both browsers (or serving them in correct way), so must be a server issue. But what could it be? Example image used on this page.

Please help!

[matjazp]

I can replicate here. There must be something wrong with the image, as it opens in FF and other deskop image viewers on windows. I recreated webp from your original jpg (using online jpg to webp converter) and this time Chronme shows the image. I have no idea what could be wrong, possible Chrome issue?

[uiui]

Hi,

Locally I'm using Processwire 3.0.164 on MAMP 4.1.0. with ImageMagick 6.8.9.

The phpinfo lists WEBP under ImageMagick supported format. Nonetheless, ->webp->url is returning a JPG-URL for any image. Why is that?

[horst]

Do you have enabled the Imagemagick rendering engine in PW?

You also may set strictly use the webp variation, also if the jpeg or png source is smaller in filesize. This is not often the case, but its possible.

site/config.php:

$config->webpOptions = array_merge($config->webpOptions, [
    'quality' => 84,
    'useSrcExt' => false,           // Use source file extension in webp filename? (file.jpg.webp rather than file.webp)
    'useSrcUrlOnSize' => false,     // Fallback to source file URL when webp file is larger than source?
    'useSrcUrlOnFail' => true       // Fallback to source file URL when webp file fails for some reason?
]);

 

[uiui]

On 8/21/2020 at 12:51 PM, horst said:

Do you have enabled the Imagemagick rendering engine in PW?

That was it. Thank you so much.

[jonatan]

For anyone interested in using Cloudflare CDN and a processwire webp output strategy:

 

[Ralf]

Hello everybody,

i am currently working on a project where i want to implement the webp support in the code (<picture>...).
But what I'm already busy with all this weekend, that PW for whatever reason doesn't always generate a webp image?

In the first screenshot (which is reproducible) no webp image is generated.

But if I edit this original picture and change parts of it, then make a jpg out of it and upload it, it works.

Unfortunately, this is not only the case with this picture, but with other pictures this has already happened to me on Friday ?

Help what could be the reason for this?

-----------

The server specification from my hosting provider
ProcessWire 3.0.165
PHP version 7.4.10

gd module version 2.1.1
WebP Support - enabled

imagick module version 3.4.4
but NO entry in the supported formats!
(that's why I did not enable IMagick Image Sizer)

[dotnetic]

I remember this issue, which could be related: make the fallback optional if pagefile->url is smaller than webp · Issue #903 · processwire/processwire-issues (github.com)

[eelkenet]

Today I again bumped into an issue I had last year with creating WebP images:

Enabling WebP on another project by setting  imageSizerOptions' webpAdd to true immediately resulted in the same behaviour as I had last year: the server simply keeps on creating new variations of images, while they already exist. WebP images are created correctly by the way.

Seems to be a bug, can anybody else confirm? I am using PW Master (3.0.165) on MAMP Pro (MacOS 11.2, PHP 7.4.2)

 

[AndZyk]

Hello @eelkenet,

I had that issue on my local MAMP server, when this feature was introduced.

I tried this config option, but for me it doesn't work at all. Is it mandatory to edit your .htaccess?

Because strategies 1 and 2 didn't work for me, I use strategy 3 with an own config variable ($config->useWebP) and disable WebP on my local MAMP server.

Regards, Andreas

[horst]

On 4/12/2021 at 5:36 PM, eelkenet said:

Seems to be a bug, can anybody else confirm? I am using PW Master (3.0.165) on MAMP Pro (MacOS 11.2, PHP 7.4.2)

HI @eelkenet,

I have setup a new test site today and it looks that any possible setting is working as expected from the PW image generation site. So it seems I need some more information from your setup.

Especially this:

• what settings are you using for $config->imageSizerOptions ?
• what are the settings for $config->webpOptions ?
• how do you call the image url in your template file(s) with $image->size()->webp->url or $image->size()->url, or how?
  do you use an individually passed options array there?
• what are your settings in the .htaccess file ?

Please can you provide these information as exact as possible. If you don't want to post this here you can PM me.

My newly set up testing, without any settings in the .htaccess doesn't recreate any variations. It looks like this:

[eelkenet]

@horst Oh my, I'm sorry for never replying to you! I think I have finally found the origin of my and @AndZyk's situation: MAMP PRO on MacOS (5.7) simply does not have WebP support enabled.

I still don't know why this creates all the new copies, because it seems that all moving parts seem to be aware that webp is in fact not enabled. With this basic check:

<?php

namespace ProcessWire;

include "index.php";
error_reporting(E_ALL);
?>

<pre>
<h3>Check directly using gd_info()</h3>

<?php
$gd_info  = gd_info();
$webpSupport = isset($gd_info['WebP Support']) ? $gd_info['WebP Support'] : false;
print_r($gd_info);
echo $webpSupport ? "\nWebP is supported" : "\nWebP is NOT supported";
?>


<hr>
<h3>ImageSizerEngineIMagick</h3>
<?php
$imagick = $modules->get("ImageSizerEngineIMagick");
$supported = $imagick->supported("webp");
echo $supported ? "WebP is supported" : "WebP is NOT supported";
echo "\nFormats: " . print_r($imagick->getSupportedFormats(), true);
?>

<hr>
<h3>ImageSizerEngineGD</h3>
<?php
$gd = new ImageSizerEngineGD();
$supported = $gd->supported("webp");
echo ($supported ? "WebP is supported" : "WebP is NOT supported");
echo "\nFormats: " . print_r($gd->getSupportedFormats(), true);
?>
</pre>

I get these results on my MAMP PRO machine:

Check directly using gd_info()


Array
(
    [GD Version] => bundled (2.1.0 compatible)
    [FreeType Support] => 1
    [FreeType Linkage] => with freetype
    [GIF Read Support] => 1
    [GIF Create Support] => 1
    [JPEG Support] => 1
    [PNG Support] => 1
    [WBMP Support] => 1
    [XPM Support] => 
    [XBM Support] => 1
    [WebP Support] => 
    [BMP Support] => 1
    [TGA Read Support] => 1
    [JIS-mapped Japanese Font Support] => 
)

WebP is NOT supported


ImageSizerEngineIMagick

WebP is NOT supported
Formats: Array
(
    [source] => Array
        (
            [0] => JPG
            [1] => JPEG
            [2] => PNG24
            [3] => PNG
            [4] => GIF
            [5] => GIF87
        )

    [target] => Array
        (
            [0] => JPG
            [1] => JPEG
            [2] => PNG24
            [3] => PNG
            [4] => GIF
            [5] => GIF87
        )

)


ImageSizerEngineGD

WebP is NOT supported
Formats: Array
(
    [source] => Array
        (
            [0] => JPG
            [1] => JPEG
            [2] => PNG
            [3] => GIF
        )

    [target] => Array
        (
            [0] => JPG
            [1] => JPEG
            [2] => PNG
            [3] => GIF
        )

)

 

And these on the online host:

Check directly using gd_info()


Array
(
    [GD Version] => 2.2.5
    [FreeType Support] => 1
    [FreeType Linkage] => with freetype
    [GIF Read Support] => 1
    [GIF Create Support] => 1
    [JPEG Support] => 1
    [PNG Support] => 1
    [WBMP Support] => 1
    [XPM Support] => 1
    [XBM Support] => 1
    [WebP Support] => 1
    [BMP Support] => 1
    [TGA Read Support] => 1
    [JIS-mapped Japanese Font Support] => 
)

WebP is supported


ImageSizerEngineIMagick

WebP is supported
Formats: Array
(
    [source] => Array
        (
            [0] => JPG
            [1] => JPEG
            [2] => PNG24
            [3] => PNG
            [4] => GIF
            [5] => GIF87
        )

    [target] => Array
        (
            [0] => JPG
            [1] => JPEG
            [2] => PNG24
            [3] => PNG
            [4] => GIF
            [5] => GIF87
            [6] => WEBP
        )

)


ImageSizerEngineGD

WebP is supported
Formats: Array
(
    [source] => Array
        (
            [0] => JPG
            [1] => JPEG
            [2] => PNG
            [3] => GIF
        )

    [target] => Array
        (
            [0] => JPG
            [1] => JPEG
            [2] => PNG
            [3] => GIF
            [4] => WEBP
        )

)

I have reached out to the MAMP folks for info on how I could go about enabling it here.
The only related issues on StackOverflow etc are pointing in the wrong direction it seems (homebrew etc).

[eelkenet]

19 hours ago, eelkenet said:

I have reached out to the MAMP folks for info on how I could go about enabling it here.
The only related issues on StackOverflow etc are pointing in the wrong direction it seems (homebrew etc).

 Update: The solution is to upgrade (paid) to MAMP PRO 6, this version comes with WebP support.
The upgrade costs a lot less than all the time I've spent chasing this bug.. ?

Edit: it took really long to convert all images, and I figured out a faster way using the command line. Read more in the tutorial.

 

[AndZyk]

Thank you for the update. I am always using the latest MAMP PRO and didn't notice this issue anymore.

But I also defined as workaround a own config variable "useWebP", which I set to false for my development environment. ?

<picture>
	<?php if ($config->useWebP): ?>
  		<source srcset="path/to/image-webp" type="image/webp">
	<?php endif; ?>
  	<img src="path/to/image">
</picture>

[taotoo]

I too failed to get Strategy 2 working, but this does seem to work for me:

RewriteCond %{HTTP_ACCEPT} !image/webp
RewriteRule (.+)\.webp$ $1.jpg [T=image/jpeg,E=REQUEST_image]