Integrating Retina image versions onto web pages is optional in most cases… but when images go fullscreen on desktop, there are no alternatives but to switch to a HiDPI version, for several reasons:

• Thumbnail images will look awful when expanded to fullscreen size, demanding a solution.
• In most cases fullscreen mode will be used to display just a few images, allowing us to concentrate on edge cases rather than trying to code a solution for every image.
• Fullscreen mode must be engaged by the user, allowing plenty of opportunity to preload images before user interaction.
• Fullscreen mode is not yet supported on mobile devices, so we don’t have to worry about crushing bandwidth.

The best current approach uses a combination of srcset and and the Fullscreen API:

The HTML

<figure id="lake">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-small.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-small.jpg 1600w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-large.jpg 2400w" alt="Photograph of Lake Louise, British Columbia">
	<figcaption>Fullscreen API with srcset Image Replacement 	<button>Click</button> to present content in fullscreen mode. Press <kbd>ESC</kbd> to cancel.
	</figcaption>
</figure>

The use of srcset's w syntax ensures that the SD version of the image is presented if the viewport is 1600 device pixels wide or less.

The CSS

The image is centered in fullscreen mode using flexbox; the <figcaption> is hidden in the same. Note that the :fullscreen is written using the final spec, with vendor prefixes on separate lines, as combining them in group selectors will sometimes fail in certain browsers:

#lake {
	position: relative;
	font-size: 0;
}
:-moz-full-screen figcaption {
	opacity: 0;
}
:-webkit-full-screen figcaption {
	opacity: 0;
}
:full-screen #figcaption {
	opacity: 0;
}
#lake figcaption {
	background: rgba(255,255,255,0.75); 
	position: absolute; bottom: 0;
	margin: 0; width: 100%;
	padding: 1rem;
	font-size: 1.3rem;
	transition: 1s;
}
#lake img {
	width: 100%;
	height: auto;
}
:-moz-full-screen img {
	width: 100%;
}
:-webkit-full-screen {
	width: 100%;
}
:-moz-fullscreen {
	display: flex;
	align-items: center;
	justify-content: center;
}
:-ms-fullscreen {
	display: flex;
	align-items: center;
	justify-content: center;
}
:fullscreen {
	display: flex;
	align-items: center;
	justify-content: center;
}

The button requests fullscreen display via JavaScript:

function launchFullscreen(element) {
	if (element.requestFullScreen) {
element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
	} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
	} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
	}
}
var lake = document.getElementById("lake"),
fullbutton = lake.getElementsByTagName("button")[0];
fullbutton.onclick = function() {
	launchFullscreen(lake);
}

Note that you will need to use the picturefill polyfill for browsers that currently lack support for the srcset attribute.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/gBwbc