Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
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?
I think you might have to install this Image Processor plugin in oder to get WebP format working:
Ive installed it onto the server using nuget but not sure what to do beyond that.
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 :)
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?
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?
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:
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
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
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?
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
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted