picture
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.
This tutorial inherits from the Custom.Hybrid.Razor14 or the Custom.Hybrid.RazorTyped base class.
Custom.Hybrid.Razor14
Custom.Hybrid.RazorTyped
This allows us to use Kit.Image to access an IScrub without having to use GetService<IImageService>.
Kit.Image
IScrub
GetService<IImageService>
img
alt
source
type
media
srcset
sizes
src
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.
@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>
@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&h=760&quality=75&mode=crop&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&h=1520&quality=75&mode=crop&scale=both 2460w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&h=380&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'>
@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&h=760&quality=75&mode=crop&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&h=1520&quality=75&mode=crop&scale=both 2460w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&h=380&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'>
@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&h=1520&quality=75&mode=crop&scale=both&format=webp 2460w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&format=webp 1230w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both&format=webp 922w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&h=380&quality=75&mode=crop&scale=both&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&h=1520&quality=75&mode=crop&scale=both 2460w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&h=380&quality=75&mode=crop&scale=both 615w' sizes='(max-width: 1400px) 100vw, 1230px'> <img src='/Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both' loading='lazy' class='img-fluid' width='1230' height='760' id='some-id' style='width: 75%' title='Mouseover this!'> </picture>
@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&h=1520&quality=75&mode=crop&scale=both&format=webp 2460w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&format=webp 1230w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both&format=webp 922w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&h=380&quality=75&mode=crop&scale=both&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&h=1520&quality=75&mode=crop&scale=both 2460w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /Portals/tutorials/2sxc/Tutorial-Razor/assets/img-resize/jellyfish-2000.jpg?w=615&h=380&quality=75&mode=crop&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>