From e2721c6f7dee49099c76dff9d829cd0f9cfb9b65 Mon Sep 17 00:00:00 2001
From: Brian Rogers <captbrogers@gmail.com>
Date: Wed, 24 Aug 2022 11:22:00 -0600
Subject: [PATCH] modifying the picture element

---
 Packages/User/pict.sublime-snippet | 73 ++++++++++++++----------------
 1 file changed, 34 insertions(+), 39 deletions(-)

diff --git a/Packages/User/pict.sublime-snippet b/Packages/User/pict.sublime-snippet
index 378240a..797afad 100644
--- a/Packages/User/pict.sublime-snippet
+++ b/Packages/User/pict.sublime-snippet
@@ -1,47 +1,42 @@
 <snippet>
     <content><![CDATA[
 <picture>
-    <source type="image/avif"
-        srcset="
-          ${1:imageName}-640w.avif   640w,
-          ${1:imageName}-1280w.avif 1280w,
-          ${1:imageName}-1920w.avif 1920w
-        "
-        sizes="
-            550px,
-            (max-width: 768px) calc(100vw - 3em),
-            (max-width: 1376px) calc(50vw - 8em)
-        ">
+    <!-- https://github.com/nucliweb/image-element -->
+    <source
+        sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
+        srcset="${1:imageName}-640w.jpg 640w, ${1:imageName}-1280w.jpg 1280w, ${1:imageName}-1920w.jpg 1920w"
+        type="image/jxl">
 
-  <source type="image/webp"
-    srcset="
-      ${1:imageName}.webp?w=100&fm=webp 100w,
-      ${1:imageName}.webp?w=200&fm=webp 200w,
-      {1:imageName}.webp
-    "
-    sizes="
-      550px,
-      (max-width: 768px) calc(100vw - 3em),
-      (max-width: 1376px) calc(50vw - 8em)
-    ">
+    <source
+        sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
+        srcset="${1:imageName}-640w.avif 640w, ${1:imageName}-1280w.avif 1280w, ${1:imageName}-1920w.avif 1920w"
+        type="image/avif">
 
-  <img
-    srcset="
-      ${1:imageName}.jpg?w=100&fm=jpg&fl=progressive 100w,
-      ${1:imageName}.jpg?w=200&fm=jpg&fl=progressive 200w,
-      ${1:imageName}.jpg
-    "
-    sizes="
-      550px,
-      (max-width: 768px) calc(100vw - 3em),
-      (max-width: 1376px) calc(50vw - 8em)
-    "
-    src="${1:imageName}.jpg"
-    alt="${1:imageName}"
-    loading="lazy"
-    decoding="async"
-    width="{{ $width }}"
-    height="{{ $height }}">
+    <source
+        sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
+        srcset="${1:imageName}-640w.webp?w=100&fm=webp 100w, ${1:imageName}-1280w.webp?w=200&fm=webp 200w, ${1:imageName}.webp"
+        type="image/webp">
+
+    <source
+        sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
+        srcset="${1:imageName}-640w.jpg 640w, ${1:imageName}-1280w.jpg 1280w, ${1:imageName}-1920w.jpg 1920w"
+        type="image/jpeg">
+
+    <img
+        sizes="550px, (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em)"
+        srcset="${1:imageName}.jpg?w=100&fm=jpg&fl=progressive 100w, ${1:imageName}.jpg?w=200&fm=jpg&fl=progressive 200w, ${1:imageName}.jpg"
+        src="${1:imageName}.jpg"
+        alt="${1:imageName}"
+        <!--
+        loading="lazy"
+        decoding="async"
+        -->
+        <!--
+        fetchpriority="high"
+        decoding="sync"
+        -->
+        width="{{ \$width }}"
+        height="{{ \$height }}">
 </picture>
 ]]></content>
     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->