When In Focus was first built for The Atlantic in 2011, TheAtlantic.com was already on three different content-management systems, or CMSs, each powering different parts of the site. The majority of TheAtlantic.com's traffic was from desktop computers. Today, we have standardized on one CMS, called Ollie, and half of TheAtlantic.com's traffic comes from phones and tablets. The one exception was In Focus, which neither used Ollie nor worked on phones.
While an increasing number of users are reading our site on smaller screens, the average size of desktop monitors has increased over the past four years. Over 55 percent of our desktop readers have screens larger than 1,300 pixels wide. To improve In Focus for all of our users meant increasing the maximum width of images for our desktop users while also keeping image sizes small enough to load on cellphones. However, these goals are conflicting. You cannot simultaneously increase the size of your images in pixels while reducing their size in megabytes.
One possible solution was to use an image as wide as the median width of our screen sizes. Say the median screen size across desktops, tablets, and phones is 1,000 pixels wide. We could use a single, 1,000-pixel-wide image that would then scale to fit any browser width. This would certainly improve the experience for the average user, but how would it affect the rest of our users?
Not in a very good way, it turns out. If we ask a user's browser to scale a 1,000-by-750-pixel image to 1,200 pixels wide, the browser would be left to fill in an additional 330,000 pixels. While this is certainly something browsers can handle, the resulting image will be blurry. In the example to the right, slide one is a screenshot of an image scaled to be 20 percent wider and slide two is that same image scaled down from the original using Photoshop. You'll notice that slide one is noticeably blurrier than slide two. We wanted our photography to display beautifully on any platform—settling for blurry images clearly wouldn't work.