App

Images and Pictures Tutorial

Tutorial Home › Images
Browser-Capabilities picture with different formats
#8 Best practices using the Image Service
Going all Multilanguage / i18n
Requirements
Resources

Best practices using the Image Service

Learn about the best practices for using the image service and more. Our goals are:

  1. Make sure every image is perfectly sized as needed
  2. Multiple sizes are provided for various use cases
  3. Labels and configs made by the editor (for example, setting a priority corner) are respected by the resizer

Base Class with Kit.Image

This tutorial inherits from the Custom.Hybrid.Razor14 or the Custom.Hybrid.RazorTyped base class.

This allows us to use Kit.Image to access an IScrub without having to use GetService<IImageService>.

As learned in the previous tutorials the img tag can be created out of URLs. The image service can also be used with Fields. The field will contain the URL as well as additional Metadata like the description or what part of the picture is important (the Crop-Anchor).

To get the most out of 2sxc and its image configuration options it's best to use the image object instead of URLs. By using the image configuration options, the settings can be easily retrieved from the corresponding image.

Picture from Content.Image

Picture from Field containing crop anchor and alt text

This description was retrieved from the image metadata. 
@inherits Custom.Hybrid.Razor14

<div class="row">
  <div class="col-md">
    <p><strong>Picture from <code>Content.Image</code></strong></p>
    @* Picture from Content.Image *@
    @Kit.Image.Img(Content.Image)
  </div>
  <div class="col-md">
    <p><strong>Picture from <code>Field</code> containing crop anchor and alt text</strong></p>
    @* Picture from Field containing crop anchor and alt text *@
    @Kit.Image.Img(Content.Field("Image"))
  </div>
</div>
<img src='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both' 
loading='lazy' 
class='img-fluid' 
width='1230' 
height='760' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<img src='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter' 
loading='lazy' 
alt='This description was retrieved from the image metadata.' 
class='img-fluid' 
width='1230' 
height='760' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 2460w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 1230w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 922w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>

View Configuration

This is how this view would be configured for this sample.

  • Content/Item ContentType: ImgDemoData
  • Content/Item Data:
    1. file:267 (ID: 46567)

As learned in the previous tutorials the picture tag can be created out of URLs. The image service can also be used with Fields. The field will contain the URL as well as additional Metadata like the description or what part of the picture is important (the Crop-Anchor).

To get the most out of 2sxc and its image configuration options it's best to use the image object instead of URLs. By using the image configuration options, the settings can be easily retrieved from the corresponding image.

Picture from Content.Image

Picture from Field containing crop anchor and alt text

This description was retrieved from the image metadata. 
@inherits Custom.Hybrid.Razor14

<div class="row">
  <div class="col-md">
    <p><strong>Picture from <code>Content.Image</code></strong></p>
    @* Picture from Content.Image *@
    @Kit.Image.Picture(Content.Image)
  </div>
  <div class="col-md">
    <p><strong>Picture from <code>Field</code> containing crop anchor and alt text</strong></p>
    @* Picture from Field containing crop anchor and alt text *@
    @Kit.Image.Picture(Content.Field("Image"))
  </div>
</div>
<picture>
<source type='image/webp' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 2460w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 1230w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 922w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<source type='image/jpeg' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<img src='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both' 
loading='lazy' 
class='img-fluid' 
width='1230' 
height='760'>
</picture>
<picture>
<source type='image/webp' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 2460w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 1230w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 922w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<source type='image/jpeg' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 2460w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 1230w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 922w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<img src='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter' 
loading='lazy' 
alt='This description was retrieved from the image metadata.' 
class='img-fluid' 
width='1230' 
height='760'>
</picture>

View Configuration

This is how this view would be configured for this sample.

  • Content/Item ContentType: ImgDemoData
  • Content/Item Data:
    1. file:267 (ID: 46567)

The Image Service offers multiple parameters for further customization of the images, such as the factor. The factor works as a resize multiplier for the image as for example (0.5).

Below you will find an example:

Picture using the factor 0.5

This description was retrieved from the image metadata.

Picture using the factor 5

This description was retrieved from the image metadata. 
@inherits Custom.Hybrid.Razor14

<div class="row">
  <div class="col-md">
    <p><strong>Picture using the factor <code>0.5</code></strong></p>
    @Kit.Image.Picture(Content.Field("Image"), factor: 0.5)
  </div>
  <div class="col-md">
    <p><strong>Picture using the factor <code>5</code></strong></p>
    @Kit.Image.Picture(Content.Field("Image"), factor: 5)
  </div>
</div>
<picture>
<source type='image/webp' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1200&amp;h=741&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 1200w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=600&amp;h=370&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 600w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=450&amp;h=278&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 450w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=300&amp;h=185&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 300w' 
sizes='(max-width: 1400px) 50vw,
 (max-width: 576px) 100vw,
 600px'>
