Requirements
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
andsizes
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

Example with Automatically Resized Files for Each Resolution

<img src='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&h=760&quality=75&mode=crop&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&h=1520&quality=75&mode=crop&scale=both 2460w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=615&h=380&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'>
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.

<img src='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&h=153&quality=75&mode=crop&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&h=307&quality=75&mode=crop&scale=both 2460w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&h=153&quality=75&mode=crop&scale=both 1230w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=922&h=115&quality=75&mode=crop&scale=both 922w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=615&h=76&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'>
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.

<img src='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1400&h=175&quality=75&mode=crop&scale=both' srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1600&h=200&quality=75&mode=crop&scale=both 1600w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1200&h=150&quality=75&mode=crop&scale=both 1200w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1000&h=125&quality=75&mode=crop&scale=both 1000w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=900&h=112&quality=75&mode=crop&scale=both 900w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=800&h=100&quality=75&mode=crop&scale=both 800w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=700&h=87&quality=75&mode=crop&scale=both 700w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=600&h=75&quality=75&mode=crop&scale=both 600w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=500&h=62&quality=75&mode=crop&scale=both 500w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=400&h=50&quality=75&mode=crop&scale=both 400w'>
Automatic Resize with Custom alt
and class

<img src='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.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='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=2460&h=307&quality=75&mode=crop&scale=both 2460w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&h=153&quality=75&mode=crop&scale=both 1230w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=922&h=115&quality=75&mode=crop&scale=both 922w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=615&h=76&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'>
Automatic Resize with Detailed Control

<img src='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&h=153&quality=75&mode=crop&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&h=307&quality=75&mode=crop&scale=both 2460w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&h=153&quality=75&mode=crop&scale=both 1230w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=922&h=115&quality=75&mode=crop&scale=both 922w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=615&h=76&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px' id='Some-Id' style='Width: 75%'>
Automatic Resize with Full Control

<img src='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&h=153&quality=75&mode=crop&scale=both' srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=2460&h=307&quality=75&mode=crop&scale=both 2460w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=1230&h=153&quality=75&mode=crop&scale=both 1230w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=922&h=115&quality=75&mode=crop&scale=both 922w, /oqtane-tutorials/app/Tutorial-Razor/assets/img/assets/pexels-pixabay-533288.jpg?w=615&h=76&quality=75&mode=crop&scale=both 615w' title='Hover to see this'>
- Koi fish Photo by agus prianto on Unsplash
- 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 & 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 })