Last active
October 21, 2024 02:57
-
-
Save codigoconjuan/30973f8e5e7d210e0458bc49a55ad2c4 to your computer and use it in GitHub Desktop.
Gist para Imágenes HTML5 con AVIF, webp y JPG
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "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 Profe...yo le agregué un \t adelante de cada etiqueta <source y adelante de la etiqueta <img para que idente todo el contenido dentro de la etiqueta <picture
quedanto asi como resultado final:
"imagenes": {
"prefix": "pic",
"body": [
"<picture>",
"\t<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\">",
"\t<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\">",
"\t<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\">",
"\t<img loading=\"lazy\" decoding=\"async\" src=\"img/imagen.jpg\" lazyalt=\"imagen\" width=\"500\" height=\"300\">",
"</picture>"
]
}
Gracias Profe Juan de la Torre, muy buen aporte y excelente sus clases.
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>"
]
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Gracias Juan!