support art direction in pictures

divriots · Apr 19, 2024 · e20ba2f · e20ba2f
1 parent 175af23
commit e20ba2f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/packages/www/public/features/optimize-images/source/index.html b/packages/www/public/features/optimize-images/source/index.html
@@ -9,6 +9,9 @@
     </style>
   </head>
   <body>
+
+    <the-fold></the-fold>
+
     <h1>Responsive images generation</h1>
     <p>
       The right image size will be used by the browser based on the device of
@@ -39,6 +42,13 @@ <h3>picture_screenshot.png</h3>
       <img src="./picture_screenshot.png" alt="Girl listening to music" />
     </picture>
 
+    <h3>Picture tag with media sources</h3>
+
+    <picture>
+      <source srcset="./long-cat.jpg" media="(width > 800px)">
+      <img src="./tall-cat.jpg" alt="Image">
+    </picture>
+
     <h2>IMG tag</h2>
 
     <h3>JPEG image</h2>

diff --git a/packages/www/public/features/optimize-images/source/long-cat.jpg b/packages/www/public/features/optimize-images/source/long-cat.jpg
diff --git a/packages/www/public/features/optimize-images/source/tall-cat.jpg b/packages/www/public/features/optimize-images/source/tall-cat.jpg
diff --git a/src/optimize.ts b/src/optimize.ts
@@ -673,7 +673,7 @@ async function processImage(
 
       const sizes = img.attr('sizes');
 
-      for (const s of sourcesToGenerate) {
+      for (const s of sourcesToGenerate.reverse()) {
         const sourceWithThisMimeType = picture.children(
           `source[type="${s.mime}"]`
         );
@@ -701,17 +701,8 @@ async function processImage(
         const source = `<source ${
           sizes ? `sizes="${sizes}"` : ''
         } srcset="${srcset}" type="${s.mime}">`;
-        picture.prepend(source);
+        img.before(source); // Append before this way existing sources are always top priority
       }
-
-      // Reorder sources to priority order 1)avif 2)webp
-      //
-      function popupSource(type: ImageMimeType): void {
-        const nodes = picture.children(`source[type="${type}"]`);
-        picture.prepend(nodes);
-      }
-      popupSource('image/webp');
-      popupSource('image/avif');
     }
   }
 }