Impossiblue

Responsive images

Disclaimer: This is a page for testing stuff and is kind of an FMEO. Against all odds you have made it here, anyhow. Kudos to you for that. If you find something useful, do use it. Should the World go down the drain because of it, however, do not blame me. So there.

Embedded content

Fig. 1. On a standard so-called low-resolution screen, the user should see an image marked x1. That would be the default 72 ppi image with a resolution of 960x74 pixels. On a screen with twice the resolution, aka “Retina”, an image marked x2 should be served. The resolution of the latter image would be 1920x148 pixels. The image looks its best when the viewport is wide enough to accommodate the inherent width of the image. Should the width of the viewport be reduced (try it on this site), the browser (aka user agent) should scale the image down proportionally.

The HTML

<img src="lips-960x74.jpg" srcset="lips-1920x148.jpg 2x">

The CSS

img { width: 100%; }

For user agents that do not understand the srcset attribute, it is possible to specify an image (completely) different from the srcset alternative(s). The code below will allow that while regular screens will show the 1x variant and a Retina screen will show the 2x variant. As if that were not enough, 3x (supported by WebKit) and higher (good grief) are possible.

Going bananas

<img src="img-0.gif" srcset="img-1.jpg 1x, img-2.jpg 2x, img-3.jpg 3x"> /* And maybe: img-4.jpg 4x */

Background images

Fig. 2. With background images it is piece of cake to serve images tailor-made for any exact width (or width span) using CSS and media queries. Adjust the width of the browser window to see the effect. The numbers state the physical pixel widths of each background image and follow break points in the responsive design. Where the design maxes out, CSS employs the image(s) used for figure 1.

A word or two from Apple:

The pixel values you supply for the width and height properties should match the standard-resolution image’s dimensions. This is because CSS pixels are not the same as device pixels. On standard-resolution displays, CSS pixels and device pixels are 1:1. On Retina displays, however, there are four device pixels inside every CSS pixel. … Safari will automatically discover the target resolution and load the appropriate image specified in the url() function, even if the user is browsing on a dual-monitor setup. If the image is loaded on a standard-resolution display and more than 50% of the window is dragged to a Retina display, the high-resolution image will automatically download and replace the standard-resolution image, and vice-versa.

The HTML

<div></div>

The CSS

@media only screen and (min-width: 998px) {
	div {
		width: 960px; /* Width in CSS pixels */
		height: 74px; /* Height in CSS pixels */
		background-image: url("path/to/image.jpg"); /* Fallback for ignorant browsers */
		background-image: -webkit-image-set(url("path/to/image.jpg") 1x, url("path/to/imagex2.jpg") 2x);
		background-image: image-set(url("path/to/image.jpg") 1x, url("path/to/imagex2.jpg") 2x);
		}
	}

Important: Low-res images are swapped for hi-res images on hi-res screens only in browsers that implement the CSS Level 4 image-set() function. Ignorant user agents need a fallback declaration in the style sheet.

Art direction

Fig. 3. With positioning of background images it is possible to keep the most relevant or interesting part of an image visible in a background container should the width of the viewport change. Note that height is kept constant throughout this exercise, hence no vertical adjustment is necessary.

The CSS

background-position-x: center; /* An easy example */