Los navegadores modernos quieren AVIF, los antiguos quieren WebP, y algo tiene que haber para todo lo demás. Suelta una imagen y llévate el conjunto entero más el marcado que sirve a cada visitante el archivo que le corresponde.
Cada una produce el conjunto completo, no un único archivo.
AVIF, WebP y JPEG a 1280 y 360 píxeles, más un elemento picture por imagen con las fuentes en el orden correcto.
Indica la carpeta donde vivirán las imágenes y el texto alternativo, copia el marcado y llévate el zip: el HTML viene dentro como archivo de texto.
Porque el navegador coge la primera fuente que sabe leer, así que AVIF tiene que ir antes que WebP y el img suelto tiene que ir el último. Si el orden está mal, todos los visitantes se llevan el archivo más grande que ofreciste. Esa es la parte tediosa de escribir a mano y fácil de equivocar sin darse cuenta.
1280 cubre portátiles y casi todas las tabletas; 360 cubre los móviles, que es donde el ahorro importa de verdad. El srcset deja elegir al navegador, así que un móvil con mala conexión nunca descarga el archivo de escritorio.
No. Son archivos normales: súbelos junto a tu HTML y el marcado funciona. Si más adelante pones un CDN de imágenes de verdad delante de tu sitio no necesitarás nada de esto, pero para un puñado de imágenes en una página escrita a mano esto es todo el trabajo.
Lo que muestra la imagen, contado a alguien que no puede verla. Cada imagen del lote tiene su propio campo, porque una descripción compartida entre diez fotografías no ayuda a nadie. Déjalo vacío solo si la imagen es puramente decorativa.
Optimizador de imágenes online gratuito