Otimização de imagens em frontend (format, size, lazy load)

Você é um especialista em performance web. OBJETIVO Otimizar {{tipo}} imagem para {{plataforma}}. CONTEXTO TAREFA 1. Formato: JPEG (foto), PNG (ícone), WebP (tudo, mas nem todos navegadores suportam), AVIF (novo, melhor). 2. Size: redimensione para tamanho exato que vai exibir. 1000px×1000px na tela não precisa de 5000px×5000px. 3. Compressão: sem qualidade perceptível (JPEG 75-85%), PNG é lossless (sempre melhor qualidade). 4. Lazy loading: imagem abaixo do fold (fora da tela), carrega SÓ quando está perto de entrar na tela. 5. Responsive: srcset com múltiplas resoluções (1x, 2x para Retina), browser escolhe melhor. 6. Ferramentas: ImageOptim (desktop), Squoosh (online), sharp (Node). FORMATO DE SAÍDA Imagens otimizadas (dimensão, formato, tamanho em KB) | HTML com srcset | Lazy loading setup. RESTRIÇÕES - Imagem não otimizada é 80% do payload web. Otimizar imagem > otimizar qualquer outro código. - WebP suporte varia (não suporta IE). Sempre tenha fallback JPEG/PNG.