demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Medusa
Fullscreen API with Image Replacement to present content in fullscreen mode. Press ESC to cancel.

Switching To High Resolution Images For Fullscreen Display On The Web

javascript / fullscreen api

Estimated reading time: 3 minutes, 30 seconds

Integrating "Retina" images into web pages presents an ongoing challenge for developers, who suffer from poor browser support, delayed standards implementation, a fragmented market and complex intermediate solutions.

In contrast, switching in high-DPI images for fullscreen browser display is both a necessity and relatively easy:

  • Thumbnail images will look awful when expanded to fullscreen size on most screens, 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 on the site.
  • 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.

Broadly speaking there are two solutions for switching in images with the Fullscreen API: CSS and JavaScript.

The CSS Approach

While the Fullscreen API is completely , it makes a few additions to . One of these is the :fullscreen pseudo-selector, which is only active when the selected element is displayed in fullscreen mode.

While it’s possible to use :fullscreen on an image directly to alter its appearance on a page, it can’t be used to swap out an image in that way. A better solution is to place the HiDPI as an alternative to the background, revealing it when the parent of element is promoted to fullscreen display:

In this case, I’ll place the image content inside a header:

header { display: block; width:80%; max-width: 1000px; margin: 0 auto;
background: url(medusa-lores.jpg');
background-size: contain; }
header img { width: 100%; opacity: 0; }

I’ll provide the container element with a copy of the image in order to maintain the correct aspect ratio. This copy is made completely transparent via to show the version that is the background image.

<header>
<img src="medusa-lores.jpg" alt="Medusa">
</header>

When fullscreen mode is initiated, we can use the :fullscreen pseudo-selector to swap out the background image:

:fullscreen  { width: 100%; background: url('medusa-hirres.jpg'); }

(Of course, you would also need the UI and to initiate fullscreen mode, which I’ve covered in a ).

While this works, it doesn’t scale well: you’d need to write a separate rule for each thumbnail/HiDPI pair. The technique also downloads the high-resolution version of the image regardless of device, platform, or user interaction. You could get around the first two issues by placing the background image in a media query, while using an opportunity to make a further test that the screen has enough pixels to show the high resolution version of the image: there’s no point in loading it if that is not the case. Assuming that the hi-res version is 1600 pixels wide, our test would be that the screen is at least that wide, or a HiDPI display. You could do this within a media query:

@media screen and (min-device-width: 1600px) or (-webkit-min-device-pixel-ratio: 2) or (-moz-min-device-pixel-ratio: 2) or (min-device-pixel-ratio: 2) {
:fullscreen {
width: 100%; background: url('medusa-hirres.jpg'); }
}

… but it’s still not a great solution for anything more than one or two images. A better, albeit more complex alternative, is JavaScript.

The JavaScript Method

The equivalent, albeit more complex JavaScript alternative involves rolling the test into the fullscreen JavaScript function with a matchMedia test. Assuming that the original thumbnail image is inside an element with a id of #bigpic that will request fullscreen display:

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();
} 
if (screen.width >= 1600 || window.matchMedia("(-webkit-min-device-pixel-ratio: 2) or (-moz-min-device-pixel-ratio: 2) or (min-device-pixel-ratio: 2)")) { 
document.querySelector("#bigpic img").setAttribute("src", "medusa-hires.jpg"); }
}

And in your HTML:

<figure id="bigpic">
<img src="medusa-hires.jpg" alt="Medusa">
<figcaption><button onclick="launchFullscreen(document.querySelector('#bigpic'))">
Fullscreen Image</button></figcaption>
</figure>

You’ll notice that when returning to normal display mode, the image is kept in the high-resolution version, assuming that your screen was large enough to switch the image. We'll look at improving the script, resetting the effect correctly and better UI controls for fullscreen displays in the next article.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.