#6 Best-Possible Image for Every Screen & Device
Error Showing Content - please login as admin for details.
This is a "manual" sample, where we listed each size as individual files - just for understanding the concept.
To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
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,">
-
-
-
To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
image src should appear here
@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.
-
-
-
To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
image src should appear here
@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.
-
-
-
To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
image src should appear here
@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'>
-
-
-
To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
image src should appear here
@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.
-
-
-
To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
image src should appear here
@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'>
-
-
-
-
To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
image src should appear here
@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'>
#6 Best-Possible Image for Every Screen & Device