<picture>
<source
type="image/webp"
media="(min-width: 768px)"
srcset="img/webp/small/project-1.webp"
/>
<source
type="image/png"
media="(min-width: 768px)"
srcset="img/png/small/project-1.png"
/>
<source
type="image/webp"
srcset="img/webp/medium/project-1.webp"
/>
<img
alt="screenshot of replica Netmatters homepage"
src="img/png/medium/project-1.png"
width="1440"
height="810"
/>
</picture>
Cascading image sources
The above code is used to give multiple sources for a given image to maximise performance and usability at many different screen sizes and independent of if the user's browser supports the webP format.