`type` with `picture` (long)

gistfile1.md

One of the most common suggestions we’d heard from people joining the responsive images conversation was that we “just” need a new format—a single image that contains all the different sources we could possibly need.

To make this happen, we’d first need to invent a new format—well, not us, but one of the big browser vendors would have to fund and research it, with intent to give it away to all the other browsers for free. Then we’d need some new markup anyway, so we could tell the browser which source to load. Then, to handle transferring only parts of a single file, we’d need to tinker with the protocols that power the web.

Not the easiest thing to sell on a web standards mailing list.

It got us thinking, though: there was one problem with introducing a new format that we could solve. A new image format can’t have a fallback pattern in and of itself, and the best solutions we have for this all involve making a request for the file before determining whether we need to throw it away.

<img src="image.webp"
 data-fallback="image.jpg" 
 onerror="this.src=this.getAttribute('data-fallback'); this.onerror=null;"
 alt="…">

capt. This results in two requests in browsers that don’t support WebP: first for the WebP that it can’t render, and then another for the JPEG that it can.

But where the picture element introduces a smarter way of loading images—with a single request—we could add a syntax that tells the browser to disregard a source unless it recognizes the contents of a type attribute.

<picture>
  <source type="image/svg+xml" srcset="pic.svg">
  <img src="pic.png" alt="…">
</picture>

capt. With this syntax, any browser that supports SVG will get the SVG source, while every other browser will get the PNG. One request and no wasted bandwidth.

Seeing as the average WebP file is 25%-34% smaller compared to JPEG and clever use of SVG can solve all our Retina woes in one easy package, we’ll find plenty of use for this approach today—and if a magic responsive image format does come along someday, we’ll be ready.

people just joining the responsive images conversation was that we “just” need a new format

Little repetitive with the word, "just". How about, "[...] newcomers to the responsive images conversation was that we "just" [...]" ?

Examples and text are inconsistent:

• First example: ideal case = .webp & fallback = .jpg
• First caption: ideal case = "SVG" & fallback = "PNG"
• Second example: ideal case = .svg & fallback = .png
• Second capture: ideal case= "SVG" & fallback = "PNG"
• Closing: ideal case "WebP" & fallback = "JPEG"

capt. This results in two requests in browsers that don’t support SVG: one for the SVG that it can’t render, and one for the PNG that it can.

the multiplicity of the subject switches between clauses ("browsers" -> "it")