Requirements
Resources
Best practices using the Image Service
Learn about the best practices for using the image service and more. Our goals are:
- Make sure every image is perfectly sized as needed
- Multiple sizes are provided for various use cases
- 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
![](/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both)
Picture from Field
containing crop anchor and alt text
![This description was retrieved from the image metadata.](/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&anchor=bottomcenter)
<img src='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both' loading='lazy' class='img-fluid' width='1230' height='760' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both 2460w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&h=380&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'>
<img src='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&anchor=bottomcenter' loading='lazy' alt='This description was retrieved from the image metadata.' class='img-fluid' width='1230' height='760' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both&anchor=bottomcenter 2460w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&anchor=bottomcenter 1230w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&h=569&quality=75&mode=crop&scale=both&anchor=bottomcenter 922w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&h=380&quality=75&mode=crop&scale=both&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:
- file:189 (ID: 5621)
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
![](/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both)
Picture from Field
containing crop anchor and alt text
![This description was retrieved from the image metadata.](/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&anchor=bottomcenter)
<picture> <source type='image/webp' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both&format=webp 2460w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&format=webp 1230w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&h=569&quality=75&mode=crop&scale=both&format=webp 922w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&h=380&quality=75&mode=crop&scale=both&format=webp 615w' sizes='(max-width: 1400px) 100vw, 1230px'> <source type='image/jpeg' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both 2460w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&h=380&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'> <img src='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both' loading='lazy' class='img-fluid' width='1230' height='760'> </picture>
<picture> <source type='image/webp' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 2460w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 1230w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&h=569&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 922w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&h=380&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 615w' sizes='(max-width: 1400px) 100vw, 1230px'> <source type='image/jpeg' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both&anchor=bottomcenter 2460w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&anchor=bottomcenter 1230w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&h=569&quality=75&mode=crop&scale=both&anchor=bottomcenter 922w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&h=380&quality=75&mode=crop&scale=both&anchor=bottomcenter 615w' sizes='(max-width: 1400px) 100vw, 1230px'> <img src='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&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:
- file:189 (ID: 5621)
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.](/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=600&h=370&quality=75&mode=crop&scale=both&anchor=bottomcenter)
Picture using the factor 5
![This description was retrieved from the image metadata.](/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&anchor=bottomcenter)
<picture> <source type='image/webp' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1200&h=741&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 1200w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=600&h=370&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 600w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=450&h=278&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 450w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=300&h=185&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 300w' sizes='(max-width: 1400px) 50vw, (max-width: 576px) 100vw, 600px'> <source type='image/jpeg' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1200&h=741&quality=75&mode=crop&scale=both&anchor=bottomcenter 1200w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=600&h=370&quality=75&mode=crop&scale=both&anchor=bottomcenter 600w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=450&h=278&quality=75&mode=crop&scale=both&anchor=bottomcenter 450w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=300&h=185&quality=75&mode=crop&scale=both&anchor=bottomcenter 300w' sizes='(max-width: 1400px) 50vw, (max-width: 576px) 100vw, 600px'> <img src='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=600&h=370&quality=75&mode=crop&scale=both&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='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 3200w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 3200w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 3200w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 3200w'> <source type='image/jpeg' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&anchor=bottomcenter 3200w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&anchor=bottomcenter 3200w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&anchor=bottomcenter 3200w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&anchor=bottomcenter 3200w'> <img src='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&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:
- file:189 (ID: 5621)
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.](/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&anchor=bottomcenter)
Picture with variants for 2x and 3x of the image size
![This description was retrieved from the image metadata.](/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1400&h=865&quality=75&mode=crop&scale=both&anchor=bottomcenter)
<picture> <source type='image/webp' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 2460w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 1230w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&h=569&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 922w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&h=380&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 615w' sizes='(max-width: 1400px) 100vw, 1230px'> <source type='image/jpeg' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both&anchor=bottomcenter 2460w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&anchor=bottomcenter 1230w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&h=569&quality=75&mode=crop&scale=both&anchor=bottomcenter 922w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&h=380&quality=75&mode=crop&scale=both&anchor=bottomcenter 615w' sizes='(max-width: 1400px) 100vw, 1230px'> <img src='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&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='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2800&h=1730&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 2800w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 3200w'> <source type='image/jpeg' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2800&h=1730&quality=75&mode=crop&scale=both&anchor=bottomcenter 2800w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=3200&h=1977&quality=75&mode=crop&scale=both&anchor=bottomcenter 3200w'> <img src='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1400&h=865&quality=75&mode=crop&scale=both&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:
- file:189 (ID: 5621)
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.](/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&anchor=bottomcenter)
<picture> <source type='image/webp' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 2460w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 1230w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&h=569&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 922w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&h=380&quality=75&mode=crop&scale=both&format=webp&anchor=bottomcenter 615w' sizes='(max-width: 1400px) 100vw, 1230px'> <source type='image/jpeg' srcset='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both&anchor=bottomcenter 2460w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&anchor=bottomcenter 1230w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=922&h=569&quality=75&mode=crop&scale=both&anchor=bottomcenter 922w, /oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=615&h=380&quality=75&mode=crop&scale=both&anchor=bottomcenter 615w' sizes='(max-width: 1400px) 100vw, 1230px'> <img src='/oqtane-tutorials/app/Tutorial-Razor/adam/1eSr_DjJnk-67Zdd4-fw2Q/Image/photo-1651590814269-ccf8dee671ae.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&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:
- file:189 (ID: 5621)