Skip to main content
Home  › ... Razor

Images Tutorial

Tutorial HomeImages

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

Info about the Base Class

This tutorial inherits from the Custom.Hybrid.Razor14 base class.

This allows us to use Kit.Image to access an IImageService without having to use GetService<IImageService>

Responsive img with srcset and sizes To Load Different Pictures

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.

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

Example with Different Files for Each Resolution

To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
Image SrcSet Demo
<img loading="lazy" class="img-fluid" alt="Image SrcSet Demo"
  src="@App.Path/img/assets/jellyfish-img-srcset-1000.jpg"
  srcset="@App.Path/img/assets/jellyfish-img-srcset-2000.jpg 2000w,
          @App.Path/img/assets/jellyfish-img-srcset-1000.jpg 1000w,
          @App.Path/img/assets/jellyfish-img-srcset-500.jpg 500w,
          @App.Path/img/assets/jellyfish-img-srcset-250.jpg 250w,">

Example with Automatically Resized Files for Each Resolution

To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.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='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
@{
  var tomatoPicUrl = App.Path +  "/img/assets/pexels-pixabay-533288.jpg";
}
@Kit.Image.Img(tomatoPicUrl)

Example with Automatic Resize and Special Settings

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.
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.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='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=615&amp;h=76&amp;quality=75&amp;mode=crop&amp;scale=both 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
@{
  var flatSettings = Kit.Image.Settings(Settings.Images.Content, aspectRatio: "8:1");
}
@Kit.Image.Img(tomatoPicUrl, settings: flatSettings)

Example with Automatic Resize and Special SrcSets

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.
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=1400&amp;h=175&amp;quality=75&amp;mode=crop&amp;scale=both' 
srcset='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=1600&amp;h=200&amp;quality=75&amp;mode=crop&amp;scale=both 1600w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=1200&amp;h=150&amp;quality=75&amp;mode=crop&amp;scale=both 1200w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=1000&amp;h=125&amp;quality=75&amp;mode=crop&amp;scale=both 1000w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=900&amp;h=112&amp;quality=75&amp;mode=crop&amp;scale=both 900w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=800&amp;h=100&amp;quality=75&amp;mode=crop&amp;scale=both 800w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=700&amp;h=87&amp;quality=75&amp;mode=crop&amp;scale=both 700w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=600&amp;h=75&amp;quality=75&amp;mode=crop&amp;scale=both 600w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=500&amp;h=62&amp;quality=75&amp;mode=crop&amp;scale=both 500w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=400&amp;h=50&amp;quality=75&amp;mode=crop&amp;scale=both 400w'>
@Kit.Image.Img(tomatoPicUrl, settings: flatSettings, recipe: "1600,1200,1000,900,800,700,600,500,400")

Automatic Resize with Custom alt and class

To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
SEO Text
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.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='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=615&amp;h=76&amp;quality=75&amp;mode=crop&amp;scale=both 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
@Kit.Image.Img(tomatoPicUrl, settings: flatSettings, imgAlt: "SEO Text", imgClass: "border border-primary")

Automatic Resize with Detailed Control

To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.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='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=615&amp;h=76&amp;quality=75&amp;mode=crop&amp;scale=both 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px' 
id='Some-Id' 
style='Width: 75%'>
@{
  var imgControlled = Kit.Image.Img(tomatoPicUrl, settings: flatSettings);
}
@imgControlled.Img.Id("Some-Id").Style("Width: 75%")

Automatic Resize with Full Control

To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both' 
srcset='/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/Portals/tutorials/2sxc/Tutorial-Razor/img/assets/pexels-pixabay-533288.jpg?w=615&amp;h=76&amp;quality=75&amp;mode=crop&amp;scale=both 615w' 
title='Hover to see this'>
@{
  var imgFullControl = Kit.Image.Img(tomatoPicUrl, settings: flatSettings);
}
<img loading="lazy" src="@imgFullControl.Src" srcset="@imgFullControl.SrcSet" title="Hover to see this">
Credits:
  1. Koi fish Photo by agus prianto on Unsplash
  2. Jellyfish Photo by Karan Karnik on Unsplash

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h1>Best-Possible Image for Every Screen &amp; Device</h1>
      <h2>...using <code>img</code> and <code>srcset</code></h2>
      <p>
        HTML has a few ways to show an image, and you should know which way is best. Discover: 
      </p>
      <ol>
        <li><code>img</code> for your standard image</li>
        <li>enhancing images with size-detection using <code>srcset</code> and <code>sizes</code></li>
      </ol>
    </div>
  </div>
  <div class="alert alert-info">
    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. 
    <br>
    <br>
    Some examples show the currently loaded URL below it, and the difference may be very small as it changes. So look closely 🔍
  </div>
  @Html.Partial("../shared/KitBaseClassInfoBox.cshtml", new { ServiceName = "Image", Service = "IImageService" })

  <h2>Responsive <code>img</code> with <code>srcset</code> and <code>sizes</code> To Load Different Pictures</h2>
  <p>
    With <code>srcset</code> on the <code>img</code> tag you can tell the browser to load different images based on screen size. 
    To really get the hang of this, best check out <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images" target="_blank">the MDN docs</a>.
  </p>


