Images

Nowadays images should be delivered in different resolutions, formats and maybe even different content (art direction) based on the users device (pixel density,resolution) and maybe even based on bandwidth limitations.

Working with Confinity Picture Component

Confinity provides a view component which will create a picture tag with multiple resolutions and formats of a single image. It only needs a bit configuration at first and then you can use it in every razor template.

Examples

The following code uses the ConfinityPicture view component with an asset and uses the globally configured default sizes.

@using Confinity.Assets
@model DocsDemos.Essentials.Images.ImageDemoModel
@inject IAssetService _assetService

@{
    var image = await _assetService.GetImageAsset(Model.Image);
    var pictureModel = new ConfinityPictureModel(image);
}

@await Component.InvokeAsync(typeof(ConfinityPicture), pictureModel)

Maybe you have multiple breakpoints on your website and you want to show your image inside a column of 50% on small devices and in a column of 33% percent width on a medium sized device and maybe a fixed width of 600px on large devices. In this case you can provide an array of tuples, which map a breakpoint key to an image width. You can use whatever unit for the image size you want.

@using Confinity.Assets
@model DocsDemos.Essentials.Images.ImageDemoModel
@inject IAssetService _assetService

@{
    var image = await _assetService.GetImageAsset(Model.Image);
    var pictureModel = new ConfinityPictureModel(image, [("sm", "50vw"), ("md", "33vw"), ("lg", "600px")]);
}

@await Component.InvokeAsync(typeof(ConfinityPicture), pictureModel)