Skip to main content

Delivering Optimal Images for Phones and Tablets on the Modern Web

Joshua Marantz (Google)
Mobile
Location: 113 Level: Intermediate
Average rating: ***..
(3.31, 16 ratings)
Slides:   1-PDF 

From the perspective of people writing web-sites, the plain old <img> tag is the easiest and simplest way to put a photo on a page. In an ideal world, this doesn’t change just because of the wide variety of devices, network latencies, and bandwidths available today and in the future. But to achieve this resilience and present a great experience to both web developers and site visitors, we have to explore the deep corners of HTTP Vary headers, CDN best practices, HTML5 tags, and CSS media queries. Plus we must learn the quirks and personalities of the major browsers.

First let’s consider the variety of devices and browsers available. Modern high-end tablets have large, dense displays, are often used on fast WiFi connections with no practical limitation on network bandwidth. Low-end smartphones, however, are constrained in pixel density, physical size, and run on networks where many users pay for bandwidth beyond a constrained monthly budget. Some devices support Webp, others support Jpeg XR, while the remainder require jpegs that are typically 40% larger. To deliver the best experience to users of all devices, different images must be sent to each. What options do web site owners have to exploit these browser-specific capabilities?

Next, consider the networks. Some sites may employ content delivery networks (CDNs) or local proxy caches to accelerate delivery. Some users may run behind a proxy cache provided by their employer or ISP. These proxies play an important role, particularly when the resources are marked cacheable via HTTP request headers. Challenges abound at this level when attempting to optimize content across different browsers without compromising the ability of proxy caches to accelerate site delivery.

The penultimate step is the HTML and CSS markup, which conveys the rendering instructions to the browser. Along with JavaScript, the markup determines which images will be requested by clients and in what order. Ideally, at this level, we want to present each browser with markup that maximizes its rendering performance. We want all resources to be discoverable by the browser’s prescanner, and be delivered in the format best suited for the browser, which, depending on the browser, might be a Webp or Jpeg XR image. Tiny images should be inlined or combined as sprites. Large above-the-fold images should be inlined at low resolution and, after onload, swapped with the hi-res version.

But the process always begins with the site author and the tools used to generate markup. The focus at this point should be on ease of authoring. HTML picture tags and CSS media queries are great ways to implement a responsive experience, but they are quite verbose. Fortunately, they are also, in many cases, computable from a hi-resolution image and a few common policies about how to handle different displays and browsers. Moreover, there are still a significant number of end-users running browsers that lack modern Responsive Web Design constructs, and delivering a non-responsive but functional view to such browsers broadens the reach of a web site.

In this talk, we’ll discuss the challenges of creating a web-site deployment flow that attempts to provide the best of both worlds: an easy to maintain site based on simple markup that is delivered as efficiently as possible to each client while providing a responsive experience to phones, tablets, and the desktop.

Photo of Joshua Marantz

Joshua Marantz

Google

Joshua Marantz is a software engineer at Google, where he is tech-lead of mod_pagespeed, a project to build an open-source Apache module for automatically improving website latency and reducing bandwidth consumption by rewriting HTML, CSS, Javascript, and Images. At Google he has also worked on latency improvements in web caching infrastructure and scalable social networking. Prior to Google, Josh spent 20 years in the Electronic Design Automation industry, much of it working on accelerated functional simulation. He holds BS and MS degrees from MIT, in Computer Science and Engineering, and Electrical Engineering and Computer Science.