PictureRendererForkUmbraco 3.20.0
dotnet add package PictureRendererForkUmbraco --version 3.20.0
NuGet\Install-Package PictureRendererForkUmbraco -Version 3.20.0
<PackageReference Include="PictureRendererForkUmbraco" Version="3.20.0" />
paket add PictureRendererForkUmbraco --version 3.20.0
#r "nuget: PictureRendererForkUmbraco, 3.20.0"
// Install PictureRendererForkUmbraco as a Cake Addin #addin nuget:?package=PictureRendererForkUmbraco&version=3.20.0 // Install PictureRendererForkUmbraco as a Cake Tool #tool nuget:?package=PictureRendererForkUmbraco&version=3.20.0
ASP.Net Picture Renderer
The Picture renderer makes it easy to optimize images in (pixel) size, quality, file size, and image format. Images will be responsive, and can be lazy loaded. It's a light-weight library, suitable for Umbraco.
The Picture Renderer renders an HTML picture element. The picture element presents a set of images in different sizes and formats. It’s then up to the browser to select the most appropriate image depending on screen resolution, viewport width, network speed, and the rules that you set up.
If you are unfamiliar with the details of the Picture element, then I highly recommend reading this and/or this.
This fork of Picture Renderer only works together with Umbraco
Why should you use this?
You want the images on your web site to be as optimized as possible. For example, having the most optimal image for any screen size and device type, will make the web page load faster, and is a Google search rank factor. The content editor doesn't have to care about what aspect ratio, or size, the image has. The most optimal image will always be used.<br>
Webp format
The rendered picture element will also contain webp versions of the image. By default this will be rendered for jpg and png images.<br>
How to use
- Add the PictureRenderer nuget.
- Create an ImageSharpProfile for the different types of images that you have on your web site. A Picture profile describes how an image should be scaled in various cases. <br> You could for example create Picture profiles for: “Top hero image”, “Teaser image”, “Image gallery thumbnail”.
- Let Picture Renderer create the picture HTML element.
Picture profile
Examples
using PictureRenderer.Profiles;
public static class PictureProfiles
{
public static readonly ImageSharpProfile BannerImage = new([
new MediaCondition("(max-width: 474.95px)", Width: 475, Height: 304),
new MediaCondition("(min-width: 475px) and (max-width: 767.95px)", Width: 768, Height: 440),
new MediaCondition("(min-width: 768px) and (max-width: 1279.95px)", Width: 1440, Height: 501),
new MediaCondition("(min-width: 1280px) and (max-width: 1439.95px)", Width: 1440, Height: 501),
new MediaCondition("(min-width: 1440px)", Width: 1920, Height: 501)
], ImageWidth: 1440, ImageHeight: 501);
}
- MultiImageMediaConditions - Define image widths for different media conditions.
- ImageWidth - Define image width for image tag.
- ImageHeight - Define image height for image tag.
- ImageDecoding (optional) - Value for img element
decoding
attribute. Default value:async
. - FetchPriority (optional) - Value for img element
fetchPriority
attribute. Default value:none
(unset)
Render picture element
Render the picture element by calling @Html.Picture
<br>
Parameters
- Media - MediaWithCrops.
- profile - The Picture profile that specifies image widths, etc..
- altText (optional) - Img element
alt
attribute. - lazyLoading (optional) - Type of lazy loading. Currently only browser native lazy loading (or none).
- focalPoint/focalPoints (optional) - Use focal point when image is cropped (multiple points for multiple image paths).
- cssClass (optional) - Css class for img element.
Picture.Render returns a string, so you need to make sure the string is not HTML-escaped by using Html.Raw or similar. <br>
Basic MVC/Razor page sample
@Html.Picture(Model.MediaWithCrops, Model.Profile, Model.AltText, Model.LazyLoading, Model.ImageClass)
<br><br>
How to see that it actually works
You can see that different images are selected for different devices and screen sizes. Note that the Chrome (Chromium based) browser will not select a smaller image if a larger one is already downloaded. It may be easier to see the actual behaviour when using e.g. Firefox.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net8.0
- Umbraco.Cms.Web.Website (>= 13.0.3)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
3.20.0 | 137 | 1/31/2024 |