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

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!

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

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 eutervogel
      Hi, 
      what I'm doing is this:
       
      <picture> <source srcset="<?php echo $page->section_three->main_img->first()->size(396,710)->webp->url; ?>" type="image/webp"> <img class="p_absoulte pp_block" src="<?php echo $page->section_three->main_img->first()->size(396,710)->url; ?>" alt=""> </picture> and for some reason it sometimes becomes this:
      <picture> <source srcset="/site/assets/files/1057/sektion3_bild-1.396x710.png" type="image/webp"> <img class="p_absoulte pp_block" src="/site/assets/files/1057/sektion3_bild-1.396x710.png" alt=""> </picture> It seems to be related to ->size(). When I don't use ->size() the webp Url is correct.
      I'm using the image-field inside a Fieldset(Page). Could that be a problem too?
      I just increased the output size by 2px and voila the webp url comes up. 
      I deleted all variations (webp variation is present in correct size) changed it back to the original size and again: a png url.

      I also tried to rename the image and load it up agian. 
      ...same behavoir.
      Thanks in advance guys
       
    • By Peter Knight
      Is anyone here using WEBP as their output image format and what is your server / environment setup?
       I know there's support for it in PW lately and decided to investigate.
      Found it quite difficult to do this on a practical level. IE My current VPS is Cent OS 6 and Plesk and unless I'm wrong, WEBP is not supported by either.
      Which host and setup are you on that allows you to run WebP?
      Cheers
    • By Robin S
      Add Image URLs
      Allows images/files to be added to Image/File fields by pasting URLs.

      Usage
      Install the Add Image URLs module.
      A "Paste URLs" button will be added to all image and file fields. Use the button to show a textarea where URLs may be pasted, one per line. Images/files are added when the page is saved.
       
      https://github.com/Toutouwai/AddImageUrls
      https://modules.processwire.com/modules/add-image-urls/
    • By gebeer
      Hello all,
      sharing my new module FieldtypeImageReference. It provides a configurable input field for choosing any type of image from selectable sources. Sources can be: 
      a predefined folder in site/templates/ and/or a  page (and optionally its children) and/or the page being edited and/or any page on the site CAUTION: this module is under development and not quite yet in a production-ready state. So please test it carefully.
      UPDATE: the new version v2.0.0 introduces a breaking change due to renaming the module. If you have an older version already installed, you need to uninstall it and install the latest master version.
      Module and full description can be found on github https://github.com/gebeer/FieldtypeImageReference
      Install from URL: https://github.com/gebeer/FieldtypeImageReference/archive/master.zip
      Read on for features and use cases.
      Features
      Images can be loaded from a folder inside site/templates/ or site/assets Images in that folder can be uploaded and deleted from within the inputfield Images can be loaded from other pages defined in the field settings Images can be organized into categories. Child pages of the main 'image source page' serve as categories mages can be loaded from any page on the site From the API side, images can be manipulated like native ProcessWire images (resizing, cropping etc.), even the images from a folder Image thumbnails are loaded into inputfield by ajax on demand Source images on other pages can be edited from within this field. Markup of SVG images can be rendered inline with `echo $image->svgcontent` Image names are fully searchable through the API $pages->find('fieldname.filename=xyz.png'); $pages->find('fieldname.filename%=xy.png'); Accidental image deletion is prevented. When you want to delete an image from one of the pages that hold your site-wide images, the module searches all pages that use that image. If any page contains a reference to the image you are trying to delete, deletion will be prevented. You will get an error message with links to help you edit those pages and remove references there before you can finally delete the image. This field type can be used with marcrura's Settings Factory module to store images on settings pages, which was not possible with other image field types When to use ?
      If you want to let editors choose an image from a set of images that is being used site-wide. Ideal for images that are being re-used across the site (e.g. icons, but not limited to that).
      Other than the native ProcessWire images field, the images here are not stored per page. Only references to images that live on other pages or inside a folder are stored. This has several advantages:
      one central place to organize images when images change, you only have to update them in one place. All references will be updated, too. (Provided the name of the image that has changed stays the same) Installation and setup instructions can be found on github.
      Here's how the input field looks like in the page editor:

      If you like to give it a try, I'm happy to hear your comments or suggestions for improvement. Install from URL: https://github.com/gebeer/FieldtypeImageReference/archive/master.zip
      Eventually this will go in the module directory, too. But it needs some more testing before I submit it. So I'd really appreciate your assistance.
      Thanks to all who contributed their feedback and suggestions which made this module what it is now.
       
    • By rushy
      Hi. I've been using Processwire for a few years now and installed it on a few different shared hosting servers without issues, but I'm now running into an issue on a Fasthosts shared server that I've not seen before. The installation goes ok and I have a working default site profile but I am unable to complete any uploads of images. It just hangs at the progress spinner during the upload. I thought it might be a priviledge issue so have temporarily set the dir / file privs. as 777 / 666 just to test that but it made no difference. I have no errors in the wire log. In server error log I have:
      set_time_limit() has been disabled for security reasons in ....htdocs/wire/core/ImageSizerEngine.php on line 1035 and i note in the assets/file dir. where the image is being stored the date on the file being created has a year of 1970 and 0 length. If I leave the page this file disappears and nothing has been stored. 
      Does anyone know how I can enable set_time_limit if this is likely to be the problem? 
      Many thanks! Paul
×
×
  • Create New...