i've always assumed thatit would use the 3x

and that the fallback src is only used by browsers that don't understand srcset

But what if there is no 3x image declaration. Will a 3x browser use the 2x image (i.e. the next best) or the fallback?

sorry, i wasn't clear. i meant to say 2x

however i've just read through the specifications here: [w3.org...]

the mozilla developer page is also not difinitive
[developer.mozilla.org...]
all that says is that the browser may chose depending on bandwidth and other criteria (not sure any browser currently impliments that though)

Thanks. So safest course of action is to declare the 2x image as 3x.

The specific w3c article regarding embedded content (multiple versions of images) srcset specs and explanation does a better job of laying out all considerations than I could. It is on the page that topr8 linked above, starting in section 4.8.1 on adaptive images (if I link to it, the link just goes to the page and not the section, same as above). That section can help get a good understanding of how your code interacts with various browsers.

To quote the section linked to by topr8: (http://www.w3.org/html/wg/drafts/html/master/semantics.html#normalise-the-source-densities)

An image source can have a density descriptor, a width descriptor, or no descriptor at all accompanying its URL. Normalising a source set gives every image source a density descriptor.

When asked to normalise the source densities of a source set source set, the user agent must do the following:

Let source size be source set's source size.

For each image source in source set:

If the image source has a density descriptor, continue to the next image source.

Otherwise, if the image source has a width descriptor, replace the width descriptor with a density descriptor with a value of the width descriptor divided by the source size and a unit of x.

If the source size is zero, the density would be infinity, which results in the intrinsic dimensions being zero by zero.

Otherwise, give the image source a density descriptor of 1x.

But I strongly suggest reading through the spec so that it makes sense in context.

Thanks for the reply and reference. I've read that part of that page and now I'm rather confused again - it's almost hopelessly circular in its referencing. Also, I can't see that it does answer my question, which is this:

Will a 3x browser, if not presented with a 3x image to display, fetch the next best choice presented to it (a 2x image) or the fallback?

Yes - always? No - never? Maybe - sometimes?

I'll ask the question another way: Is code such as this: (a) totally unnecessary; (b) vital; (c) a wise precaution - or even (d) a bad idea because it will cause issues?

src="/images/photo1x.jpg" srcset="/images/photo2x.jpg 2x, /images/photo2x.jpg 3x"

I don't use it myself. I don't see a reason to use it unless you are working on a photography gallery and want the highest possible image quality for every device. Some time ago I tried to gather up some generic information on building for mobile, and put it in an article here: [webmasterworld.com...] though I probably should update parts of that article to reflect some best practice evolution since it was written.

From that post, regarding images:

Let your images resize. Control the image size by setting the % width of its container. In css the image element should have this setting:

img,
embed,
object,
video
{
max-width: 100%;
}

..and it will resize to fit the downsized elements automatically.

The container of the image determines its size so images downsize with their containers. For sharpest images I suggest not using full desktop width sizes because they do not retain sharpness when downsized this way. IF image integrity is highly important, then use the method of various resolutions in a srcset. An article you might find useful to consider different responsive image handling options was written in 2012 by Chris Coyier: [css-tricks.com...]

I personally do think it's important if it means a 3x browser will display a 1x image rather than a 2x image, especially as you're advocating stretching images to fit containers.

Let your images resize

If that means loading an image bigger than you need to and then sizing down rather than up, I consider that poor advice IMO - I'd personally only size up. Loss of image quality < load time.

OK as no-one here seems to know any better than me, I'll see if I can find out myself and will post back with the answer!

you're advocating stretching images to fit containers.

Sorry if I gave that impression. No, I do not advocate stretching images, the recommended code does not increase an image's size. The max-width means the max width of the image, not the container; it only downsizes an image to fit its allocated space if the container is downsized.

I agree completely that there are many situations where the image size and filesize (bandwidth) makes it impractical to use large images destined to be viewed on mobile devices. As to how various mobile browsers handle the srcset descriptions, there may be more definitive information at the dev sites for iOS, Mozilla, Android and others.