The document is a draft, which means many things may change before these suggestions become a recommendation at the W3C.

The reasons and goals for the proposed element are spelled out:

Respond to different screen pixel width/height

Respond to different screen pixel densities

Respond to user zoom on image resource.

Provide user agents with information they need to select the most appropriate image source given low bandwidth situations

Will fallback gracefully on older user agents

Can be polyfilled effectively

Retains, at a minimum, the same level of accessibility as current img element

Preserves separation of content markup and styling

Provides a purely client-side solution which can include JavaScript, but doesn’t require it

Supports use cases where authors need to explicitly define different image versions as opposed to simply different resolutions of the same image

Provides a consistent and predictable pattern for delivering alternate media sources based on client context

Supports succinct but understandable mark-up

A lofty list of goals, all necessary and important. Responsive design gurus have struggled for some time with how to deal with images in a responsive site. The list of goals reflects that discussion and those needs.

The proposal states, “The picture element represents a list sources of image data and associated attributes that define when an image should be used. Image data sources may be explicitly declared based on media queries or can be suggested to the browser via the srcset attribute on the picture element.”

New elements and attributes you’ll notice in the example code include the source element and its srcsetattribute. Each source defines one or more image sources and the conditions under which that source should be used. The srcset attribute is a comma separated list of URLs for alternate resources for a single image at different resolutions.

You see a 1x or 2x designation after the image name. This is a reference to resolution, with 2x being a high resolution image meant for high res (aka iOS retina displays which have made everyone’s images look like crud) devices.

Finally, the example code ends with a fallback img element for devices that don’t recognize the picture element.

Suggestions for how alt text should be handled have not changed and would apply to picture as they currently apply to img.

There is an attempt to describe cases like zooming, whether a device is displaying in horizontal or vertical orientation, and other potential snafus. You can read these in the full proposal.

It can be quite a daunting task to serve the right image based on screen size, bandwidth, resolution etc. But I’m sure if this proposal makes it’s way to the w3C standard, dealing with responsive images will get pretty simple and straightforward.