Otimizar uma imagem para a Web
Redimensionar, converter para WebP e comprimir uma imagem.
Para que serve este modelo?
Redimensionar, converter para WebP e comprimir uma imagem.
Este modelo prepara uma imagem para uma página Web: reduz a largura para um valor razoável e codifica-a em WebP com qualidade ajustável. O ficheiro é muitas vezes bem mais leve do que uma fotografia de câmara ou uma captura PNG, o que acelera o carregamento da página.
Etapas da Pipeline
Este modelo encadeia automaticamente 4 etapas no Workspace. Pode rever cada definição antes da execução.
- 1Importar uma imagem
- 2Redimensionar a imagem
- 3Converter e comprimir
- 4Transferir a imagem
Porque é que os passos estão nesta ordem
O redimensionamento vem antes da conversão: assim, o codificador comprime a imagem no tamanho final, o que é mais rápido e dá um peso melhor do que comprimir primeiro e reduzir depois.
Quando utilizar este modelo?
- Publicar uma fotografia com 4000 px de largura num artigo de blogue.
- Aligeirar uma captura PNG antes de a incluir numa documentação.
- Preparar a imagem de um produto para uma loja online.
Processamento local no navegador
Quando os módulos utilizados suportam processamento local, os seus ficheiros permanecem no dispositivo durante a execução.
Definições a verificar
- Largura: 1600 px por defeito, com a altura calculada para manter as proporções.
- Formato: WebP por defeito, JPEG ou PNG em alternativa; qualidade 82 em 100.
- Ajuste: «Conter» por defeito; «Cobrir» recorta para preencher exatamente uma largura e uma altura dadas.
Exemplo
- Antes
- Fotografia JPEG com 4032 × 3024 px e 3,8 MB.
- Depois
- WebP com 1600 × 1200 px, geralmente algumas centenas de kilobytes conforme o motivo.
Limites a conhecer
- Uma imagem mais estreita do que a largura pedida é ampliada e perde nitidez: baixe a largura para essas imagens.
- O PNG não tem em conta a qualidade: continua sem perdas e muitas vezes pesado para uma fotografia.
- O peso final depende do conteúdo: uma imagem muito detalhada fica mais pesada do que uma de cores lisas.