While illustrative images are now well-served in HTML5 and CSS with regards to high-DPI displays, with broad browser support for the picture element, srcset and sizes, Retina background images have been largely neglected during these advances. As background images are often quite large (in both pixel count and file size), this is particularly bothersome. While there has been an intermediate solution available for a long time, there’s now an even better one.
See the Pen Effective Retina Backgrounds with SVG by Dudley Storey (@dudleystorey) on CodePen.
While the HTML5 spec now has Retina/HiDPI screens well in hand with a combination of media queries and srcset, images loaded via CSS have been somewhat excluded from recent progress: there’s no CSS equivalent to srcset or sizes to easily fit images of the optimal resolution into page backgrounds.
This oversight is ironic, given that massive high-resolution background pictures arguably consume more bandwidth and download time than smaller inline illustrative images. With that in mind, let’s look at some techniques you can use to code and load the optimally sized images for the all screens.
I’ve been working on a method to fade a page background image sequence, like the current Twitter login page. Usually, these effects are “faked” using a background and cover layer, but I was interested in manipulating true background images with blend modes.
Quite by accident, I found that Webkit-derived browsers, such as Chrome, Safari and Opera, will actually cross-fade images in the background, given the right combination of CSS. In the interests of that, I’ve presented the basic code here, with more detail to come in a future article. You can also see a fullscreen version and inspect the code at CodePen.
