Um guia para iniciantes em JPEG vs PNG (e como usar ambos)

O que seria a web com imagens? Em poucas décadas, a internet passou de uma impressora matricial digital para um servidor dinâmico de multimídia, incluindo imagens, vídeos, animações e muito mais. No entanto, quando se trata de fotos digitais, pode haver confusão sobre JPEG vs PNG, especificamente quando usar cada um.

Se você olhar para uma imagem JPEG ao lado da mesma, mas como um PNG, provavelmente não verá diferença. Este é o ideal, pois ambos os formatos de imagem visam reproduzir a melhor imagem possível para a web. No entanto, existem diferentes casos de uso e técnicas de otimização que você precisa estar atento.

Neste artigo, vamos comparar JPEG vs PNG e dizer quando você deve usar cada formato de imagem. Primeiro, porém, vamos apresentá-lo a cada tipo de arquivo.

A diferença entre JPEG e PNG

Na superfície (no sentido literal), não há diferença entre JPEG e PNG. Em outras palavras, se colocarmos duas imagens e pedirmos para você escolher qual é JPEG e qual é PNG, você não saberá dizer na maioria das vezes. Por exemplo, pegue a seguinte imagem:

Você é capaz de decidir se esta borboleta mórmon escarlate é uma imagem JPEG ou PNG? Claro, sem um quadro de referência você não pode fazer uma comparação:

Existem diferenças definidas, embora não vá fazer muita diferença neste caso. Enquanto você está tentando decidir (sem espiar as ferramentas de desenvolvedor do seu navegador), há alguns detalhes técnicos que podemos compartilhar:

• O formato de arquivo do Joint Photographic Experts Group (JPEG) oferece compactação com perdas de imagens digitais. Isso significa que a qualidade da imagem é perceptível se o equilíbrio entre isso e o tamanho do arquivo variar muito. JPEGs são arquivos 'planos'. Em outras palavras, eles não podem exibir transparência em um arquivo. Embora você possa ajustar o nível de compactação, mesmo nas melhores configurações, um JPEG será um arquivo de 8 bits, o que afeta o alcance dinâmico. Além disso, um JPEG geralmente inclui um perfil de cores, que informa aos monitores como exibir as cores.
• Em contraste, as imagens Portable Network Graphics (PNG) são arquivos prontos para a web. É um formato mais dinâmico que o JPEG, com capacidade de saída de arquivos de 24 bits. Também é um formato 'sem perdas', o que significa que você pode duplicá-lo sem prejudicar a qualidade da imagem. No entanto, você não pode ajustar a compactação para arquivos PNG e não há perfil de cores. Apesar disso, um PNG é perfeito para web, com base em suas especificações técnicas.

Parece claro – PNGs se adequam à web, e JPEGs não. Bem, esta não é a história completa. Cada tipo de arquivo é ótimo para determinados aplicativos. A seguir, vamos discuti-los.

JPEG vs PNG: quando você deve usar cada um

A web tira o melhor proveito de JPEGs e PNGs. Na verdade, eles se encaixam de uma maneira agradável, sem muito cruzamento. Como uma frase de efeito útil, aqui está quando você deve usar JPEG vs PNG:

Se você quiser exibir uma fotografia, use JPEG. Para qualquer outro arquivo – especialmente gráficos digitais – use PNG.

No entanto, esse conselho não é verdadeiro para todas as situações (embora seja relevante para quase todos os casos). Por exemplo, se você combinar desenhos digitais com imagens de banco de imagens, tanto o JPEG quanto o PNG serão tecnicamente incorretos de usar. Mais tarde, você terá mais conhecimento para tomar a decisão certa, embora haja algumas outras dicas para lhe dar.

Por exemplo, se você pretende copiar imagens, use um formato de arquivo diferente do JPEG. Isso ocorre porque os formatos de compactação com perdas reconstroem apenas uma versão aproximada do arquivo. Por outro lado, o PNG é uma reprodução 1:1 porque oferece compactação sem perdas.

Além disso, se você quiser redimensionar sua imagem depois de salvá-la, use JPEG, pois isso lida bem com o dimensionamento. PNGs usam uma estrutura de codificação diferente, que se degrada quando você altera as dimensões (ou outros atributos técnicos).

Outros formatos de imagem que você deve conhecer

Claro, JPEG vs PNG não é a única comparação de formato de arquivo de imagem a ser considerada. Existem muitos outros tipos de arquivos que competem por atenção e têm outros casos de uso:

