Responsive images

Responsive images Using srcset

by David_Knowles

HTML

<!-- // Responsive images -->
https://www.dropbox.com/s/9ef2wfqwax209dz/3_Alles_in_een-650.jpg?dl=0
https://www.dropbox.com/s/ko2obdtlg99vlrs/3_Alles_in_een-960.jpg?dl=0
https://www.dropbox.com/s/b26yisoxzu1n61k/3_Alles_in_een-1200.jpg?dl=0
https://www.dropbox.com/s/vi4hf4nvi7ml778/3_Alles_in_een-1600.jpg?dl=0
https://www.dropbox.com/s/t48pasvkjuecexz/3_Alles_in_een-1920.jpg?dl=0

<picture>
	<!-- 16:9 crop -->
	<source
		type="image/webp"
		media="(min-width: 36em)"
		srcset="quilt_2/detail/large.webp  1920w,
		        quilt_2/detail/medium.webp  960w,
		        quilt_2/detail/small.webp   480w" />
	<source
		media="(min-width: 36em)"
		srcset="quilt_2/detail/large.jpg  1920w,
		        quilt_2/detail/medium.jpg  960w,
		        quilt_2/detail/small.jpg   480w" />
	<!-- square crop -->
	<source
		type="image/webp"
		srcset="quilt_2/square/large.webp   822w,
		        quilt_2/square/medium.webp  640w,
		        quilt_2/square/small.webp   320w" />
	<source
		srcset="quilt_2/square/large.jpg   822w,
		        quilt_2/square/medium.jpg  640w,
		        quilt_2/square/small.jpg   320w" />
	<img
		src="quilt_2/detail/medium.jpg"
		alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork." />
</picture>

JavaScript

// Responsive images