One example with using srcset:

<!doctype html>
<html>

	<head>
	</head>
	
	<body>
		<img srcset="/large.jpg 900w,
					/medium.jpg 600w,
					/small.jpg 400w"
		 src="/large.jpg">
		</img>
	</body>

</html>

Check example here (try to resize window - but in Chrome incognito mode, to see medium image, width of the window has to be less then 600 and bigger then 400, every time when you want to resize the window to see another image you have to either clear the cache or close incognito window and open it again)

---

Another example with picture (art direction)

<!doctype html>
<html>

	<head>
	</head>
	
	<body>
	
		<picture>
			<source media="(min-width: 800px)" srcset="/large.jpg, /medium1.jpg 2x">
			<source media="(min-width: 450px)" srcset="/medium.jpg, /large1.jpg 2x">
			<img src="/small.jpg" srcset="/large1.jpg 2x">
		</picture>
		
	</body>

</html>

At this moment I have no idea what 2x means... Check the example here.