• Formato de Interface Gráfica (GIF). Se você postar um meme ou vídeo de reação no Twitter que anima, é um GIF. Na verdade, o PNG procurou substituir os arquivos GIF em sua especificação original e ambos oferecem camadas de transparência.
• Formato de arquivo de imagem marcado (TIFF). Esse formato de arquivo baseado em raster é ótimo para impressão devido ao suporte para espaços de cores CMYK.
• Formato de imagem bruto (RAW). Você só usará isso se for fotógrafo e é exclusivo da câmera que você usa. Embora você possa visualizar arquivos RAW em seu computador, você precisa de um software dedicado para visualizá-los. Os tamanhos dos arquivos são astronômicos, porque os dados estão completos. Na verdade, os formatos RAW não são imagens, mas dados que, quando codificados, representam a imagem.
• Arquivo de imagem de alta eficiência (HEIF). Este é o formato de arquivo principal dos dispositivos iOS. Ele oferece melhor compactação e tamanhos de arquivo do que o JPEG e pode lidar com vários formatos de multimídia diferentes.

Embora cada um desses arquivos de imagem seja usado na web (com exceção de arquivos RAW em relação à exibição), JPEG vs PNG ainda domina. Ambos têm casos de uso específicos para os quais os prós e contras se equilibram bem.

Como preparar suas imagens para upload (em 3 maneiras)

Apesar de JPEG vs PNG sair como um empate em relação à qualidade de exibição final, você precisa lidar com cada formato de uma maneira diferente para obter o melhor dele. Existem três áreas nas quais você pode afetar o tamanho do arquivo, a qualidade e a preparação geral de suas imagens:

• Certifique-se de que as dimensões levem em conta os casos de uso relevantes com os quais você se deparará.
• Escolha uma resolução para sua imagem que seja adequada para a web.
• Use compactação de bom gosto para reduzir ainda mais o tamanho do arquivo de suas imagens sem afetar muito a qualidade.

Como seria de esperar, há um bom equilíbrio aqui. Vamos começar com as dimensões da sua imagem.

1. Defina suas dimensões

As dimensões de uma imagem são mais importantes para o usuário final do que qualquer outro ponto da cadeia. Isso ocorre porque o navegador precisa carregar a imagem e um arquivo grande corroerá a experiência do usuário (UX). No entanto, esta não é a única consideração. Claro que a qualidade também é fundamental. Se você decidir tornar uma imagem pequena em tamanho, isso afetará a qualidade final da imagem (mais para JPEGs do que para PNGs).

A resposta é atingir o ponto ideal em algumas áreas, começando com as dimensões da imagem. Como regra geral, você deseja tornar suas imagens grandes o suficiente para que possam transmitir os detalhes de que você precisa. Há um ponto de exagero em algum lugar que é diferente dependendo da plataforma de destino e da própria imagem.

O sensor de corte moderno e as câmeras digitais full-frame podem produzir imagens com dimensões padrão de cerca de 6.000px x 3.000px (embora existam diferenças selvagens entre as câmeras). Em contraste, imagens com a 'borda longa' em torno de 2.000 pixels são comuns nas mídias sociais. Tenha em mente que isso é para exibição na janela de visualização completa de um dispositivo.

Para imagens de blog, essa regra prática de 2.000 pixels pode ser tão baixa quanto 1.000 pixels. Isso também leva em consideração imagens de alta definição ou 'Retina'. Eles geralmente precisam do dobro das dimensões para serem exibidos com nitidez em telas de alta definição. Na verdade, a resolução é um bom lugar para seguir em frente.

2. Defina a resolução correta

Um dos elementos básicos das telas digitais são os pixels. Esses pequenos pontos compõem a tela inteira, embora os pixels não tenham um tamanho uniforme. Por isso, também devemos considerar a resolução ao preparar nossas imagens JPEG e PNG.

Usamos Pixels Per Inch (PPI) para discutir quantos pixels podem caber em uma tela. Você também pode expressar isso em centímetros, ou como 'pontos'. O último é para formatos de impressão físicos, e os círculos de design gráfico usam DPI com frequência. Como tal, você o ouvirá usado de maneira intercambiável, embora PPI seja o termo correto.

Embora a especificação de imagem PNG use 72 PPI como resolução de design ideal, isso não levaria em consideração as telas modernas de alta definição. Embora você possa dobrar as dimensões de uma imagem para torná-la nítida em todas as telas, também pode fazer o mesmo com a resolução. Por exemplo, faça esta captura de tela da área de trabalho do macOS Big Sur:

É um PNG, com 1.000 pixels na borda longa (a parte superior e inferior neste caso). No entanto, ele usa 144 PPI - embora haja alguma 'mágica' de upload que converte a resolução para 72 PPI no upload para o WordPress.

As imagens PNG e JPEG também podem usar PPIs muito mais altos – as resoluções prontas para impressão são em torno de 300 DPI/PPI. Além disso, muitas imagens de sites de banco de imagens como o Pixabay serão baixadas usando 300 PPI:

Dessa forma, reduzir isso preparará melhor suas imagens para a web e suas várias exibições.

3. Otimize suas imagens usando compactação

Não precisamos falar muito sobre otimização de imagem. É um tópico que você pode encontrar em outros lugares do blog, e quase todos os usuários do WordPress saberão otimizar imagens antes ou durante o processo de upload.

O conceito geral é que você aplica compactação extra às imagens, geralmente com perdas. Isso afeta a qualidade da imagem e é perceptível se você fizer alterações radicais nas dimensões e na resolução antes de aplicar compactação com perdas pesadas.

Esses artefatos precisam ser mínimos para apresentar bem as imagens. Devido a isso, existem muitas ferramentas disponíveis para fazer o trabalho. O mais acessível é o TinyPNG, embora também comprima JPEGs:

No entanto, a compactação aplicada é suave em algumas imagens, o que pode não reduzir o tamanho do arquivo o suficiente. Um serviço como o ShortPixel tem um formato de compactação com perdas agressivo disponível, enquanto sua compactação Glossy faz um trabalho admirável em comparação com o TinyPNG.

A conclusão aqui é que você precisa equilibrar o nível de compactação com o tamanho do arquivo e todos os outros elementos da imagem. Na próxima seção, discutiremos a melhor abordagem a ser adotada.

JPEG vs PNG: Como aproveitar ao máximo cada formato

Apesar das diferenças nos formatos de arquivo, a natureza da navegação na web significa que você pode reduzir a preparação de suas imagens para o seguinte:

• Use dimensões entre 1.000 e 2.048 pixels na borda longa.
• Defina uma resolução de 144 PPI para todas as suas imagens, para garantir que elas sejam exibidas nítidas e claras em todas as telas.
• Aplique compactação sutil por meio da otimização de imagem para ajudar a reduzir o tamanho do arquivo. Levando tudo em consideração, a maioria das imagens terá cerca de 100 a 200kb de tamanho.

Há um pouco mais aqui com base em formatos de arquivo específicos:

• Para arquivos PNG, reduzir as dimensões pode degradar muito a qualidade da imagem. A ideia aqui é manter a resolução o mais alta possível para mitigar esses fatores.
• Os arquivos JPEG não resistem à cópia, pois cada duplicação é mais degradada que a anterior. Se você puder controlar a origem do JPEG (por exemplo, se você tirou a fotografia), crie um JPEG de um arquivo TIFF ou RAW para manter a qualidade da imagem.
• Em nossa experiência, os JPEGs não aceitam compactação tão bem quanto outros formatos de arquivo. Isso significa que é importante preparar e otimizar essas imagens antes de chegar ao estágio de compactação.

Até agora, você deve ter uma compreensão sólida sobre JPEG vs PNG, quando usá-los e como preparar seus arquivos; e se você ainda quer saber qual imagem era JPEG do começo do artigo, é a primeira!

Empacotando

Parece que as imagens rodam a web. Por causa disso, temos vários formatos de arquivo para nos ajudar a fornecer a qualidade certa em um tamanho de arquivo respeitável para o aplicativo. JPEG vs PNG é uma comparação comum porque não está claro no que ambos são bons e são dois formatos de imagem populares.

Resumindo, JPEGs são para fotos e PNGs são para gráficos. Para preparar seus arquivos, a principal preocupação deve ser manter a qualidade da imagem alta e não o tamanho do arquivo. Ainda assim, embora os ajustes na resolução ofereçam as maiores mudanças, isso tem mais impacto na qualidade da imagem. O truque é equilibrar dimensões, resolução e compactação para obter a melhor imagem pronta para a web.

Você prepara suas imagens para a web como descrevemos aqui, ou você faz algo diferente? Deixe-nos saber na seção de comentários abaixo!

Crédito da imagem: minka2507, christels .