<source type='image/jpeg' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1200&amp;h=741&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 1200w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=600&amp;h=370&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 600w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=450&amp;h=278&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 450w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=300&amp;h=185&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 300w' 
sizes='(max-width: 1400px) 50vw,
 (max-width: 576px) 100vw,
 600px'>
<img src='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=600&amp;h=370&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter' 
loading='lazy' 
alt='This description was retrieved from the image metadata.' 
class='img-fluid' 
width='600' 
height='370'>
</picture>
<picture>
<source type='image/webp' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&amp;h=1977&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 3200w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&amp;h=1977&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 3200w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&amp;h=1977&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 3200w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&amp;h=1977&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 3200w'>
<source type='image/jpeg' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&amp;h=1977&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 3200w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&amp;h=1977&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 3200w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&amp;h=1977&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 3200w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&amp;h=1977&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 3200w'>
<img src='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&amp;h=1977&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter' 
loading='lazy' 
alt='This description was retrieved from the image metadata.' 
class='img-fluid' 
width='3200' 
height='1977'>
</picture>

View Configuration

This is how this view would be configured for this sample.

  • Content/Item ContentType: ImgDemoData
  • Content/Item Data:
    1. file:267 (ID: 46567)

The picture tag contains multiple configurations of images, which are called recipes in our ecosystem. The browser then chooses the optimal configuration based on the given srcset. Using the .Recipe("") method from the image service, you can easily add more size variants of your images.

Below you will find an example:

Picture default recipe

This description was retrieved from the image metadata.

Picture with variants for 2x and 3x of the image size

This description was retrieved from the image metadata. 
@inherits Custom.Hybrid.Razor14

<div class="row">
  <div class="col-md">
    <p><strong>Picture default recipe</strong></p>
    @* Picture using all the defaults *@
    @Kit.Image.Picture(Content.Field("Image"))
  </div>
  <div class="col-md">
    <p><strong>Picture with variants for 2x and 3x of the image size</strong></p>
    @{
      var customRecipe = Kit.Image.Recipe("2*, 3*");
    }
    @* Picture using recipe with 2x and 3x variants *@
    @Kit.Image.Picture(Content.Field("Image"), recipe: customRecipe)
  </div>
</div>
<picture>
<source type='image/webp' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 2460w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 1230w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 922w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<source type='image/jpeg' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 2460w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 1230w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 922w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<img src='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter' 
loading='lazy' 
alt='This description was retrieved from the image metadata.' 
class='img-fluid' 
width='1230' 
height='760'>
</picture>
<picture>
<source type='image/webp' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2800&amp;h=1730&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 2800w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&amp;h=1977&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 3200w'>
<source type='image/jpeg' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2800&amp;h=1730&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 2800w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&amp;h=1977&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 3200w'>
<img src='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1400&amp;h=865&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter' 
alt='This description was retrieved from the image metadata.'>
</picture>

View Configuration

This is how this view would be configured for this sample.

  • Content/Item ContentType: ImgDemoData
  • Content/Item Data:
    1. file:267 (ID: 46567)

By passing in the Field object, the picture tag will apply the alt text automatically. Unless your code specifies the imgAlt parameter, which would override any internal setting.
Because alt texts are not always defined in the settings, you can set a imgAltFallback to be used if the alt text is not defined.

Image with optimal alt text (This description was retrieved from the image metadata.)

This description was retrieved from the image metadata. 
@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;

@{
  var fallbackAltText = "Fallback";
  var imageFieldWithAltText = Content.Field("Image");
  var optimalAltText = Text.First(imageFieldWithAltText.Metadata.Description, fallbackAltText);
}
<div>
  <p><strong>Image with optimal alt text (@optimalAltText)</strong></p>
  <div style="width: 25%;">
    @Kit.Image.Picture(imageFieldWithAltText, imgAltFallback: optimalAltText)
  </div>
</div>
<picture>
<source type='image/webp' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 2460w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 1230w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 922w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp&amp;anchor=bottomcenter 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<source type='image/jpeg' 
srcset='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 2460w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 1230w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 922w,
/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<img src='/razortutorial12/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;anchor=bottomcenter' 
loading='lazy' 
alt='This description was retrieved from the image metadata.' 
class='img-fluid' 
width='1230' 
height='760'>
</picture>

View Configuration

This is how this view would be configured for this sample.

  • Content/Item ContentType: ImgDemoData
  • Content/Item Data:
    1. file:267 (ID: 46567)

 

Browser-Capabilities picture with different formats
#8 Best practices using the Image Service
Going all Multilanguage / i18n