A maioria das imagens que parecem “grandes demais” para um site não estão mal compactadas. Eles são simplesmente mais largos e mais altos do que precisam ser. Uma foto tirada diretamente de um telefone pode ter 4.000 pixels de largura e ainda assim acabar em uma caixa com 700 pixels de largura. Redimensionar essa imagem faz muito mais pelo tamanho do arquivo do que empurrar um controle deslizante de qualidade.

Os dois trabalhos estão relacionados, mas não são iguais. O redimensionamento altera o número de pixels. A compactação altera a quantidade de dados usados ​​para descrever cada pixel. Acerte primeiro as dimensões e depois compacte – e suas imagens ficarão melhores com o mesmo tamanho de arquivo.

Comece com as dimensões, não com o controle deslizante de qualidade

Decida a largura real da imagem e leve em consideração as telas de alta densidade. Uma regra prática é exportar com o dobro da largura do CSS se quiser que ele permaneça nítido em telefones e laptops com telas densas. Um cartão com 600 pixels de largura, por exemplo, se beneficia de uma imagem de 1200 pixels.

Onde aparece Lado mais longo Notas
Imagem principal de largura total 1600–2000 px 1600 px são suficientes para a maioria dos sites; maior só ajuda em telas muito largas.
Imagem corporal do artigo 1200 px Com densidade 2×, isso cobre uma coluna de conteúdo de 600 px.
Cartão ou miniatura 600 px Menor que isso começa a parecer suave quando ampliado.
Imagem embutida de e-mail 800 px Procure bem menos de 200 KB; muitos clientes bloqueiam imagens grandes de qualquer maneira.
Imagem de compartilhamento social 1200 × 630 px Uma proporção de paisagem comum que a maioria das plataformas corta de forma previsível.

Você não precisa calcular isso perfeitamente. Se o original tiver 6.000 pixels de largura e o maior tamanho que será exibido for cerca de 1.600, não há benefício visual em manter os pixels extras. Reduzir o lado longo é a maior economia disponível.

O que a configuração de qualidade realmente muda

Para JPEG, o valor da qualidade controla a agressividade com que o codificador descarta detalhes que o olho tem menos probabilidade de perceber. Não é uma porcentagem da qualidade original e 80 não significa “80% tão bom”. É simplesmente um ponto na escala onde valores mais baixos produzem arquivos menores e artefatos mais visíveis.

  • Por volta de 80-85 é uma faixa confortável para fotografias que precisam parecer limpas. A diferença do original geralmente é difícil de ver no tamanho normal de visualização.
  • Por volta de 70-78 funciona bem para imagens da web que ficam em um layout e nunca são examinadas de perto. O tamanho dos arquivos cai visivelmente.
  • Abaixo de cerca de 60, os artefatos ficam mais fáceis de detectar: ​​manchas em blocos em céus suaves, halos nas bordas e texto confuso. Para capturas de tela ou gráficos com tipo, evite ir tão baixo.

A compactação JPEG também é composta. Salvar um JPEG já salvo com qualidade inferior não revela os detalhes originais novamente; adiciona uma segunda camada de perda. Comece com a melhor cópia que você possui e exporte uma vez no tamanho necessário.

PNG não tem perdas, portanto, um controle deslizante de qualidade não se aplica. Um PNG geralmente será maior que um JPEG para conteúdo fotográfico, mas mantém intactas as bordas nítidas e a transparência. O WebP pode ser usado no modo com ou sem perdas; com qualidade semelhante, o WebP com perdas costuma ser menor que o JPEG, embora a compatibilidade com softwares mais antigos seja um pouco mais restrita.

Escolha o formato antes de ajustá-lo

A escolha do formato faz mais do que configurações de compactação. Use JPEG ou WebP com perdas para fotografias, capturas de tela com conteúdo fotográfico e qualquer imagem em que tons contínuos sejam importantes. Use PNG para gráficos de cores planas, logotipos, capturas de tela da interface e qualquer coisa que precise de um fundo transparente. JPEG não tem transparência; quando uma imagem com fundo recortado é salva como JPEG, essas áreas são preenchidas – geralmente com branco.

