Existem muitas opções para fazer isso, desde desenvolvimentos internos baseados em bibliotecas de código aberto e suítes, como o ImageMagick, até ferramentas e APIs baseadas na nuvem. Qualquer que seja a ferramenta que usamos em nossa implantação, há quatro tarefas principais que – no mínimo – qualquer pipeline deve realizar.
- Redimensionar imagens. O redimensionamento da imagem é o primeiro e mais importante passo. Ele traz grandes impactos no peso, sem prejudicar a qualidade visual, desde que não o tornemos menor que o tamanho da viewport. Sempre devemos definir e aplicar uma resolução máxima de imagem em nossa web, por exemplo, 2000 px de largura. Idealmente, daríamos uma resposta responsiva à Web definindo diferentes pontos de interrupção e fornecendo imagens que se encaixam nas exibições de nossos usuários. Se precisar de ajuda para escolher seus pontos de interrupção, consulte este artigo no melhores tamanhos de imagem para a web.
- Converter para o formato certo. JPEG é o formato padrão na web. O PNG pode funcionar melhor com desenhos gráficos com cores sólidas; somente nesses casos, pode produzir um peso menor com melhor qualidade. Você pode considerar oferecer WEBP para usuários do Chrome, Edge, Firefox e Android, mantendo o JPEG como substituto para o Safari e iOS. Pode economizar de 10 a 30% do peso da imagem com qualidade muito semelhante, talvez um pouco mais de desfoque e menos toques. Para uma revisão atualizada, você pode verificar este artigo em formatos de imagem para web.
- Comprimir imagens devidamente. Podemos fazer isso com um poderoso conjunto de código aberto como ImageMagick e simplesmente defina um fator de qualidade – tipicamente 75 a 85 – para imagens JPEG (e WEBP). Ainda existe a possibilidade de usar uma métrica perceptiva para proteger melhor a qualidade e aumentar ainda mais o peso, uma opção disponível em algumas nuvens ferramentas de otimização de imagem.
- Livre-se dos metadados. Do disparo à edição, as imagens acumulam metadados, como dados exif. Embora possam ser úteis para fins de edição e gerenciamento, eles não têm impacto sobre como as imagens são exibidas em nossa web. Seu peso pode facilmente chegar a 20kB ou mais por imagem. Devemos nos livrar dos metadados antes de publicar na web. Só precisamos garantir que as imagens sejam codificadas com a orientação adequada e com um perfil sRGB, aderindo a boas gerenciamento de cor práticas.