Start Using SRCSET IMG Attribute For Serving Device Specific Images

The article, JavaScript Low Resolution Image Replacer, discussed a JavaScript solution for replacing low resolution images with higher resolution ones after the page finishes loading all the initial resources (thereby reducing the load time of your pages). But what about loading different image sizes based on the resolution of the user’s device. We could write a JavaScript solution for this (and some developers have), but HTML 5 already introduces the concept of <img srcset[2] to serve different images for different resolutions.

How do it…

Here is how to use srcset by specifying image widths:

<img src="<pathToImages>/image-small.png"
     srcset="<pathToImages>/image-medium.png 500w, <pathToImages>/image-large.png 1000w"
     alt="my image">

Here is how to use srcset by specifying pixel density (eg. non-retina == 1x):

<img src="<pathToImages>/image-normalRez.png"
     srcset="<pathToImages>/image-highRez.png 2x"
     alt="my image">

Both pixel density and pixel width can also be specified for srcset (the large image will only be shown on retina devices):

<img src="<pathToImages>/image-small.png"
     srcset="<pathToImages>/image-medium.png 500w, <pathToImages>/image-large.png 1000w 2x"
     alt="my image">

How it works…

In srcset, define any number of comma separated image URLs, each followed by a pixel width (w) descriptor and/or a pixel density (x) descriptor. If you don’t provide a width, the browser will assume infinity, and if you don’t provide a pixel density, then the browser will assume 1x. The browser uses the pixel density descriptor to determine if the image should be shown to the current device, and then calculates the best size image using pixel width descriptor. For example, assuming we have three images each twice as large as the previous (500, 1000, 2000) and a device with a 320 pixel screen width and 1x pixel density, then the following calculations are made[1]:

500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25

The closest value larger than 1 (1x) is 1.5625, so the browser will use the smallest image. But, increasing the pixel density of the device to 2x (eg. a retina device) will cause the browser to use 3.125 for the same reason: 3.125 is the closest value larger than 2 (2x).

As you can imagine, like many HTML 5 features, this attribute probably doesn’t work on the browser that visitors to your site are using[3]. Fortunately, there is a good polyfill[4] to enable the feature in legacy browsers, so there is little reason not to begin using srcset today.


  1. Responsive Images: If you’re just changing resolutions, use srcset
  2. MDN: IMG Attribute SRCSET
  3. Can I use SRCSET
  4. Picture Fill - Image Polyfill

CSS Targeted Only to the IPhone

One of this blogs readers, Dan Humphrey, was helpful enough to let me know that the footer position, in the new design, was not behaving correctly on the iPhone. Sure enough, when scrolling in Safari on the iPhone a position:fixed element behaves like an absolutely positioned element in other browsers. I like the fixed header and footer, and do not want to remove them, but at the same time, I dont want my site looking ...

Absolute Positioned Layer

In my projects, I frequently find the need to absolute position a div somewhere on the page (on we things like position popups and autocomplete/menu widgets). At one time absolute positioning elements was a real chore, as browsers treat absolute positioning differently, depending on where the element is in the DOM and the positioning of the parent elements (more on positioning: Position Everything). I needed a technique to that allowed me to ...

Intro to HTML Canvas Tag

I remember hearing about the Canvas tag some time ago, but until recently I had not given it much thought. However, now we have John Resig using JavaScript and the Canvas tag to compile and render the Processing language (Processing.js), and Jacob Seidelin emulating Mario Kart. I have even read opinion articles claiming that Canvas could replace Flash. Although, that is unlikely, all this buzz portends that Canvas is here to stay and ...

Building Better Forms

When building forms, most of the time, you will have a label either to the left or above the field associated with the label. Designers come up with all kinds of crazy ways to handle the layout, but most are not semantic and require browser hacks. In the past, I have used the following markup:

Example 1: Semantic Forms Version 1 HTML

 <form> <ul> <li><label>Label1</label><input type="text" value"" /><li> <li><label>Label2</label><input type="text" value"" /><li> ...

CSS List Boxes Improved

I came across a slick CSS List Box widget the other day and wanted to share it. The original page was done by Mike Cherim, CSS: List Boxes. I liked how relatively simple the HTML and CSS was, plus the design was very visually appealing.

Example 1: Modified HTML

<div class="clb-shell"> <h3>Web Services (List Boxes Example)</h3> <p>We offer a variety of web services for our customers. Our services include:</p> <ul> <li> <h5><a href="#">Web ...

When to Use Heading Tags

Heading tags are probably the most misused tag in all of HTML. Since the advent of CSS, many web-designers no longer care that an H1 tag is the most important tag of the page or that an H2 is the second most important tag. I have seen pages with multiple H1s and only a few H2s, or pages where HN (where N > 1) styles are bolder than H1 tags. You might be asking yourself, ...

Faux Columns

This past week has been really crazy: 3 Christmas celebrations, 1 Birthday, and family staying over for the last 3 days. Consequently, I have not succeeded in a finishing my xJson Object article. So instead of discussing xJson, today we will discuss a simpler, but very useful technique, known as Faux Columns.

The Problem:

If you have ever tried to design a two-column layout without using tables, you should know that the two columns (by ...

Semantic Star Rating HTML Widget

I am going to deviate this week from the Json Object discussion, as I have not had any time to work on it. Instead, I wanted to share a technique you can use to write semantic HTML for a rating system. If you have ever used a site like or, then you are familiar with the star rating system (0 stars = worst rating, 5 stars = best rating). However, most rating systems ...

Standard Tabs

I was off last week, taking a much needed break. Of course, instead of really relaxing, I decided to play with a PHP framework that I have been tuning and instead laid the foundation for a web-based stuff management system (I have too many books and DVDs to remember what I own anymore). Anyway, this project gave me a good opportunity to build a website from the ground up, adhering to standards and accessiblity. Over ...