Editing Pictures
A <picture> element acts as a container for a for a list of <source> elements followed by an <img> element.
The <img> element provides a fallback image for browsers that don’t understand <picture> elements.
The <source> elements provide various other image resources and specify the conditions under which each can be used.
When you double-click a <picture>, TypeMetal opens the Attribute Editor for the <picture> element, which displays an editable list of the <picture>’s child elements.
<picture> Element Attribute Editor
Use the “+” button next to this list to add a <source> element.
Double-click a <source> or <img> element in the list to drill down into editing its attributes. Note that from there, you can use the ⌘⌥↑ “Jump to parent element” Keyboard Shortcut to easily jump back to inspecting its containing <picture>.
The Attribute Editor presents a similar interface for HTML 5’s two other “media container” elements: <audio> and <video>.