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=1230&h=760&quality=75&mode=crop&scale=both' loading='lazy' class='img-fluid' width='1230' height='760' srcset='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both 2460w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=615&h=380&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'>
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=1230&h=153&quality=75&mode=crop&scale=both' loading='lazy' class='img-fluid' width='1230' height='153' srcset='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=2460&h=307&quality=75&mode=crop&scale=both 2460w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1230&h=153&quality=75&mode=crop&scale=both 1230w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=922&h=115&quality=75&mode=crop&scale=both 922w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=615&h=76&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'>
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' srcset='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1600&h=200&quality=75&mode=crop&scale=both 1600w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1200&h=150&quality=75&mode=crop&scale=both 1200w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1000&h=125&quality=75&mode=crop&scale=both 1000w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=900&h=112&quality=75&mode=crop&scale=both 900w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=800&h=100&quality=75&mode=crop&scale=both 800w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=700&h=87&quality=75&mode=crop&scale=both 700w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=600&h=75&quality=75&mode=crop&scale=both 600w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=500&h=62&quality=75&mode=crop&scale=both 500w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=400&h=50&quality=75&mode=crop&scale=both 400w'>
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=1230&h=153&quality=75&mode=crop&scale=both' loading='lazy' alt='SEO Text' class='border border-primary img-fluid' width='1230' height='153' srcset='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=2460&h=307&quality=75&mode=crop&scale=both 2460w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1230&h=153&quality=75&mode=crop&scale=both 1230w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=922&h=115&quality=75&mode=crop&scale=both 922w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=615&h=76&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'>
In this example we won't just output the default, but only the img-tag with special ID and styles.
@inherits Custom.Hybrid.RazorTyped @{ var imgPath = App.Folder.Url + "/assets/img-resize"; var tomatoPicUrl = imgPath + "/tomatoes.jpg"; var flatSettings = Kit.Image.Settings("Content", aspectRatio: "8:1"); // Note: `imgAttributes` is new in v16.07 var imgControlled = Kit.Image.Img(tomatoPicUrl, settings: flatSettings, imgAttributes: new { id = "Some-Id", style = "width: 75%" }); } @imgControlled
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1230&h=153&quality=75&mode=crop&scale=both' id='Some-Id' loading='lazy' class='img-fluid' style='width: 75%' width='1230' height='153' srcset='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=2460&h=307&quality=75&mode=crop&scale=both 2460w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1230&h=153&quality=75&mode=crop&scale=both 1230w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=922&h=115&quality=75&mode=crop&scale=both 922w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=615&h=76&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'>
@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=1230&h=153&quality=75&mode=crop&scale=both' srcset='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=2460&h=307&quality=75&mode=crop&scale=both 2460w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=1230&h=153&quality=75&mode=crop&scale=both 1230w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=922&h=115&quality=75&mode=crop&scale=both 922w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/tomatoes.jpg?w=615&h=76&quality=75&mode=crop&scale=both 615w' title='Hover to see this'>
Credits: