Jump to content
jacmaes

Webp support

Recommended Posts

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?

webp.gif

  • Like 1

Share this post


Link to post
Share on other sites

Please file a github issue (with the pw version)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

  • Like 1

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

@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 :))

  • Like 1

Share this post


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

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

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!

  • Like 1

Share this post


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

  • Like 1

Share this post


Link to post
Share on other sites

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)?

Share this post


Link to post
Share on other sites

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!

  • Like 1

Share this post


Link to post
Share on other sites

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?

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By thausmann
      Hey, I'm trying to completely switch over to WebP and noticed some strange behaviour. Let's say I upload a PNG in Processwire of size 1280x800.
      $page->image->url ➝ correct URL (filename.webp) $page->image->width(800)->url ➝ correct URL (filename.800x0.webp) $page->image->width(1280)->url ➝ wrong URL (filename.1280x0.png), webp file is not generated $page->image->width(1280)->url(false) ➝ correct URL (filename.1280x0.webp) but webp file is not generated So: When I request a size that equals the original file, no WebP conversion is happening (no webp file is created, although a new PNG is generated (...1280x0.png)).
      When I use url(false), I get the expected URL but still the file is not generated. Also interesting: this issue is only occuring with PNG, not JPG.
       
      My Configuration:
      $config->imageSizerOptions('webpAdd', true);  $config->imageSizerOptions('defaultGamma', -1); GD Pageimage::url Hook from here  Also tried to output width(1280)->webp->url, it makes no difference I checked that the PNG version is not smaller in filesize (PNG=450KB, WebP (from other tool)=60KB) Tested with Processwire 3.0.148 and 3.0.160 dev I think this post is about the same issue and where I got the url(false) from. Setting 'useSrcUrlOnFail' => false inside $config->webpOptions results in correct output URL (filename.1280x0.webp), but still the file is not generated. So maybe the webp conversion fails? Apparently I see zero webp logs in logs/image-resizer.txt  
      "Don't use resize" seems like a solution here but this is a generic approach in my code, sometimes uploaded images are simply already in the correct size. 
      Any ideas how to fix this and always get dem sweet sweet WebP images? Or did I find a bug?
      Maybe @horst has an idea what the cause of this phenomenon could be? 😇
    • By horst
      Hi, on a site I want to disable access to original images and only allow to access thumbnails and watermarked image variations.
      EDIT:
      A good solution for protecting original images can be found a bit down in this thread:
       
      Old content of this initial post:
       
    • By Guy Incognito
      I seem to be running into a repeated fatal error in a fresh PW install version 3.0.148. I can't quite put my finger on the pattern but it seems to be around deleting image fields or removing images from certain image fields.
      This is the trace from the log generated by trying to save a page and delete an image from an image field:
      Fatal Error: Uncaught Error: Cannot access protected property Pageimage::$original in /wire/core/PageimageVariations.php:256 Stack trace: 1. /wire/core/Pageimage.php(1327): PageimageVariations->getInfo() 2. /wire/core/Wire.php(386): Pageimage->___isVariation() 3. /wire/core/WireHooks.php(823): Wire->_callMethod() 4. /wire/core/Wire.php(450): WireHooks->runHooks() 5. /wire/core/Pageimage.php(1369): Wire->__call() 6. /wire/core/Pageimage.php(399): Pageimage->getOriginal() 7. /wire/core/WireData.php(333): Pageimage->get() 8. /wire/core/PageimageVariations.php(256): Pro Line 256 of /wire/core/PageimageVariations.php Earlier in the day I was experimenting with custom fields for images for the first time and kept running into this error, thinking it was me using this feature wrong and not having time to read up I deleted the custom image fields template and went about my business. So now I don't know if I triggered an issue or whether it was never related to the custom image fields in the first place?
      Any ideas?
    • By humanafterall
      I'm using some Custom fields for images: 
      https://processwire.com/blog/posts/pw-3.0.142/#custom-fields-for-files-images

      When I save the page, and return the fields are blank. When I re-add the text to the fields and save again then the fields save as expected.

      I know this is stated as being quite experimental but it's super useful feature I'd love to get working correctly.
      I have fields that are CKEditor fields but have overidden this on the image specific template. I've also tried it with regular text fields and I get the same bug.
      (currently using Processwire 3.0.155)
      **UPDATE**
      I've found this issue is specific to editing on pages using the PageTable fieldtype. The fields are not saving when I save the page in the PageTable.
    • By Robin S
      Displays image tags overlaid on the thumbnail using customisable colours. This makes it easier to see which images have which tags without needing to open the edit pane for individual images or changing to the list view.
      Screenshot

      Usage
      Enable tags for one or more image fields. Install the Image Thumbnail Tags module. Optionally configure colours for any of your tags.
       
      https://github.com/Toutouwai/ImageThumbnailTags
      https://modules.processwire.com/modules/image-thumbnail-tags/
×
×
  • Create New...