Auto-generating the <picture> syntax?

[simevidas]

Once we have multiple image sources, we need a tool for generating the <picture> syntax. Ideally, these two tasks should both be automated and combined into one task. Maybe the optimal approach would be to have a task that parses content files (be it HTML or Markdown), detects “wild” <img> elements (not contained in <picture>) and then (1) generates the various image sources (based on a given configuration) and then (2) generates and injects the <picture> syntax, replacing the original <img>s.

Notes:

1. Instead of replacing all <img>s, we could use a flag: <img data-picture src="…">
2. The config could contain different named configurations, e.g. for images inside blog posts, for images in the side column, etc. and this config would be set on the images, e.g. <img data-picture="post">, <img data-picture="aside">. etc.

[yoavweiss]

One nit, since there's no art-direction involved here, the syntax should be based on sizes and srcset. See #55

[stephanmax]

@yoavweiss I was looking for a grunt plugin that could do that. Only found this one, though. Unfortunately, it deals with markdown files and uses the <picture> tag.

I ended up writing my own plugin for HTML files and srcset/sizes. Your article was my main inspiration. What do you think?

Probably also helpful for #55.

[yoavweiss]

@Smaxtastic - looks great! :) I have some comments, but I'll just open a bug on your repo

[andismith]

Awesome, thanks @Smaxtastic