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?
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.
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 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?
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
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
using System.Text;
using System.Web;
using Umbraco.Core.Models.PublishedContent;
using Umbraco.Web;
namespace CMS.Helpers
{
public class PropertyHelper
{
public static HtmlString GetWebPImageHtml(IPublishedContent image, string altText, string cropAlias = null)
{
try
{
string imageUrl = image.Url;
string webpImageUrl = image.Url;
if (string.IsNullOrEmpty(cropAlias))
{
webpImageUrl = imageUrl + "?format=webp&quality=80";
}
else
{
imageUrl = image.GetCropUrl(cropAlias: cropAlias);
webpImageUrl = image.GetCropUrl(cropAlias: cropAlias, furtherOptions: "&format=webp&quality=80");
}
StringBuilder html = new StringBuilder("<picture>");
html.Append("<source srcset='" + webpImageUrl + "' type='image/webp'>");
html.Append("<source srcset='" + imageUrl + "' type='image/jpeg'>");
html.Append("<img src='" + imageUrl + "' alt='" + altText + "'>");
html.Append("</picture>");
return new HtmlString(html.ToString());
}
catch
{
return new HtmlString("<p>There was an error loading the image</p>");
}
}
}
}
This supports with or without passing a cropAlias incase you just want full size images converting to WEBP.
Use this code in the frontend to render the correct html.
With a cropAlias.
@PropertyHelper.GetWebPImageHtml(Model.Image,"SOME ALT TEXT HERE", "banner")
Without a cropAlias
@PropertyHelper.GetWebPImageHtml(Model.Image,"SOME ALT TEXT HERE",)
Here is an example of the html it renders.
<picture><source srcset="/media/ppzp2iig/homer-simpson.jpg?crop=0,0.055803571428571425,0.16294642857142866,0.66517857142857151&cropmode=percentage&format=webp&quality=80&rnd=132227046170000000" type="image/webp"><source srcset="/media/ppzp2iig/homer-simpson.jpg?crop=0,0.055803571428571425,0.16294642857142866,0.66517857142857151&cropmode=percentage&width=300&height=100&rnd=132227046170000000" type="image/jpeg"><img src="/media/ppzp2iig/homer-simpson.jpg?crop=0,0.055803571428571425,0.16294642857142866,0.66517857142857151&cropmode=percentage&width=300&height=100&rnd=132227046170000000" alt="SOME ALT TEXT HERE"></picture>
I tested saving the image and it saves as a webp file.
I also testing in multiple browsers to see if it works on browsers that don't support webp. It works fine in the browsers I tested.
I just notes that if I check the "Network" and see what images that are loaded.
Then I can see at the image where I use this method, the image has a size of 2.5mb...
Thanks for the writeup, works like a charm. For all those following here, don´t forget to add webp mime-type on IIS. Took me a few minutes to figure this out.
I want to also include that you can tie into the ImageProcessingModule.ValidatingRequest event, and check the URL, Request AcceptTypes header, and alter the QueryString all in an IApplicationEventHandler OnApplicationStarted
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?
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
Ive installed it onto the server using nuget but not sure what to do beyond that.
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
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
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?
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:
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 picturefillI'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.
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
Hi Guys,
I wrote an helper method to handle this.
This supports with or without passing a cropAlias incase you just want full size images converting to WEBP.
Use this code in the frontend to render the correct html.
With a cropAlias.
Without a cropAlias
Here is an example of the html it renders.
I tested saving the image and it saves as a webp file.
I also testing in multiple browsers to see if it works on browsers that don't support webp. It works fine in the browsers I tested.
Hi,
I improved the code slightly. Thought it was a good idea to include lazyloading in there as a bonus.
In the front-end render the images like this.
Lazy Load
Normal Loading
There is one thing extra. If you want to use lazy loading then please include the following javascript on your master page.
Hope this helps someone.
Hey,
I have tried you code and I works.
I just notes that if I check the "Network" and see what images that are loaded. Then I can see at the image where I use this method, the image has a size of 2.5mb...
Thanks for the writeup, works like a charm. For all those following here, don´t forget to add webp mime-type on IIS. Took me a few minutes to figure this out.
Hi, to enable webP format in Umbraco you need to:
Works great for Umbraco 8 sites, should work for Umbraco 7 as well. I've covered the entire process here: https://piotrbach.com/enable-webp-image-format-in-umbraco-cms
Best, Piotr
I want to also include that you can tie into the ImageProcessingModule.ValidatingRequest event, and check the URL, Request AcceptTypes header, and alter the QueryString all in an IApplicationEventHandler OnApplicationStarted
This is covered for v7 and v8 (with reusable code) here: https://kieron.codes/blog/using-webp-images-in-umbraco/ (full credit to the code below!)
The code there excludes .gif images, but you may also want to prevent .webp and .svg as well.
v8:
v7:
I noticed if i use format=webp after quality parameter it does not apply quality. When i use quality at the end it works.
Yes that is correct, you can use the above code, which removed the quality query string parameter and then appends it to the end automatically.
ImageProcessingModule.ValidatingRequest += ImageProcessingModule_ValidatingRequest;
@Osman, thank you, this hint saved my day....
is working on a reply...