47 lines
1.9 KiB
XML
47 lines
1.9 KiB
XML
<snippet>
|
|
<content><![CDATA[
|
|
<picture>
|
|
<!-- 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
|
|
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">
|
|
|
|
<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 -->
|
|
<tabTrigger>pict</tabTrigger>
|
|
<!-- Optional: Set a scope to limit where the snippet will trigger -->
|
|
<!-- <scope>source.python</scope> -->
|
|
</snippet>
|