add picture tag support

Author: mihailShumilov

.nvmrc

@@ -0,0 +1 @@
+v21.7.3

packages/optimizer/lib/transformers/Markdown.js

@@ -72,11 +72,38 @@ class Markdown {
       if (node.tagName === 'img') {
         promises.push(this.transformImg(node, params));
       }
+      if(node.tagName === 'picture') {
+        promises.push(this.transformPicture(node, params));
+      }
       node = tmpNode;
     }
     return Promise.all(promises);
   }
 
+  async transformPicture(pictureNode, params) {
+    const imgNode = firstChildByTag(pictureNode, 'img');
+    if (!imgNode) {
+      return;
+    }
+
+    const src = imgNode.attribs && imgNode.attribs.src;
+    if (!src) {
+      return;
+    }
+    const resolvedSrc = this.pathResolver.resolve(src, params);
+    let dimensions;
+    try {
+      dimensions = await fetchImageDimensions(resolvedSrc);
+    } catch (error) {
+      this.log.warn(error.message);
+      // don't convert images we cannot resolve
+      return;
+    }
+    const ampImgOrAmpAnim = this.createAmpImgOrAmpAnim(dimensions, imgNode);
+    insertAfter(pictureNode.parent, ampImgOrAmpAnim, pictureNode);
+    remove(pictureNode);
+  }
+
   async transformImg(imgNode, params) {
     const src = imgNode.attribs && imgNode.attribs.src;
     if (!src) {

packages/optimizer/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ampproject/toolbox-optimizer",
+  "name": "@vadiamges-ampproject/toolbox-optimizer",
   "version": "2.10.1",
   "description": "Server-side rendering for AMPs.",
   "main": "index.js",