Gist para Imágenes HTML5 con AVIF, webp y JPG

gistfile1.txt

	"imagenes": {
		"prefix": "pic",
		"body": [
			"<picture>",
				"<source", 
					"\t sizes=\"1920w, 1280w, 640w\" ",
					"\t srcset=\"img/imagen.avif 1920w, \n\t\t\t img/imagen-1280.avif 1280w, \n\t\t\t img/imagen-640.avif 640w\" ",
					"\t type=\"image/avif\">",
				"<source", 
					"\t sizes=\"1920w, 1280w, 640w\" ",
					"\t srcset=\"img/imagen.webp 1920w, \n\t\t\t img/imagen-1280.webp 1280w, \n\t\t\t img/imagen-640.webp 640w\" ",
					"\t type=\"image/webp\">",
				"<source", 
					"\t sizes=\"1920w, 1280w, 640w\" ",
					"\t srcset=\"img/imagen.jpg 1920w, \n\t\t\t img/imagen-1280.jpg 1280w, \n\t\t\t img/imagen-640.jpg 640w\" ",
					"\t type=\"image/jpeg\">",
				"<img loading=\"lazy\" decoding=\"async\" src=\"img/imagen.jpg\" lazyalt=\"imagen\" width=\"500\" height=\"300\">",
			"</picture>"
		]
	}

Gracias!. En mi caso aporto los dos snippets que se han visto hasta ahora en el curso y le he añadido los tab para ir completando:

"images" : {
		"prefix" : "im",
		"body":[
			"<picture>",
				"\t<source srcset=\"$1.avif\" type=\"image/avif\">",
				"\t<source srcset=\"$2.webp\" type=\"image/webp\">",
				"\t<img loading=\"lazy\" src=\"$3.jpg\" alt=\"$4\" ",
			"</picture>"
		]
	},

	"images2": {
		"prefix": "pic",
		"body": [
			"<picture>",
				"\t<source", 
					"\t sizes=\"1920w, 1280w, 640w\" ",
					"\t srcset=\"img/$1.avif 1920w, \n\t\t\t img/$2.avif 1280w, \n\t\t\t img/$3.avif 640w\" ",
					"\t type=\"image/avif\">",
				"\t<source", 
					"\t sizes=\"1920w, 1280w, 640w\" ",
					"\t srcset=\"img/$4.webp 1920w, \n\t\t\t img/$5.webp 1280w, \n\t\t\t img/$6.webp 640w\" ",
					"\t type=\"image/webp\">",
				"\t<source", 
					"\t sizes=\"1920w, 1280w, 640w\" ",
					"\t srcset=\"img/$7.jpg 1920w, \n\t\t\t img/$8.jpg 1280w, \n\t\t\t img/$9.jpg 640w\" ",
					"\t type=\"image/jpeg\">",
				"\t<img loading=\"lazy\" decoding=\"async\" src=\"img/$11.jpg\" lazyalt=\"$12\" width=\"500\" height=\"300\">",
			"</picture>"
		]
	}