Image Optimization
Otimizacao de Imagem (Desempenho Web)
O processo de reduzir o tamanho dos ficheiros de imagem para carregamento mais rapido de paginas web, mantendo qualidade visual aceitavel, equilibrando racio de compressao com qualidade percebida.
Detalhe técnico
A otimizacao de imagem combina multiplas tecnicas: selecao de formato (AVIF > WebP > JPEG para fotos; SVG > WebP > PNG para graficos), niveis de compressao (JPEG 75-85 para web, WebP 75-80), redimensionamento (servir dimensoes exatas), carregamento responsivo (srcset, element picture), carregamento preguicoso (loading="lazy"), CDN com redimensionamento de borda e stripping de metadados (EXIF, ICC para web). As metricas de desempenho: Largest Contentful Paint (LCP) depende fortemente da entrega de imagens.
Exemplo
```javascript
// Image compression via Canvas
canvas.toBlob(
blob => console.log(`Size: ${(blob.size/1024).toFixed(0)} KB`),
'image/jpeg',
0.8 // quality: 0.0 (smallest) to 1.0 (best)
);
// WebP output (25-34% smaller than JPEG)
canvas.toBlob(cb, 'image/webp', 0.8);
```