Jump to content
jacmaes

Webp support

Recommended Posts

I just downloaded the newest dev version and upgraded my website, but image fields does not support WebP. I replaced wire folder, index.php and .htaccess.
Invalid image (in /wire/modules/Inputfield/InputfieldFile/InputfieldFile.module line 821)

Apache2 / PHP7.0 has GD and ImageMagick enabled.

Share this post


Link to post
Share on other sites
1 hour ago, anttila said:

but image fields does not support WebP. I replaced wire folder, index.php and .htaccess.
Invalid image (in /wire/modules/Inputfield/InputfieldFile/InputfieldFile.module line 821)

Do you mean you tried to upload a WebP image to an Images field? If so that's not supported - the blog post explains that WebP is an output format only:

Quote

WEBP is an output format

WEBP images are fundamentally different from other image formats you have used in ProcessWire. WEBP is purely an output format, not an input format. That’s because you still need a fallback JPG or PNG for any WEBP image that you serve, as not all browsers will be able to consume the WEBP images.

In addition, WEBP images have a type of compression that makes them unsuitable for any further manipulation or transformation, so PNG and/or JPG images should still be the standard for any images you upload to your site. All the WEBP images delivered by ProcessWire are automatically generated from source PNG or JPG images.

 

  • Like 1

Share this post


Link to post
Share on other sites

I have WebP support enabled in GD (PHP 7.3), but

$image_field->webp->url

still returns a JPEG file. Anything I'm missing? Is there something to add in the config.php file?

gd.png

Share this post


Link to post
Share on other sites
Just now, jacmaes said:

still returns a JPEG file

Did it create the WEBP version? Maybe the JPG was smaller so it served that up instead. In my limited experience, it's quite common that the webp version is actually larger :)

Share this post


Link to post
Share on other sites

@adrian That's what I first thought too, but no, it's not generated in the corresponding "files" folder. Digging a bit further, it looks like it does not work with @horst's CroppableImage 3 Module, at least in the way I expected it should. So:

$page->image->first->getCrop('landscape')->webp->url;

does NOT work. But:

$page->image->first->webp->url;

does generate a Webp variant correctly.

Share this post


Link to post
Share on other sites

Hello @horst,

first of all thank you for all your efforts to bring WebP support to ProcessWire. 🙂

I have installed ProcessWire 3.0.132 and implemented this code to almost every image:

<?php $image = $image->size(1600, 900); ?>
<picture>
    <source srcset="<?=$image->webp->url?>" type="image/webp">
    <img src="<?=$image->url?>"
         width="<?=$image->width?>"
         height="<?=$image->height?>"
         alt="<?=$image->description?>">
</picture>

Of course with more variations. This is just an example code.

My issue is, that my local MAMP server doesn't support WebP and my webhosting does support it. On the webhoster the WebP variations get generated and everything is fine. But on my local MAMP server, ProcessWire can't generate the WebP variations and tries to generate them on every page load, which leads to a server timeout.

I saw a condition $image->hasWebp in your early drafts. Can I use this for environments that don't support or should ProcessWire better not try to generate WebP variations at all, if there is no WebP support? 😉

Regards, Andreas

Share this post


Link to post
Share on other sites
44 minutes ago, AndZyk said:

My issue is, that my local MAMP server doesn't support WebP and my webhosting does support it.

Have you tried following these instructions to add WebP support to MAMP?

Share this post


Link to post
Share on other sites

I have tried, but don't have pecl installed on my macOS High Sierra and don't know how to install it. I have tried to install pear, but have not managed yet to get it running.

I have contacted the MAMP support and they will consider enabling WebP in a future update. 😉

Share this post


Link to post
Share on other sites

With some help and the instructions I have now managed to install a newer version of Imagick for MAMP and now the WebP support is also working local for me fine.

But is it possible to detect on the server side if WebP is supported so it doesn't try to generate WebP variations on every page load on environments with no WebP support? It think this would be a good addition. 🙂

Share this post


Link to post
Share on other sites

The image rendering engines have gotten a method / check if and which supports webp creation. I think you best drop an issue at pw github, so that ryan gets knowledge about it. 

If I find time I try to check this too. 

  • Like 2

Share this post


Link to post
Share on other sites

Hi,

I have a strange problem as below:
 

Linux box
Chrome always serves jpg files instead of webp files but Firefox does serves the webp files.

Mac Bookpro
Both Chrome and FireFox serve jpg files only.

Any clues??

Gideon

P.S. Solved. Seems like it is a browser cache problem.

Share this post


Link to post
Share on other sites
Posted (edited)

I understand thats it's crucial to save bandwith. That's why we have webP now, finally.

But there is one line in PagefileExtra.php that delivers the normal image url instead of the webp version, if the webp filesize is larger.

In my case and I think on other sites too this is an unwanted behaviour, as quality and colors are different if you compare a jpg and a webp image.

