Skip to main content
Home  › ... Razor

Images and Pictures Tutorial

Tutorial Home › Images
Best-Possible Image for Every Screen & Device
#7 Browser-Capabilities picture with different formats
Best practices using the Image Service
Requirements
Resources

Browser-Capabilities picture with different formats

The perfect image depends on browser capabilities. The following example will get modern browsers a webp image (which is smaller/faster) and normal browsers a jpg.

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

  1. It's just a wrapper for the img
  2. You always need an img tag inside it, and this is what old browsers like IE6 will take even if they don't understand picture
  3. The img tag also caries the alt description, width, size, styles etc. which is used for all images
  4. The source tags contain rules like type or media which the browser uses to pick the best image
  5. The source also supports the same srcset and sizes just like the img tag
  6. Important: you must use srcset and not src on the source tags
  7. Important: Order matters! Put the source tags first in the order you need, as the first match will be taken.
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";
}
<picture>
  <source type="image/webp" srcset="@imgPath/koi-400.webp">
  <source type="image/png" srcset="@imgPath/koi-400.png">
  <img loading="lazy" style="width: 40%;" src="@imgPath/jellyfish-1000.jpg">
</picture>

The perfect image is often different depending on the screen size. The following example will get two different sizes, depending on the screen size. Try resizing the screen and watch the network (F12) to see when the other sizes are loaded.

To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
image src should appear here
 Picture srcset demo 
@inherits Custom.Hybrid.Razor14

@{
  var imgPath = App.Path + "/assets/img-resize";
}
<picture>
  <source type="image/webp" srcset="@imgPath/koi-2000.webp 2000w,
        @imgPath/koi-1000.webp 1000w,
        @imgPath/koi-500.webp 500w,
        @imgPath/koi-250.webp 250w,"
    sizes="(max-width: 300px) 250px, (max-width: 600px) 500px, (max-width: 1200px) 1000px, 2000px">
  <source type="image/png" srcset="@imgPath/jellyfish-2000.jpg 2000w,
        @imgPath/jellyfish-1000.jpg 1000w,
        @imgPath/jellyfish-500.jpg 500w,
        @imgPath/jellyfish-250.jpg 250w,"
    sizes="(max-width: 300px) 250px, (max-width: 600px) 500px, (max-width: 1200px) 1000px, 2000px">
  <img loading="lazy" class="img-fluid" src="@imgPath/jellyfish-1000.jpg" alt="Picture srcset demo">
</picture>

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 jellyfishUrl = imgPath + "/jellyfish-2000.jpg";
}
@Kit.Image.Picture(jellyfishUrl)
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.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/assets/img-resize/jellyfish-2000.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&amp;h=380&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
 This is the ALT text 
@inherits Custom.Hybrid.Razor14


@{
  var imgPath = App.Path + "/assets/img-resize";
  var jellyfishUrl = imgPath + "/jellyfish-2000.jpg";
}
 @Kit.Image.Picture(jellyfishUrl, imgAlt: "This is the ALT text", imgClass: "dummy-class")
<img src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both' 
loading='lazy' 
alt='This is the ALT text' 
class='dummy-class img-fluid' 
width='1230' 
height='760' 
srcset='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&amp;h=380&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 picControlled = Kit.Image.Picture(imgPath + "/jellyfish-2000.jpg");
}
<picture>
  @picControlled.Sources
  @picControlled.Img.Id("some-id").Style("width: 75%").Title("Mouseover this!")
</picture>
<picture>
 <source type='image/webp' 
srcset='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 2460w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 1230w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 922w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<source type='image/jpeg' 
srcset='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
 <img src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both' 
loading='lazy' 
class='img-fluid' 
width='1230' 
height='760' 
id='some-id' 
style='width: 75%' 
title='Mouseover this!'>
</picture>

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 picFullControl = Kit.Image.Picture(imgPath + "/jellyfish-2000.jpg");
}
<picture>
  @foreach (var st in picFullControl.Sources)
  {
    @st
  }
  <img loading="lazy" src='@picFullControl.Src' style='width: 50%' class='border border-primary'>
</picture>
<picture>
 <source type='image/webp' 
srcset='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 2460w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 1230w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 922w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<source type='image/jpeg' 
srcset='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both 1230w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both 922w,
/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both 615w' 
sizes='(max-width: 1400px) 100vw,
 1230px'>
<img loading='lazy' 
src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both' 
style='width: 50%' 
class='border border-primary'>
</picture>

 

Best-Possible Image for Every Screen & Device
#7 Browser-Capabilities picture with different formats
Best practices using the Image Service