Oqtane Tutorials

Oqtane Tutorials

Images Tutorial

Tutorial Home › Images

Resize combining Presets with Custom Resize-Settings

#6 Responsive Server-Side Images (img)

Responsive and optimal Server-Side Images (picture)

Requirements

2sxc 13.10

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:

img for your standard image
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`

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.
The main picture in src is used in all old browsers
You can also use srcset to specify different resolutions for retina displays.
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='/oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1400&amp;h=175&amp;quality=75&amp;mode=crop&amp;scale=both' 
srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1600&amp;h=200&amp;quality=75&amp;mode=crop&amp;scale=both 1600w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1200&amp;h=150&amp;quality=75&amp;mode=crop&amp;scale=both 1200w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1000&amp;h=125&amp;quality=75&amp;mode=crop&amp;scale=both 1000w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=900&amp;h=112&amp;quality=75&amp;mode=crop&amp;scale=both 900w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=800&amp;h=100&amp;quality=75&amp;mode=crop&amp;scale=both 800w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=700&amp;h=87&amp;quality=75&amp;mode=crop&amp;scale=both 700w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=600&amp;h=75&amp;quality=75&amp;mode=crop&amp;scale=both 600w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=500&amp;h=62&amp;quality=75&amp;mode=crop&amp;scale=both 500w,
/oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/oqtane-tutorials/app/Tutorial-Razor/assets/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.

Hover to see this

<img src='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both' 
srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=2460&amp;h=307&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&amp;h=153&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=922&amp;h=115&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/oqtane-tutorials/app/Tutorial-Razor/assets/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:

Koi fish Photo by agus prianto on Unsplash
Jellyfish Photo by Karan Karnik on Unsplash

Resize combining Presets with Custom Resize-Settings

#6 Responsive Server-Side Images (img)

Responsive and optimal Server-Side Images (picture)

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 })

An error has occurred. This application may no longer respond until reloaded. Reload 🗙