#7 Browser-Capabilities picture with different formats
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>
.
- It's just a wrapper for the
img
- You always need an
img
tag inside it, and this is what old browsers like IE6 will take even if they don't understandpicture
- The
img
tag also caries thealt
description, width, size, styles etc. which is used for all images - The
source
tags contain rules liketype
ormedia
which the browser uses to pick the best image - The
source
also supports the samesrcset
andsizes
just like theimg
tag - Important: you must use
srcset
and notsrc
on thesource
tags - 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
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-1000.jpg)
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](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-1000.jpg)
To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
image src should appear here
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both)
<img src='/oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both 2460w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=615&h=380&quality=75&mode=crop&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](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both)
<img src='/oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both 2460w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=615&h=380&quality=75&mode=crop&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
![Mouseover this!](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both)
<picture> <source type='image/webp' srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both&format=webp 2460w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&format=webp 1230w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both&format=webp 922w, /oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both 2460w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/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>
To see the currentSrc change, make the window narrow, reload, and then drag it to become larger.
image src should appear here
![](/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both)
<picture> <source type='image/webp' srcset='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both&format=webp 2460w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both&format=webp 1230w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both&format=webp 922w, /oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=2460&h=1520&quality=75&mode=crop&scale=both 2460w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both 1230w, /oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=922&h=569&quality=75&mode=crop&scale=both 922w, /oqtane-tutorials/app/Tutorial-Razor/assets/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='/oqtane-tutorials/app/Tutorial-Razor/assets/assets/img-resize/jellyfish-2000.jpg?w=1230&h=760&quality=75&mode=crop&scale=both' style='width: 50%' class='border border-primary'> </picture>
#7 Browser-Capabilities picture with different formats