What determines which source in a picture element the browser uses?

Short interview answer

The browser evaluates source elements in document order and uses the first one whose media condition matches and whose type, if present, it supports; if none match, it falls back to the img element, which is required and also supplies the alt text used in every case.