ImageProcessor.Web.Episerver: new versions!

I have released new versions for my ImageProcessor.Web.Episerver package for both CMS 10 (version 1.1.0) and CMS 11 (version 2.1.0). If you are not familiar with this package, please see this blog for more information. The new version adds the work Episerver EMVP Erik Henningson has done to use the picture element together with ImageProcessor so you can create responsive images easily.

Erik described the steps he took and the code in two blog post (link1, link2), so please read those if you want to know more about how this works. I made some changes to the code Erik wrote, so that his Html.Picture helper can now be combined with my Html.ProcessImage helper. So doing something like this in your view:

@Html.Picture(Html.ProcessImage(Model.Image).Resize(378, null).ReplaceColor("fff", "f00", 99).Watermark("Episerver", new Point(100, 100), "fff"), ImageTypes.Teaser)

will output the following HTML:

<picture>
    <source sizes="(max-width: 980px) calc((100vw - 40px)), (max-width: 1200px) 368px, 750px"
            srcset="/globalassets/alloy-plan/alloyplan.png?width=375&amp;replace=fff,f00&amp;fuzziness=99&amp;watermark=Episerver&amp;color=fff&amp;textposition=100,100&amp;fontsize=48&amp;fontstyle=Bold&amp;fontopacity=100&amp;dropshadow=false&amp;vertical=false&amp;rtl=false&amp;quality=80 375w,
		    /globalassets/alloy-plan/alloyplan.png?width=750&amp;replace=fff,f00&amp;fuzziness=99&amp;watermark=Episerver&amp;color=fff&amp;textposition=100,100&amp;fontsize=48&amp;fontstyle=Bold&amp;fontopacity=100&amp;dropshadow=false&amp;vertical=false&amp;rtl=false&amp;quality=80 750w,
		    /globalassets/alloy-plan/alloyplan.png?width=980&amp;replace=fff,f00&amp;fuzziness=99&amp;watermark=Episerver&amp;color=fff&amp;textposition=100,100&amp;fontsize=48&amp;fontstyle=Bold&amp;fontopacity=100&amp;dropshadow=false&amp;vertical=false&amp;rtl=false&amp;quality=80 980w,
		    /globalassets/alloy-plan/alloyplan.png?width=1500&amp;replace=fff,f00&amp;fuzziness=99&amp;watermark=Episerver&amp;color=fff&amp;textposition=100,100&amp;fontsize=48&amp;fontstyle=Bold&amp;fontopacity=100&amp;dropshadow=false&amp;vertical=false&amp;rtl=false&amp;quality=80 1500w">
    <img src="/globalassets/alloy-plan/alloyplan.png?width=750&amp;replace=fff,f00&amp;fuzziness=99&amp;watermark=Episerver&amp;color=fff&amp;textposition=100,100&amp;fontsize=48&amp;fontstyle=Bold&amp;fontopacity=100&amp;dropshadow=false&amp;vertical=false&amp;rtl=false&amp;quality=80">
</picture>

To make it easier to test that everything works as expected, Erik's code introduced a new appsetting “ImageProcessorDebug” in web.config. When its value is set to true, the width of the image will be shown in the image (you need to enable “watermark” in processing.config for that to work). I copied that setting over to my code. As you can see in the code above, I used the fluent API to also add a watermark to the image. In such a case the appsetting "wins".

Just as with Erik's implementation, this version will also create an additional src-set with webp-versions of the image. By setting type=”image/webp” we tell browsers that support webp that it can select that image instead of the original jpg. Browsers that don’t support webp will fallback to using the jpg versions. To facilitate this the ImageProcessor.Plugins.WebP package is now installed as a dependency.

Let me know if you would like to see other additions to the package. Hope this helps.