Adding Webp to a site

  • I'm trying to add Webp to my site which I'm doing by using Gulp and htaccess. I'm running into a slight snag. I understand that I can't upload webp files to Perch, but I need to add the file location string to the webp section and exclude the .jpg from the string. Is there a way of doing this in Perch?



    Code
    1. <picture>
    2. <source type="image/webp" media="(min-width: 1921px)" srcset="???????.webp">
    3. <source type="image/jpg" media="(min-width: 1921px)" srcset="<perch:blog type="image" id="mainImage" label="Image" />">
    4. <source type="image/webp" media="(min-width: 1281px) and (max-width: 1920px)" srcset="???????.webp">
    5. <source type="image/jpg" media="(min-width: 1281px) and (max-width: 1920px)" srcset="<perch:blog type="image" id="mainImage" label="Image" />">
    6. <img src="<perch:blog type="image" id="mainImage" label="Image" />" style="width: 100%;">
    7. </picture>
  • Hello, if you don't mind I'd like to show my own solution to this, which others might find useful or be able to improve on?


    So I wanted a way to upload a banner image into a blog post, and a .webp version of the same image, all coded under the <picture> element.

    I used Drew's example code above, and added in a type="file" to upload the webp file version (comes with issues). Here's my full code;

    Code
    1. <picture>
    2.     <source srcset="<perch:blog id="banner" type="image" label="Banner Webp" replace=".jpg|.webp" />">
    3.     <perch:blog id="webp" type="file" label="Webp for banner" bucket="banner-img" order="2">
    4.     <img src="<perch:blog id="banner" type="image" label="Banner" bucket="banner-img" order="1" />" class="responsive">
    5. </picture>

    So the perch:blog 'file' field allows me to upload a .webp file (however), there's no confirmation the file was uploaded and you cannot see the file in the Assets folders. You just have to assume it uploaded ok, and test the public url to see if it worked. Either way, the .webp file uploads to my server, and I can confirm that by looking at the perch resources folders via ftp.


    So the code Drew suggested, will then replace the file extension from .jpg to .webp and because the .webp file successfully uploaded to my server, the browser finds the .webp version and uses it instead of the .jpg version. (confirmed using Chrome Dev console and under the 'Network' tab to see loaded files.


    I hope this maybe helps some of you, and perhaps inspires our skilled developers to improve this.
    Of course, there may by now be a better solution or .webp support in Perch, so do check latest documentation. Before I created this solution, I used the type="file" field for .webp files and didnt see any confirmation of upload. It was only when checking via ftp I saw the files did indeed upload.

    I <3 :burd1: but sometimes I ;( because I am not 8) enough to understand :burd1: like the :saint:'s. So your help is greatly appreciated :thumbup: