add experimental amp-img -> img transformation

packages/optimizer/lib/DomTransformer.js

@@ -34,7 +34,7 @@ const TRANSFORMATIONS_AMP_FIRST = [
   'AutoExtensionImporter',
   // Applies image optimizations, must run before PreloadHeroImage
   'OptimizeImages',
-  // Detect hero image and preload link rel=preload
+  // Detect hero image and preload link rel=preload, needs to run after OptimizeImages
   'PreloadHeroImage',
   // Applies server-side-rendering optimizations
   'ServerSideRendering',

packages/optimizer/lib/transformers/ApplyLayout.js

@@ -110,8 +110,7 @@ function maybeAddSizerInto(node, layout, width, height) {
     sizer = createIntrinsicSizer(width, height);
   }
   if (sizer) {
-    const referenceNode = node.firstChild;
-    insertBefore(node, sizer, referenceNode);
+    appendChild(node, sizer);
   }
 }
 

packages/optimizer/lib/transformers/PreloadHeroImage.js

@@ -16,7 +16,13 @@
 
 'use strict';
 
-const {createElement, hasAttribute, insertAfter, firstChildByTag} = require('../NodeUtils');
+const {
+  appendChild,
+  createElement,
+  hasAttribute,
+  insertAfter,
+  firstChildByTag,
+} = require('../NodeUtils');
 const {findMetaViewport} = require('../HtmlDomHelper');
 const {isValidImageSrcURL} = require('../URLUtils');
 const {isTemplate} = require('../AmpConstants');
@@ -38,6 +44,7 @@ class PreloadHeroImage {
   constructor(config) {
     this.log = config.log;
     this.enabled = config.preloadHeroImage !== false;
+    this.experimentImg = config.experimentImg;
   }
   async transform(root, params) {
     if (!this.enabled || params.preloadHeroImage === false) {
@@ -159,6 +166,7 @@ class PreloadHeroImage {
         hasAttribute(child, 'placeholder') &&
         isValidImageSrcURL(child.attribs.src)
       ) {
+        this.generateImg(child);
         return {src: child.attribs.src, media, srcset: child.attribs.srcset || ''};
       }
     }
@@ -189,6 +197,7 @@ class PreloadHeroImage {
     if (this.isTinyNode(layout, width, height)) {
       return null;
     }
+    this.generateImg(ampImg);
     return {src, srcset, media};
   }
 
@@ -216,6 +225,35 @@ class PreloadHeroImage {
     }
     return {width: 0, height: 0};
   }
+
+  generateImg(node) {
+    if (!this.experimentImg) {
+      return;
+    }
+    const imgNode = createElement('img', {
+      class: 'class=i-amphtml-fill-content i-amphtml-replaced-content',
+      decoding: 'async',
+      loading: 'lazy',
+    });
+    const attributesToCopy = [
+      'alt',
+      'attribution',
+      'object-fit',
+      'object-position',
+      'referrerpolicy',
+      'src',
+      'srcset',
+      'sizes',
+      'title',
+    ];
+    for (const attr of attributesToCopy) {
+      if (hasAttribute(node, attr)) {
+        imgNode.attribs[attr] = node.attribs[attr];
+      }
+    }
+    node.attribs['i-amphtml-ssr'] = '';
+    appendChild(node, imgNode);
+  }
 }
 
 /** @module PreloadHeroImage */

packages/optimizer/spec/end-to-end/hello-world/expected_output.default.html

@@ -17,10 +17,10 @@ <h1>Hello, AMP world!</h1>
     <i-amphtml-sizer style="display:block;padding-top:56.4815%;"></i-amphtml-sizer>
   </amp-img>
   <amp-video width="480" height="270" src="https://amp.dev/static/samples/video/tokyo.mp4" poster="https://amp.dev/static/samples/img/tokyo.jpg" layout="responsive" controls class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.2500%;"></i-amphtml-sizer>
     <div fallback>
       <p>Your browser doesn't support HTML5 video.</p>
     </div>
+    <i-amphtml-sizer style="display:block;padding-top:56.2500%;"></i-amphtml-sizer>
   </amp-video>
 </body>
 </html>

packages/optimizer/spec/end-to-end/hello-world/expected_output.lts.html

@@ -17,10 +17,10 @@ <h1>Hello, AMP world!</h1>
     <i-amphtml-sizer style="display:block;padding-top:56.4815%;"></i-amphtml-sizer>
   </amp-img>
   <amp-video width="480" height="270" src="https://amp.dev/static/samples/video/tokyo.mp4" poster="https://amp.dev/static/samples/img/tokyo.jpg" layout="responsive" controls class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.2500%;"></i-amphtml-sizer>
     <div fallback>
       <p>Your browser doesn't support HTML5 video.</p>
     </div>
+    <i-amphtml-sizer style="display:block;padding-top:56.2500%;"></i-amphtml-sizer>
   </amp-video>
 </body>
 </html>

packages/optimizer/spec/end-to-end/hello-world/expected_output.paired.html