Um erro comum é salvar uma captura de tela nítida de texto como JPEG. A compactação cria halos e manchas tênues ao redor das letras, o que faz com que a imagem pareça de baixa qualidade, mesmo em configurações moderadas. PNG ou WebP manterão o tipo limpo e geralmente produzirão um arquivo menor para esse tipo de conteúdo. Há uma comparação mais próxima JPG, PNG ou WebP?

Um fluxo de trabalho sensato

  1. Mantenha o original. Trabalhe a partir de uma cópia e nunca substitua a única versão de uma foto que lhe interessa.
  2. Redimensione para o maior tamanho que será mostrado. Use o dobro da largura do layout se quiser que telas de alta densidade permaneçam nítidas. Não corte ou estique apenas para atingir um número; mantenha a proporção, a menos que a composição precise ser alterada.
  3. Escolha o formato com base no conteúdo. Foto: JPEG ou WebP. Gráfico plano ou transparência: PNG ou WebP.
  4. Comece com qualidade 80. Compare com 75 e 85 se não tiver certeza. Mova para baixo apenas enquanto a imagem ainda estiver no tamanho que as pessoas verão.
  5. Veja 100% e o tamanho do layout. Diminuído o zoom, quase tudo parece bem. Com o zoom ampliado, você pode localizar artefatos em torno de bordas e faces. Verifique ambos.

Com o compressor de imagem, o limite do lado mais longo e o valor da qualidade ficam visíveis juntos, para que você possa testar uma combinação e comparar o tamanho antes e depois antes de fazer o download. O redimensionador é a melhor escolha quando as dimensões precisam ser exatas, incluindo escala percentual e proporções fixas.

Erros comuns e o que fazer em vez disso

Comprimir antes de redimensionar

Salvar uma foto de 6.000 pixels com qualidade 50 produz um arquivo que ainda é grande, agora com danos visíveis. Redimensione primeiro e depois compacte. A mesma foto com 1600 pixels e qualidade 80 geralmente terá melhor aparência e pesará menos.

Perseguindo o menor arquivo possível

“Menor” não é o objetivo por si só. Uma foto de produto que parece turva na qualidade 40 pode ser menor do que uma na qualidade 78, mas também parece pior na página. Procure ser pequeno o suficiente: claro no tamanho mostrado, sem desperdiçar pixels ou megabytes.

Convertendo transparência para JPEG

Se um logotipo tiver fundo transparente, o JPEG irá preenchê-lo com branco. Em uma página colorida, isso aparece como uma caixa óbvia. Mantenha PNG ou WebP ou prepare uma versão projetada para uma cor de fundo específica.

Salvando novamente o mesmo JPEG repetidamente

Cada salvamento com perdas adiciona artefatos. As edições em lote devem começar no arquivo original e não na última versão exportada. Mantenha um master de alta qualidade e gere a versão web a partir dele.

Esquecendo metadados

As fotos podem conter detalhes da câmera e dados de localização em seus metadados. A recodificação por meio de uma tela, como faz Lovely Tools, produz uma imagem nova sem os metadados anexados. Isso geralmente é bom para a privacidade, mas também significa que você deve manter o original se precisar dos metadados para arquivamento ou por motivos profissionais. Os navegadores modernos aplicam a orientação de uma foto ao desenhá-la, portanto, as fotos em retrato não devem chegar de lado.

Onde a compressão acontece

Em Lovely Tools, a imagem é decodificada pelo seu navegador, desenhada em uma tela nas dimensões escolhidas e codificada novamente como um novo arquivo. Nada é carregado. O original permanece intacto e a cópia compactada existe apenas na guia do navegador até você baixá-la.

Isso também explica os limites. Todo o trabalho acontece na memória do seu dispositivo, portanto, imagens extremamente grandes ou lotes grandes podem ficar lentos em um telefone. O mecanismo de tela do navegador também possui um tamanho máximo. Se uma imagem for muito grande, a ferramenta solicitará uma dimensão menor em vez de produzir silenciosamente um resultado degradado.

Pronto para experimentar? Compactar uma imagem ou leia o que realmente significa executar localmente.