<!-- unimportant stuff, hidden -->

  
  <img loading="lazy" class="img-fluid" alt="Image SrcSet Demo"
    src="@App.Path/img/assets/jellyfish-img-srcset-1000.jpg"
    srcset="@App.Path/img/assets/jellyfish-img-srcset-2000.jpg 2000w,
            @App.Path/img/assets/jellyfish-img-srcset-1000.jpg 1000w,
            @App.Path/img/assets/jellyfish-img-srcset-500.jpg 500w,
            @App.Path/img/assets/jellyfish-img-srcset-250.jpg 250w,">



<h3>Example with Automatically Resized Files for Each Resolution</h3>

  
  @{
    var tomatoPicUrl = App.Path +  "/img/assets/pexels-pixabay-533288.jpg";
  }
  @Kit.Image.Img(tomatoPicUrl)



<h3>Example with Automatic Resize and Special Settings</h3>
<p>
  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 <code>ResizeSettings</code> for this. It will be based on the default <code>Content</code> settings.
</p>

  
  @{
    var flatSettings = Kit.Image.Settings(Settings.Images.Content, aspectRatio: "8:1");
  }
  @Kit.Image.Img(tomatoPicUrl, settings: flatSettings)



<h3>Example with Automatic Resize and Special SrcSets</h3>
<p>
  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
  <a href="https://docs.2sxc.org/net-code/images/srcset.html" target="_blank">srcset docs</a>. 
</p>

  
  @Kit.Image.Img(tomatoPicUrl, settings: flatSettings, recipe: "1600,1200,1000,900,800,700,600,500,400")



<h3>Automatic Resize with Custom <code>alt</code> and <code>class</code> </h3>

  
  @Kit.Image.Img(tomatoPicUrl, settings: flatSettings, imgAlt: "SEO Text", imgClass: "border border-primary")



<h3>Automatic Resize with Detailed Control</h3>

  
  @{
    var imgControlled = Kit.Image.Img(tomatoPicUrl, settings: flatSettings);
  }
  @imgControlled.Img.Id("Some-Id").Style("Width: 75%")



<h3>Automatic Resize with Full Control</h3>

  
  @{
    var imgFullControl = Kit.Image.Img(tomatoPicUrl, settings: flatSettings);
  }
  <img loading="lazy" src="@imgFullControl.Src" srcset="@imgFullControl.SrcSet" title="Hover to see this">


  @* 2sxclint:disable:no-inline-script *@
<script>
  // Activate the controls which show the current live src of each picture/image tag
  showChangingSrc("img-srcset")
  showChangingSrc('img-srcset-auto');
  showChangingSrc('img-srcset-auto-srcset');
  showChangingSrc('img-srcset-auto2');
  showChangingSrc('img-srcset-auto3');
  showChangingSrc('img-srcset-auto4');
  showChangingSrc('img-srcset-auto5');
</script>

@* 
Photo by <a href="https://unsplash.com/@dorianbaumann?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Dorian Baumann</a> on <a href="https://unsplash.com/s/photos/aescher?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Werdenberg: Photo by <a href="https://unsplash.com/@calina?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Georg Bommeli</a> on <a href="https://unsplash.com/s/photos/buchs-sg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

*@
  <div class="alert alert-info">
    <strong>Credits: </strong>
    <ol>
      <li>
        Koi fish Photo by <a href="https://unsplash.com/@("@")agusprianto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">agus prianto</a> on <a href="https://unsplash.com/s/photos/colorful-shrimp?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
      </li>
      <li>
        Jellyfish Photo by <a href="https://unsplash.com/@("@")kkkaran?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Karan Karnik</a> on <a href="https://unsplash.com/s/photos/sea-life?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
      </li>
    </ol>
  </div>
</hide>

@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })