img
srcset
HTML has a few ways to show an image, and you should know which way is best. Discover:
sizes
With srcset on the img tag you can tell the browser to load different images based on screen size. To really get the hang of this, best check out the MDN docs.
src
max-width
These examples are optimized. The browser will only load new images, if they are larger than the previous one. So to see the effect, you must make the browser very small (narrow), reload the page, and then drag it wider. Some examples show the currently loaded URL below it, and the difference may be very small as it changes. So look closely 🔍
This tutorial inherits from the Custom.Hybrid.Razor14 or the Custom.Hybrid.RazorTyped base class.
Custom.Hybrid.Razor14
Custom.Hybrid.RazorTyped
This allows us to use Kit.Image to access an IScrub without having to use GetService<IImageService>.
Kit.Image
IScrub
GetService<IImageService>
This is a "manual" sample, where we listed each size as individual files - just for understanding the concept.
image src should appear here
@inherits Custom.Hybrid.Razor14 @{ var imgPath = App.Path + "/assets/img-resize"; } <img loading="lazy" class="img-fluid" alt="Image SrcSet Demo" src="@imgPath/jellyfish-1000.jpg" srcset="@imgPath/jellyfish-2000.jpg 2000w, @imgPath/jellyfish-1000.jpg 1000w, @imgPath/jellyfish-500.jpg 500w, @imgPath/jellyfish-250.jpg 250w,">
@inherits Custom.Hybrid.Razor14 @{ var imgPath = App.Path + "/assets/img-resize"; var tomatoPicUrl = imgPath + "/tomatoes.jpg"; } @Kit.Image.Img(tomatoPicUrl)
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1400&h=865&quality=75&mode=crop&scale=both' loading='lazy' class='img-fluid' width='1400' height='865'>
The following example (and the ones after this) will use a flatter image to make it easier to see all the samples. To achieve this, we must create ResizeSettings for this. It will be based on the default Content settings.
ResizeSettings
Content
@inherits Custom.Hybrid.Razor14 @{ var imgPath = App.Path + "/assets/img-resize"; var tomatoPicUrl = imgPath + "/tomatoes.jpg"; var flatSettings = Kit.Image.Settings("Content", aspectRatio: "8:1"); } @Kit.Image.Img(tomatoPicUrl, settings: flatSettings)
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1400&h=175&quality=75&mode=crop&scale=both' loading='lazy' class='img-fluid' width='1400' height='175'>
The default settings contains a list of default resizes - which is why the examples before just worked. You can also specify your own, according to the specs in the srcset docs.
@inherits Custom.Hybrid.Razor14 @{ var imgPath = App.Path + "/assets/img-resize"; var tomatoPicUrl = imgPath + "/tomatoes.jpg"; var flatSettings = Kit.Image.Settings("Content", aspectRatio: "8:1"); } @Kit.Image.Img(tomatoPicUrl, settings: flatSettings, recipe: "1600,1200,1000,900,800,700,600,500,400")
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1400&h=175&quality=75&mode=crop&scale=both'>
alt
class
@inherits Custom.Hybrid.Razor14 @{ var imgPath = App.Path + "/assets/img-resize"; var tomatoPicUrl = imgPath + "/tomatoes.jpg"; var flatSettings = Kit.Image.Settings("Content", aspectRatio: "8:1"); } @Kit.Image.Img(tomatoPicUrl, settings: flatSettings, imgAlt: "SEO Text", imgClass: "border border-primary")
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1400&h=175&quality=75&mode=crop&scale=both' loading='lazy' alt='SEO Text' class='border border-primary img-fluid' width='1400' height='175'>
In this example we won't just output the default, but only the img-tag with special ID and styles.
@inherits Custom.Hybrid.Razor14 @{ var imgPath = App.Path + "/assets/img-resize"; var tomatoPicUrl = imgPath + "/tomatoes.jpg"; var flatSettings = Kit.Image.Settings("Content", aspectRatio: "8:1"); var imgControlled = Kit.Image.Img(tomatoPicUrl, settings: flatSettings); } @imgControlled.Img.Id("Some-Id").Style("width: 75%")
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1400&h=175&quality=75&mode=crop&scale=both' loading='lazy' class='img-fluid' width='1400' height='175' id='Some-Id' style='width: 75%'>
@inherits Custom.Hybrid.Razor14 @{ var imgPath = App.Path + "/assets/img-resize"; var tomatoPicUrl = imgPath + "/tomatoes.jpg"; var flatSettings = Kit.Image.Settings("Content", aspectRatio: "8:1"); var imgFullControl = Kit.Image.Img(tomatoPicUrl, settings: flatSettings); } <img loading="lazy" src="@imgFullControl.Src" srcset="@imgFullControl.SrcSet" title="Hover to see this">
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1400&h=175&quality=75&mode=crop&scale=both' srcset title='Hover to see this'>
Credits: