Imagens digitais são uma parte inerente da web, e é difícil criar qualquer conteúdo sem alguma mídia. A humilde imagem estática é uma ótima maneira de oferecer um contexto extra à sua escrita.
No entanto, uma imagem pode ser enorme em tamanho de arquivo sem otimização. Compressão com perdas vs compressão sem perdas é uma consideração comum porque cada uma pode reduzir o tamanho de uma imagem, embora existam trade-offs de qualidade a considerar também.
Você quase sempre precisará aplicar alguma compressão em uma imagem. Isto mantém a qualidade em um nível que você especifica como aceitável enquanto mantém os tamanhos dos arquivos baixos. A escolha do nível de compressão correto dependerá de seus objetivos e requisitos finais.
Para este artigo, vamos olhar para compressão com perdas vs sem perdas. Durante todo o processo, falaremos sobre o processo que uma imagem leva para ficar “em forma”, o que é compressão, e muitos outros aspectos da otimização de suas imagens.
Confira nosso guia em vídeo sobre a Compressão com perdas vs sem perdas
Diferenças entre a compressão com perdas e sem perdas
Quando se trata de qualquer das compressões de imagem digital, existem vários formatos diferentes para escolher. Algumas vezes estes terão outros nomes, dependendo de muitos fatores. No entanto, em um nível central, você encontrará dois tipos:
- Compressão com perdas: O objetivo aqui é fornecer o menor tamanho de arquivo possível para uma imagem. Como tal, a qualidade da imagem é frequentemente baixa na lista de prioridades.
- Compressão sem perdas: Você ainda encontrará uma redução substancial no tamanho do arquivo com este formato de compressão, mas a imagem não sofrerá de artefatos e outros problemas.
Geralmente, sua decisão sobre qual formato usar se resumirá ao seu objetivo final: você quer arquivos minúsculos, ou seu foco é a preservação da qualidade?
A compressão com perdas removerá permanentemente da imagem os dados que ela julgar desnecessários. Ela usa muitas técnicas diferentes para conseguir isso, resultando em arquivos de tamanho muito mais lato.
A compressão sem perdas também remove os dados, mas pode restaurar o original se necessário. O objetivo é manter a qualidade alta, mas reduzir o tamanho do arquivo.
Existem algumas maneiras de conseguir isso, mas o resultado é muitas vezes o mesmo. Para descobrir a opção certa para suas necessidades, vamos primeiro dar um passo atrás e rever os conceitos básicos de imagens e compressão em geral.
Elementos de uma Imagem Digital
Como software e desenvolvimento web, muitas vezes há uma “pilha” para levar uma imagem da câmera para a web.
Uma imagem começa como dados “brutos” (daí o nome RAW). Isto é parecido com o código de um aplicativo: os snippets, linhas e valores se traduzem em fundos com cores, suportes de imagem, elementos dinâmicos, e muito mais.
Para uma imagem, o arquivo RAW apresenta uma representação de imagem ligeiramente diferente com base no fabricante da câmera, software de edição, algoritmo de espaço de cores e muito mais. A partir daí, você edita a imagem e a exporta como um dos vários formatos de arquivo (mais sobre estes mais tarde):
Existem alguns elementos diferentes que compõem uma imagem digital padrão:
- Tipo de arquivo: Tipos diferentes fornecerão qualidades que podem ou não se adequar à sua imagem final. A chave é escolher o tipo de arquivo mais adequado para o aplicativo.
- Resolução: Você verá isto frequentemente expresso como megapixels (MP), mas você também usará pixels per inch (PPI) ou pontos por polegada (DPI). Resoluções mais altas oferecem maior qualidade, mas elas também aumentam o tamanho inicial do arquivo.
- Um pouco de profundidade: Este aspecto determina a informação de cor em uma imagem. Uma baixa profundidade de bit renderizará apenas algumas cores, enquanto uma alta profundidade de bit poderia potencialmente renderizar milhões de cores de uma só vez. Geralmente, mais alto é melhor.
- Dimensões: Este é o espaço físico que uma imagem ocupa. Por exemplo, 1.000 pixels x 500 pixels poderiam definir o tamanho total de uma imagem.
- Espaço de cor: Este é um algoritmo que determina como as cores são exibidas. Cada espaço de cor é definido de forma diferente e muitas vezes se resume à preferência do fotógrafo.
Estes elementos se combinam para fornecer uma imagem final de qualidade variável. Por exemplo, uma fotografia JPEG grande, de alta resolução e de alta profundidade de bits irá oferecer qualidade suprema e nitidez:
Em contraste, mesmo uma imagem com grandes dimensões e a capacidade de exibir muitas cores pode parecer pobre a uma baixa resolução:
Este equilíbrio é como você desenvolve a imagem central antes de aplicar a compressão. Entretanto, o formato que você usa para a imagem tem uma grande parte na qualidade final.
Como funciona a Otimização de Imagem na Web
Como a compressão de imagens é a mesma em um sentido geral sob o capô, você pode aplicar regras padrão à forma como você otimiza as imagens para a web.
Cobrimos muitos desses conceitos em outros lugares no blog Kinsta, mas vale a pena dar um rápido resumo para referência:
- Use uma resolução de 72 PPI, já que este é o padrão para a web. Você pode usar um PPI/DPI mais alto por razões de arquivamento, mas assumimos que você está publicando na web.
- Ajuste a “borda longa” da imagem para 2048px, pois este é o ideal para muitos aplicativos diferentes.
- Use uma profundidade de cor de 8 bits se você tiver a opção.
- Execute uma imagem através de uma ferramenta de compressão e otimização antes de publicar.
É um formato simples que pode lhe dar resultados consistentes, embora a compressão e otimização seja algo que expandiremos sobre o resto deste artigo.
Para isso, olharemos para os benefícios e desvantagens da compressão com perdas versus sem perdas.
Como a compressão de imagens pode ajudar suas imagens na web
Em termos gerais, a “compressão” aperta o mínimo e o máximo juntos. Por exemplo, a compressão aumenta o volume mais baixo na música e reduz o mais alto. Isto torna o nível médio mais alto para o ouvido.
Para imagens, a compressão é mais um processo redutor. Isto significa haver uma maior ênfase em tirar dados de sua imagem para reduzir o tamanho do arquivo, enquanto mantém a qualidade o mais alta possível.
Existem muitos algoritmos proprietários diferentes para ajudar a reduzir o tamanho dos arquivos de imagem. Em muitos casos, estes são proprietários de uma empresa específica. Você encontrará muitos padrões de compressão “com perdas” e “sem perdas”, cada um com descritores únicos:
Tudo isso dito, há muitos benefícios no aplicativo de compressão de imagem que não são exclusivos de um formato em particular:
- Você pode manter os tamanhos dos arquivos baixos, melhorando o desempenho do seu site.
- Por extensão, o servidor do seu site terá menos trabalho a fazer, impactando a performance.
- Pequenos tamanhos de arquivo ajudam a reduzir as emissões do servidor. Como tal, você ajuda a contribuir para um futuro sustentável e ético.
- Você consegue exibir uma qualidade quase perfeita e comparável, dependendo do algoritmo e da qualidade de compressão que você escolher.
Muito como criar uma imagem compartilhável, jogar com vários valores de compressão, usar uma empresa específica e escolher o algoritmo correto são vitais para encontrar resultados que funcionem para você.
Prós e contras da compressão com perdas
A compressão com perdas reduz o tamanho do arquivo da imagem, quase excluindo todos os outros aspectos. A maneira como o algoritmo funciona é para remover dados permanentemente. Isto pode ser tão destrutivo quanto parece.
Embora não entraremos muito nas porcas e parafusos, saiba que alguns dos dados removidos por compressão com perdas são visíveis na imagem. A ideia é oferecer a melhor representação da imagem original de alta qualidade com um peso menor – e isso significa que alguns dados não farão o corte.
Em geral, há um par de benefícios no uso de compressão com perdas:
- Os tamanhos dos arquivos serão pequenos – em alguns casos, abaixo de 10 kilobytes (KB).
- A perda de qualidade será aceitável em muitos casos, apesar dos artefatos.
Isto nos leva aos negativos por usar compressão com perdas – que a qualidade da imagem irá reduzir com qualquer quantidade de compressão:
Você verá que a faixa de cores – onde as sombras das cores não se renderizam da maneira correta – e uma perda de clareza da borda será visível em alguns casos. Imagens com menos cores mostrarão menos disto, mas a redução na claridade ainda estará presente.
Além disso, a degradação da imagem é uma característica permanente do processo de compressão. Isto significa que não há como reverter os efeitos em uma data posterior.
Apesar dos inconvenientes, a compressão com perdas é excelente para a web e para o desempenho do seu site. Os pequenos tamanhos de arquivo nem sempre resultam em imagens granulosas, embora você possa (é claro) levar as coisas a extremos:
No entanto, a perda não é a única opção. A compressão sem perdas é uma alternativa para o proprietário de um site consciente da qualidade.
Prós e contras da compressão sem perdas
A compressão sem perdas faz o que diz no rótulo: ela comprime o tamanho do arquivo de uma imagem o máximo possível sem afetar a qualidade visível. Ela faz isso removendo metadados de imagem, o que pode ocupar espaço desnecessário:
O algoritmo de compressão sem perdas também procura pela repetição de sequências de pixels, depois codifica um atalho para exibi-las. Por exemplo, pegue “Command Line Interface” Você frequentemente definirá sua sigla uma vez, então use “CLI” (ou sua sigla escolhida) para referenciá-la à velocidade da luz.
A compressão sem perdas funciona da mesma forma, pois é menos destrutiva. Embora a remoção dos metadados não seja reversível, parte da compressão será, tornando-a um algoritmo flexível para muitos usos.
Os prós do uso da compressão sem perdas giram em torno da retenção da qualidade:
- A compressão sem perdas preserva a maior qualidade em uma imagem em comparação com todos os outros algoritmos.
- A compressão sem perdas é fantástico para fins de arquivamento. Por exemplo, um fotógrafo pode equilibrar os recursos de armazenamento com uma imagem que preserva a maioria dos dados.
- A compressão sem perdas é o algoritmo de compressão preferido para artes visuais: fotografia, design gráfico, arte digital, e muito mais. Combinando um algoritmo sem perdas com a profundidade e a resolução adequadas, pode-se conseguir quase uma cópia “um-para-um”.
Entretanto, há algo a se notar sobre o quão bem a compressão sem perdas serve a nichos específicos: A gama de aplicativos é pequena. Isto reduz sua disponibilidade geral.
Aqui estão alguns outros inconvenientes de compressão sem perdas a serem considerados:
- Caso um site usa muitas imagens, a compressão sem perdas pode não ser a ideal para exibi-las. Isto é porque você vai querer valorizar tamanhos de arquivo menores nestes tipos de situações na maioria dos casos.
- Embora a compressão reduza o tamanho dos arquivos, os algoritmos sem perdas não alteram os dados das imagens tanto quanto os com perdas. Por causa disso, você pode ver apenas reduções marginais no tamanho ao invés de resultados de emagrecimento extremo.
A seguir, vamos olhar para a maneira mais rápida (e potencialmente melhor) de fazer isso.
Como escolher entre com perdas vs sem perdas
Neste ponto, você entende a diferença entre compressão com perdas e sem perdas. No entanto, você ainda pode não saber qual é o melhor algoritmo a ser usado em seu site.
Há duas situações a serem consideradas:
- Para a maioria dos casos de uso na web, a compressão sem perdas é aceitável.
- Caso você quiser exibir fotografia ou arte fotografada, a compressão sem perdas lhe servirá melhor.
Estas considerações dependem do uso de um dos formatos de imagem padrão da web, tais como JPEG, PNG ou GIF. Entretanto, suas necessidades de compressão podem diferir com formatos mais modernos como HEIC e WebP.
Chegaríamos ao ponto de dizer que, a menos que você exiba fotografia em seu site, a compressão com perdas deve ser sua escolha padrão. O WordPress comprime imagens por padrão, indo longe para ilustrar que a compressão com perdas é adequada para quase todos os aplicativos.
Usando um serviço de compressão online para otimizar suas imagens
Há muitas maneiras de você comprimir suas imagens antes de mostrá-las em seu site. Por exemplo, você pode escolher aplicar a compressão na fase de edição. Isto pode ser um subproduto da conversão dos formatos RAW de qualquer maneira.
Alguns provedores de hospedagem premium como Kinsta até oferecem serviços integrados que podem ajudar você a otimizar seus arquivos de imagem automaticamente. O recurso de Otimização de Imagens da Kinsta, gratuito para todos os clientes, cria versões WebP de suas imagens e depois entrega a versão reduzida aos seus visitantes usando o veloz CDN da Kinsta. Você pode escolher entre compressão com e sem perdas, e você também pode ativar ou desativar a funcionalidade à vontade.
Além das ferramentas incorporadas, você também pode escolher entre muitos serviços on-line. Cada um deles irá oferecer uma seleção de algoritmos e uma interface de usuário (IU) exemplar. Além disso, a maioria tem algum serviço gratuito, pelo menos para experimentar o aplicativo antes de você se comprometer.
Cobrimos algumas opções em nosso artigo sobre otimização de imagens, embora estes sejam plugins específicos para WordPress que se conectam a uma interface de programação de aplicativos (API). A boa notícia é que muitos desses plugins também fornecem uma interface online. Por exemplo, considere o ShortPixel:
Aqui, você vai arrastar as imagens para o uploader, depois esperar que o aplicativo as comprima e as processe. Entretanto, você vai querer escolher o algoritmo primeiro, pois o processo começará imediatamente.
A escolha é simples: Duas formas de compressão com perdas (“Lossy” e “Glossy”), e uma opção sem perdas. A interface do ShortPixel faz um bom trabalho para explicar a diferença entre cada algoritmo, e você pode baixar as imagens em segundos.
Embora ambos possam lidar com as suas exigências, a interface Imagify parece mais inteligente e mais profissional do que a do ShortPixel. Há também três “níveis de compressão” aqui – Normal, Agressiva e Ultra:
A pequena diferença aqui é que o Imagify começa com uma compressão sem perdas, e trabalha até chegar a um algoritmo com perdas com artefatos pesados. Entretanto, há algumas outras opções que você não encontrará em outras soluções.
Para começar, você pode manter os dados EXIF intactos para sua imagem, e até mesmo redimensioná-los após a conversão. Isto é inestimável às vezes, especialmente se você quiser aplicar um nível de compressão que pode de outra forma remover os dados EXIF ou limitar como você redimensiona uma imagem.
Muito parecido com seu mítico homônimo, Kraken pode lutar com suas imagens e aplicar vários tipos de compressão. A maioria dos usuários optará pelos tipos com perdas ou sem perdas.
Entretanto, há também um modo Expert:
Isto permite ajustar a compressão às suas próprias necessidades, entre outras opções. Por exemplo, você pode ajustar os níveis de compressão JPEG e PNG, escolher preservar metadados da imagem e até mesmo trabalhar com subamostragem de croma para mudar ainda mais as cores.
Resumo
As imagens podem parecer um aspecto simples do seu site: você pega um arquivo, carrega-o para o WordPress e depois adiciona um Bloco de Imagens para exibi-lo.
No entanto, há muito mais no processo de preparação de uma imagem para a web do que você pode perceber. O formato de compressão que você escolher pode impactar o tamanho do arquivo, a qualidade da imagem e muito mais.
Este artigo analisou a compressão com perdas vs sem perdas e resumiu qual você deve escolher. Apesar de andar na corda bamba de qualidade vs tamanho, a compressão com perdas é perfeita para a maioria dos casos de uso na web. Fotógrafos ou aqueles preocupados em adulterar a qualidade das imagens vão querer usar compressão sem perdas, embora haja menos benefícios em relação ao tamanho do arquivo.
De que lado você está na batalha entre compressão com perdas e sem perdas? Deixe-nos saber seus pensamentos na seção de comentários abaixo!
Salman Ravoof é um desenvolvedor web autodidata, escritor, criador e grande admirador de Software Livre e de Código Aberto (FOSS). Além de tecnologia, ele se entusiasma com ciência, filosofia, fotografia, artes, gatos e comida. Saiba mais sobre ele em seu site e conecte-se com Salman no X.
Deixe um comentário