Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kieron 148 posts 384 karma points
    Nov 13, 2018 @ 08:45
    Kieron
    0

    How to use .webp format with the image processor?

    Hi guys, using Umbraco 7.12.4 and using plenty of image processor stuff, but would really like to use the webp format tag, has anyone got this working?

  • Nik 1134 posts 4700 karma points MVP 2x c-trib
    Nov 13, 2018 @ 09:06
    Nik
    2

    Hi Kieron,

    I think you might have to install this Image Processor plugin in oder to get WebP format working:

    http://imageprocessor.org/imageprocessor/plugins/webp/

    Thanks

    Nik

  • Kieron 148 posts 384 karma points
    Nov 13, 2018 @ 11:56
    Kieron
    0

    Ive installed it onto the server using nuget but not sure what to do beyond that.

  • Jan Skovgaard 11242 posts 23390 karma points MVP 6x admin c-trib
    Nov 13, 2018 @ 12:46
    Jan Skovgaard
    3

    Hi Kieron

    If I'm not mistaken you should be able to use the "Format" setting to specify that you need to image in WebP format.

    So depending on how you render you images you should be able to do something like this

    <img src="@Url.GetCropUrl(Model.Content, propertyAlias: "image", cropAlias: "banner", useCropDimensions:true, furtherOptions: "&format=webp&quality=80")" />
    

    Please be aware that if you don't specify the quality parameter you might experience that the served images are in fact larger than if you just served the .jpg or .png versions of your image for instance.

    The above code snippet is a modified version of what you will find in the documentation here https://our.umbraco.com/Documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Image-Cropper#typed-umbraco-v735-4

    You can see a list of all the available methods here http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/

    As you're probably aware currently only Chrome and Edge18 support webp and Firefox will probably get support in upcoming versions so you should of course consider serving jpg or png for those browsers that don't understand the webp format :-)

    I hope this helps :)

    /Jan

  • Kieron 148 posts 384 karma points
    Nov 13, 2018 @ 12:49
    Kieron
    0

    Hi Jan that's great thank you.

    I note now that even though I've 'installed' the Plugin on the server, I haven't dropped it into the correct location, I'm not familiar with nuget so had no idea it just installed it to my local downloads folder on the server, haha.

    Where does the Imageprocessor live within each Umbraco install, so that I can add the plugin?

  • Justin RW 10 posts 120 karma points
    Dec 28, 2018 @ 16:06
    Justin RW
    0

    Kieron, if you install the WebP plugin via NuGet it'll install it in the correct place.

    'format=webp' does output a webp image with the plugin installed but how do I get none supported browsers to load the non webp version of the image?

  • Søren Kottal 440 posts 2677 karma points MVP c-trib
    Dec 28, 2018 @ 21:44
    Søren Kottal
    2

    Hi Justin

    To get browsers to fallback to jpg/png if they don't support webp, you need to use a <picture> element.

    You can use it like this:

    <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 browser picks the first matching supported source, so in this case the webp image gets selected in Chrome/Firefox, and the jpg will be selected everywhere else.

    For browsers not supporting the picture element, the img element is shown instead.

    You can also polyfill support for <picture> using something like picturefill

  • James 11 posts 103 karma points
    Jan 22, 2019 @ 21:41
    James
    0

    I've been trying to get the working, have installed the webp plugin but nothing will work, it always returns the file in its original format.

    banner.BannerImage.GetCropUrl(cropAlias: cropAlias, furtherOptions: "&format=png&quality=80")
    
    banner.BannerImage.GetCropUrl(cropAlias: cropAlias, furtherOptions: "&format=webp&quality=80")
    

    both are returning jpeg, what could be wrong?

  • James 11 posts 103 karma points
    Jan 22, 2019 @ 22:06
    James
    1

    Ok i just figured out it says .jpeg but it's actually working you just cant tell from looking at the file extension but you can tell if you look at network or try to save the picture

Please Sign in or register to post replies

Write your reply to:

Draft