Gerador de tag picture

Você exportou a mesma foto em avif, webp e jpg para economizar banda, e agora precisa lembrar a sintaxe de picture e source, qual formato vem antes e onde entram alt e classes. Errar a ordem não dá erro visível: o navegador simplesmente serve o arquivo mais pesado e você segue achando que otimizou a página inteira.

O navegador lê os source de cima para baixo e para no primeiro type que sabe decodificar; se nenhum servir, cai no img. Por isso a ferramenta escreve avif primeiro, webp depois e o img por último, do formato menor para o mais compatível. Se você deixar o campo do avif ou do webp em branco, aquela linha simplesmente não aparece na saída.

O img não é só o plano B: é o elemento que de fato renderiza, então largura, altura, classes e loading igual a lazy vão nele, não no picture. Acrescente width e height para reservar o espaço e evitar solavanco de layout. O texto do alt é copiado literalmente, então uma aspa dupla no meio dele quebra o atributo. Para trocar o recorte por breakpoint, você precisa do atributo media em cada source, que este formulário não escreve.