@@ -20,10 +20,10 @@ <h1>Hello, AMP world!</h1>
     <i-amphtml-sizer style="display:block;padding-top:56.4815%;"></i-amphtml-sizer>
   </amp-img>
   <amp-video width="480" height="270" src="https://amp.dev/static/samples/video/tokyo.mp4" poster="https://amp.dev/static/samples/img/tokyo.jpg" layout="responsive" controls class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
-    <i-amphtml-sizer style="display:block;padding-top:56.2500%;"></i-amphtml-sizer>
     <div fallback>
       <p>Your browser doesn't support HTML5 video.</p>
     </div>
+    <i-amphtml-sizer style="display:block;padding-top:56.2500%;"></i-amphtml-sizer>
   </amp-video>
 </body>
 </html>

packages/optimizer/spec/transformers/experimental/PreloadHeroImage/amp-iframe/expected_output.html

@@ -0,0 +1,11 @@
+<html>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="preload" href="http://example.com/foo.png" as="image" data-hero media="(max-width: 649px)">
+</head>
+<body>
+  <amp-iframe src="/test" layout="responsive" width="320" height="900" media="(max-width: 649px)">
+    <amp-img placeholder layout="fill" src="http://example.com/foo.png" i-amphtml-ssr><img class="class=i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="http://example.com/foo.png"></amp-img>
+  </amp-iframe>
+</body>
+</html>

packages/optimizer/spec/transformers/experimental/PreloadHeroImage/amp-iframe/input.html

@@ -0,0 +1,10 @@
+<html>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+<amp-iframe src="/test" layout="responsive" width="320" height="900" media="(max-width: 649px)">
+  <amp-img placeholder layout="fill" src="http://example.com/foo.png"></amp-img>
+</amp-iframe>
+</body>
+</html>

packages/optimizer/spec/transformers/experimental/PreloadHeroImage/attributes/expected_output.html

@@ -0,0 +1,8 @@
+<html>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-img width="500" height="400" alt="Some image" attribution="by someone" object-fit object-position="center" referrerpolicy="unknown" src="foo.jpg" srcset="for2.jpg w320, foo3.jpg" sizes="many" title="the title" i-amphtml-ssr><img class="class=i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" alt="Some image" attribution="by someone" object-fit object-position="center" referrerpolicy="unknown" src="foo.jpg" srcset="for2.jpg w320, foo3.jpg" sizes="many" title="the title"></amp-img>
+</body>
+</html>

packages/optimizer/spec/transformers/experimental/PreloadHeroImage/attributes/input.html

@@ -0,0 +1,19 @@
+<html>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-img width="500" height="400" 
+      alt="Some image"
+      attribution="by someone"
+      object-fit=""
+      object-position="center"
+      referrerpolicy="unknown"
+      src="foo.jpg"
+      srcset="for2.jpg w320, foo3.jpg"
+      sizes="many"
+      title="the title"
+    ></amp-img>
+</body>
+</html>
+

packages/optimizer/spec/transformers/experimental/PreloadHeroImage/config.json

@@ -0,0 +1,3 @@
+{
+  "experimentImg": true
+}

packages/optimizer/spec/transformers/experimental/PreloadHeroImage/fixed/expected_output.html

@@ -0,0 +1,9 @@
+<html>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="preload" href="/foo.png" as="image" data-hero>
+</head>
+<body>
+  <amp-img width="500" height="400" src="/foo.png" i-amphtml-ssr><img class="class=i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="/foo.png"></amp-img>
+</body>
+</html>

packages/optimizer/spec/transformers/experimental/PreloadHeroImage/fixed/input.html

@@ -0,0 +1,8 @@
+<html>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-img width="500" height="400" src="/foo.png"></amp-img>
+</body>
+</html>

packages/optimizer/spec/transformers/experimental/PreloadHeroImage/intrinsic-layout/expected_output.html

@@ -0,0 +1,9 @@
+<html>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="preload" href="/foo.png" as="image" data-hero>
+</head>
+<body>
+  <amp-img layout="intrinsic" width="500" height="400" src="/foo.png" i-amphtml-ssr><img class="class=i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="/foo.png"></amp-img>
+</body>
+</html>

packages/optimizer/spec/transformers/experimental/PreloadHeroImage/intrinsic-layout/input.html

@@ -0,0 +1,8 @@
+<html>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-img layout="intrinsic" width="500" height="400" src="/foo.png"></amp-img>
+</body>
+</html>

packages/optimizer/spec/transformers/experimental/PreloadHeroImage/responsive-layout/expected_output.html

@@ -0,0 +1,9 @@
+<html>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="preload" href="/foo.png" as="image" data-hero>
+</head>
+<body>
+  <amp-img layout="responsive" width="500" height="400" src="/foo.png" i-amphtml-ssr><img class="class=i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" src="/foo.png"></amp-img>
+</body>
+</html>

packages/optimizer/spec/transformers/experimental/PreloadHeroImage/responsive-layout/input.html

@@ -0,0 +1,8 @@
+<html>
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-img layout="responsive" width="500" height="400" src="/foo.png"></amp-img>
+</body>
+</html>