To illustrate this I attached this image, where you can see that the first three products which are being delivered as JPGs because the filesize is smaller are really different looking than the next 3 which are in webp format , especially in the logo area. This is somewhat hard to see here, but on my development site it looks really bad and is a showstopper for me to use webp.

What I ask for is an option to skip the filesize check and maybe the option to enter a treshold value when to use the smaller image.

I created a github issue "make the fallback optional if pagefile->url is smaller than webp"

EDIT: This is already possible if you use  following code:

//_init.php
// output webp version for all $image->url() calls, skip SVG's
if($page->template != 'admin') {
  $wire->addHookAfter('Pageimage::url', function($event) {
    static $n = 0;

    if(++$n === 1) {
      if (strstr($event->object->filename, '.svg') === false){
        $event->return = $event->object->webp()->url(false);
      }
    }
    $n--;
  });
}

chrome_2019-06-12_10-36-09.thumb.png.a4b82c4cb239290161640c47f0b3e418.png

 

Edited by jens.martsch
Solved
  • Like 4

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.

  • Similar Content

    • By toni
      Hi,
      I'm facing a strang problem. In my template I'm setting different sizes for srcset:
      $view->set('images', $page->picture); <img srcset="{$img->size(780,0)->url} 780w, {$img->size(1024,0)->url} 1024w, {$img->size(1440,0)->url} 1440w" src="{$img->url}" class="col__image"> All fine. However, the moment I reorder images in backend the different generated image sizes are broken.
      Does somebody has an idea what could cause it? 
      Version: ProcessWire 3.0.123 
       
      Thanks!
      Toni
    • By nabo
      Hello
      I'm working on a project that use PW as backend CMS. PW serves formatted data of each page but the engine simply generates json from pagearray.
      I would like to set one or more variations on images, so I think it would be useful if there were a field to set possible variations... even with overrides!
    • By PawelGIX
      Can I convert uploaded images to PNG, GIF, BMP -> JPEG?
      Is there any function in the API that I can change the file type?
    • By Robin S
      Repeater Images
      Adds options to modify Repeater fields to make them convenient for "page-per-image" usage. Using a page-per-image approach allows for additional fields to be associated with each image, to record things such as photographer, date, license, links, etc.
      When Repeater Images is enabled for a Repeater field the module changes the appearance of the Repeater inputfield to be similar (but not identical) to an Images field. The collapsed view shows a thumbnail for each Repeater item, and items can be expanded for field editing.
      Screencast

      Installation
      Install the Repeater Images module.
      Setup
      Create an image field to use in the Repeater field. Recommended settings for the image field are "Maximum files allowed" set to 1 and "Formatted value" set to "Single item (null if empty)". Create a Repeater field. Add the image field to the Repeater. If you want additional fields in the Repeater create and add these also. Repeater Images configuration
      Tick the "Activate Repeater Images for this Repeater field" checkbox. In the "Image field within Repeater" dropdown select the single image field. You must save the Repeater field settings to see any newly added Image fields in the dropdown. Adjust the image thumbnail height if you want (unlike the core Images field there is no slider to change thumbnail height within Page Edit). Note: the depth option for Repeater fields is not compatible with the Repeater Images module.
      Image uploads feature
      There is a checkbox to activate image uploads. This feature allows users to quickly and easily add images to the Repeater Images field by uploading them to an adjacent "upload" field.
      To use this feature you must add the image field selected in the Repeater Images config to the template of the page containing the Repeater Images field - immediately above or below the Repeater Images field would be a good position.
      It's recommended to set the label for this field in template context to "Upload images" or similar, and set the visibility of the field to "Closed" so that it takes up less room when it's not being used. Note that when you drag images to a closed Images field it will automatically open. You don't need to worry about the "Maximum files allowed" setting because the Repeater Images module overrides this for the upload field.
      New Repeater items will be created from the images uploaded to the upload field when the page is saved. The user can add descriptions and tags to the images while they are still in the upload field and these will be retained in the Repeater items. Images are automatically deleted from the upload field when the page is saved.
      Tips
      The "Use accordion mode?" option in the Repeater field settings is useful for keeping the inputfield compact, with only one image item open for editing at a time. The "Repeater item labels" setting determines what is shown in the thumbnail overlay on hover. Example for an image field named "image": {image.basename} ({image.width}x{image.height})  
      https://github.com/Toutouwai/RepeaterImages
      https://modules.processwire.com/modules/repeater-images/
    • By Kiwi Chris
      In the RTE, when inserting a link, there are several input fields that can be used to select a page, including a text input field that will auto-complete with pages on the site.
      When inserting an image, there is only an option to navigate the page tree. (equivalent to the second input option 'Select Page...' on the Insert Link screen from the RTE.
      When inserting an image from another page buried somewhere in the page tree, if you know the name of the page, it would often be quicker to use an auto-complete text field than 'Select Page...' option.
      It would be nice if the image insertion dialog offered the same functionality as the link insertion dialog so that when selecting a page it's possible to choose either to navigate the page tree, or have a text auto-complete field.
×
×
  • Create New...