October: Can't use new webp image format in media manager

[ghost]

• OctoberCMS Build: 446
• PHP Version: 7.0
• Database Engine: SQLite

Description:

It seems that the media manager can't deal with image in webp format. When there images with that format, it display an error :

"Call to undefined function October\Rain\Database\Attach\imagecreatefromwebp()" on line 495 of /vendor/october/rain/src/Database/Attach/Resizer.php

Steps To Reproduce:

Just put a webp image in your media folder and try to browse it using the media manager.

[w20k]

@PubliAlex webp is not currently supported in OCMS, if I'm not mistaken.

[ghost]

Ok thank you for the answer.

Just a fact :

• Photo with needed transparency in PNG format : 458ko
• Same photo in webp format : 58ko, and transparency is still there (compared to jpeg)

It would be a big plus for october cms to natively support that next gen format.

[w20k]

@PubliAlex you could provide a PR to support it or submit a bounty for someone to deal with it 😉

[ghost]

I will try to create a PR for this, but not at the moment, it's vacation time really soon :)

[oscarnevarezleal]

I just ran into the same issue yesterday, seems that _imagecreatefromwebp_ is not defined in an easyapache environment.

[mabehiry]

The same problem with me. It seems that the client uploaded unsupported image. How to handle the error?

[LukeTowers]

@mabehiry easy way to prevent the uploading of webp right now is to add a config entry cms.fileDefinitions.defaultExtensions and return the array of extensions listed here: https://github.com/octobercms/library/blob/master/src/Filesystem/Definitions.php#L99-L144 - without the webp format. This will prevent it from being allowed to upload in the first place.

[Samuell1]

Using webp images now is little bit a scary because some browser dont support it yet.
https://caniuse.com/#feat=webp

[ghost]

@Samuell1 use the <picture> element and add a fallback image e.g.

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

The only browser that doesn't support webp is Safari this is due to them losing the Next-Gen Image war! Safari created this useless format: https://caniuse.com/#feat=jpeg2000

Notice how Safari is the only one using their junk format.

Microsoft created JPEG XR see here: https://caniuse.com/#feat=jpegxr

But Microsoft hats off to them still supported webp.

My point to this comment is that October should support webp and have in the doc's a note about what I've said about the next-gen image formats.

If you use next-gen then you need create a fallback using the picture element - but October should support it I think.

There are other formats such as: BPG, FLIF etc. but will never get supported by Browsers as they do not contain an Open Source licenese and have patents on them.

[ghost]

@LukeTowers p.s. your link: https://github.com/octobercms/library/blob/master/src/Filesystem/Definitions.php#L99-L144

It's missing two major formats:

• av1 - a video format by Google which is going to become the new standard on the internet for video streaming, see here: https://www.caniuse.com/#feat=av1

• apng - an aminated image standard, see here: https://www.caniuse.com/#feat=apng

I don't mind creating a pr and adding those two formats.

[Samuell1]

@ayumihamsaki you cant use picture if user uploads only webp image

[ghost]

@Samuell1

Using webp images now is little bit a scary because some browser dont support it yet.
https://caniuse.com/#feat=webp

You said about browser support and I replied you need to use <picture> to create fallback images.

you cant use picture if user uploads only webp image

I can't make user's intelligent and teach them about webp and fallback images.

A person in the know would upload two or more images into October and then code it out correctly.

~I know I have used webp and webm in October for over 3 years now!

Plus you should add code into your .htaccess by the way, e.g.

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

and

AddType image/webp                                  webp

etc.

[github-actions[bot]]

This issue will be closed and archived in 3 days, as there has been no activity in the last 30 days. If this issue is still relevant or you would like to see action on it, please respond and we will get the ball rolling.

[LukeTowers]

@publialex

[mabehiry]

I'm still having the same issue!
User uploaded a jpg file, for some reason this error has appeared!
It throws a FatalThrowableError, I tried to handle it using try and catch, but it still appear making the website to crash!
This is my code:

try{
        $excerpt['image'] = $this->image->getThumb(700, 400, 'exact'); 
}catch(\Exception $e){ */
    $excerpt['image'] = ''; 
}

What should I do to handle this error?

[bennothommo]

@mabehiry You have to enable WEBP support on the server for the GD library in order for the imagecreatefromwebp method to be usable. You can view the necessary information for this here: https://www.php.net/manual/en/image.installation.php.

We can add handling for this, however, we'd still need to throw exceptions if the method is not available, so people would still get error screens if they try to use a WEBP file on a server that doesn't support it.

[mabehiry]

@bennothommo Thank you. I've enabled it

[cregx]

I don't know if I understood everything in the discussion, but I agree with @ghost that OctoberCMS should support webp. There is no reason why the Media Manager should not support the webp format. Safari will also support this format with macOS Big Sur.

[LukeTowers]

@cregx AFAIK it does support webp right now.

[bennothommo]

@cregx There is a perfectly valid reason - we support IE11 still, and IE11 does not support WEBP. If someone were willing to add the graceful handling of the media manager if the WEBP format (or imagecreatefromwebp PHP method) were not available, then we could consider enabling it by default, but at this stage, it's showing hard errors and affecting the experience so we simply can't enable it by default.

[cregx]

@bennothommo Unfortunately I see it differently. The IE11 represents a very small share with less than 3%. However, if you continue to focus on this browser, you should be prepared for this browser to remain with us for many, many years to come. This can also be seen in the new Edge Chromium from Microsoft, which continues to integrate the IE11 browser (Enterprise Mode). And for this reason I think it is wrong to slow down new technology to the detriment of progress.

[bennothommo]

@cregx I appreciate your thoughts, but we aren't slowing it down though - if people want to use WEBP, they most certainly can. We are simply stating that by default, we don't enable it. I also am saying that if someone wants to update the media library widget to gracefully handle when WEBP is enabled but being used on a browser (or server) that does not support it, then we can possibly change those defaults.

[artisticdigital]

With iOS 14 - .webp is now compatible including that last hold-out browser Safari. Only IE11 is incompatible and who cares...
In addition, iOS 13 doesn't support transparent .png or .gif (renders them as .jpg with white bg)...
All Android devices/browsers are accepting .webp as well as Windows (again, other than Safari).
I'm humbly suggesting the filetype be added to the standard config. / MEDIA console please.

[LukeTowers]

@bennothommo what's the current behavior if webp is enabled locally and the server / client doesn't actually support it?

[bennothommo]

@LukeTowers I believe it throws an error from the server as it attempts to use the imagecreatefromwebp command. If the server supports it but the browser doesn't (limited to IE11 and Safari <= 13), it's simply not displayed.