Oqtane Tutorials
Oqtane Tutorials

Images and Pictures Tutorial

Tutorial Home â€ș Images
Merge image settings
#6 Best-Possible Image for Every Screen & Device
Browser-Capabilities picture with different formats
The samples can differ based on your Razor base class or if you're running an old version.
Switch to Typed (2sxc 16+) Switch to Dynamic (Razor14 or below)
Requirements
Resources

Best-Possible Image for Every Screen & Device

...using img and srcset

HTML has a few ways to show an image, and you should know which way is best. Discover:

  1. img for your standard image
  2. enhancing images with size-detection using srcset and 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.

Responsive img with srcset and sizes To Load Different Pictures

What you need to know about srcset

  1. Important: If the browser already has a large image, it won't load smaller ones. So to see this in action, you have to start with a tiny browser window, loading the 250px - then make it larger to see bigger pictures load.
  2. The main picture in src is used in all old browsers
  3. You can also use srcset to specify different resolutions for retina displays.
  4. Important: the width specified in the max-width is the view/page width, not the image 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 🔍

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>.

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
 Image SrcSet Demo 
@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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both' 
loading='lazy' 
class='img-fluid' 
width='1230' 
height='153' 
srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=615&amp;h=76&amp;quality=75&amp;mode=crop&amp;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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1400&amp;h=175&amp;quality=75&amp;mode=crop&amp;scale=both' 
srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1600&amp;h=200&amp;quality=75&amp;mode=crop&amp;scale=both 1600w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1200&amp;h=150&amp;quality=75&amp;mode=crop&amp;scale=both 1200w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1000&amp;h=125&amp;quality=75&amp;mode=crop&amp;scale=both 1000w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=900&amp;h=112&amp;quality=75&amp;mode=crop&amp;scale=both 900w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=800&amp;h=100&amp;quality=75&amp;mode=crop&amp;scale=both 800w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=700&amp;h=87&amp;quality=75&amp;mode=crop&amp;scale=both 700w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=600&amp;h=75&amp;quality=75&amp;mode=crop&amp;scale=both 600w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=500&amp;h=62&amp;quality=75&amp;mode=crop&amp;scale=both 500w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=400&amp;h=50&amp;quality=75&amp;mode=crop&amp;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
 SEO Text 
@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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both' 
loading='lazy' 
alt='SEO Text' 
class='border border-primary img-fluid' 
width='1230' 
height='153' 
srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=615&amp;h=76&amp;quality=75&amp;mode=crop&amp;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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both' 
id='Some-Id' 
loading='lazy' 
class='img-fluid' 
style='width: 75%' 
width='1230' 
height='153' 
srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=615&amp;h=76&amp;quality=75&amp;mode=crop&amp;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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both' 
srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/tomatoes.jpg?w=615&amp;h=76&amp;quality=75&amp;mode=crop&amp;scale=both 615w' 
title='Hover to see this'>

Credits:

  1. Koi fish Photo by agus prianto on Unsplash
  2. Jellyfish Photo by Karan Karnik on Unsplash

 

Merge image settings
#6 Best-Possible Image for Every Screen & Device
Browser-Capabilities picture with different formats