PNG, JPG ou GIF: escolha do tipo de arquivo de imagem correto para o seu site

Hoje, os dois formatos de arquivo de imagem mais comuns são JPG e PNG. À primeira vista, um JPG pode se parecer exatamente com a mesma imagem salva como um arquivo PNG. Poder escolher JPG para PNG ao salvar um arquivo também faz com que os dois pareçam intercambiáveis, o mesmo além das letras usadas na extensão.

De acordo com a W3Techs, JPG e PNG são usados ​​mais do que outros formatos de arquivo, com PNG sendo usado apenas com um pouco mais de frequência.

No entanto, existem diferenças distintas entre os arquivos JPG e PNG, e você precisará saber qual escolher ao usar imagens online. O tipo de arquivo pode afetar o local onde ele é colocado na página da web, a qualidade com que é visualizado e se ele diminui ou não o tempo de carregamento. Se você quiser incluir animação em seu site ou feeds de mídia social, também vai querer saber um pouco sobre os arquivos GIF e como eles diferem de JPG e PNG.

Inscreva-se no nosso canal no Youtube

Compressão sem perdas e com perdas

O objetivo de compactar uma imagem é economizar espaço - imagens menores são mais fáceis de transferir e armazenar. Imagens grandes ocupam muito espaço digital e podem retardar o carregamento da página da web. Em geral, alguns dados são removidos de uma imagem quando ela é compactada.

Existem dois tipos de compressão: sem perdas e com perdas. Para entender uma das diferenças distintas entre JPG e PNG, você precisará de uma introdução a esses dois tipos de compactação.

Compressão sem perdas

As imagens contêm informações redundantes. A compactação sem perdas remove esses dados redundantes, mas também informa ao computador quanto dos dados era redundante e como reconstruir a imagem. O tamanho do arquivo é reduzido para economizar espaço, mas o arquivo inteiro também pode ser reconstruído a partir do compactado. Adoro este exemplo de Make Use Of. É uma representação propositalmente simplista de como a compactação sem perdas remove informações sem realmente alterar a estrutura:

Compressão com perda

Arquivos MP3 são ótimos exemplos de compactação com perdas. Eles não contêm todo o áudio da gravação original; sons que os humanos não podem ou quase não podem ouvir são removidos. Isso é semelhante ao funcionamento da compactação de imagens com perdas. Quando uma imagem é compactada, as informações são removidas definitivamente, não apenas temporariamente; você não pode restaurar os dados removidos. Cada vez que uma imagem é editada e / ou salva novamente, ela perde um pouco mais de dados, o que reduz a qualidade.

JPG

JPG (ou JPEG) significa Joint Photographic Experts Group. A extensão do arquivo pode ser .jpg ou .jpeg. Essas extensões são a mesma coisa e os arquivos funcionarão da mesma maneira. As primeiras versões do Windows só podiam processar arquivos com três letras, então JPEG foi reduzido para JPG. Quando você visualiza uma foto em um site ou plataforma de mídia social, provavelmente está visualizando um JPG.

Aqui estão os recursos e benefícios dos JPGs:

• Normalmente usado para fotos em vez de gráficos.
• A melhor escolha para capturas de tela de jogos, filmes e conteúdo semelhante.
• Imagem salva em um fundo branco ou em branco (não transparente).
• Tamanhos de arquivo menores do que PNGs.
• Tempos de carregamento de página mais rápidos e melhor experiência do usuário.
• Compressão com perdas, mas a taxa de compressão pode ser ajustada - você pode escolher o quanto a imagem será compactada.
• Editar e salvar novamente degradará a qualidade, embora você possa não notar, dependendo do número de salvamentos e onde a imagem é exibida.

O algoritmo JPG encontra pixels da mesma cor ou valor e os bloqueia em blocos. Embora JPG suporte milhões de cores, a imagem final terá menos cores do que a original (mais ou menos como aquelas faixas de áudio). É assim que a imagem menor é criada, mas também resulta em perda de dados que você nunca poderá recuperar. No entanto, o JPG leva em consideração como as pessoas veem o brilho, então pode manter o brilho mesmo quando as informações de cor são descartadas, o que produz uma imagem de alta qualidade.

PNG

PNG significa Portable Network Graphic. A extensão do arquivo é .png. Quando você visualiza o logotipo de uma marca em um site, provavelmente está visualizando um PNG.

Aqui estão os recursos e benefícios dos PNGs:

• Normalmente usado para ilustrações e outros tipos de gráficos.
• A melhor escolha para ilustrações, diagramas detalhados e capturas de tela do aplicativo.
• Imagem salva em um fundo transparente - coloque-a em seu site sem atrapalhar nada ao seu redor.
• Suporte para uma variedade de cores e tons de cinza.
• Você pode alterar as cores dos arquivos PNG, por exemplo, se quiser atualizar seu logotipo.
• Quanto menos cores forem usadas, menor será o tamanho do arquivo.
• Compressão sem perdas.

Salvar uma foto como PNG

Embora você salve fotos como arquivos JPG na maioria das vezes, há casos em que deseja salvá-las como PNG:

• Você precisa que a imagem seja a mais alta qualidade possível - PNG vende mais detalhes do que JPG.
• Você vai editar e salvar a foto várias vezes. Assim que terminar a edição, você pode salvar a foto como JPG para limitar o tamanho.
• A foto também tem texto em - JPG que reduzirá visivelmente a qualidade do texto.
• Você precisa que a foto tenha um fundo transparente - por exemplo, talvez você esteja usando uma de suas fotos como logotipo.

GIF

GIF significa Graphics Interchange Format. A extensão do arquivo é .gif. Quando você assiste a um pequeno vídeo animado em loop, provavelmente está vendo um GIF.

Aqui estão os recursos e benefícios dos GIFs:

• É o único tipo de arquivo dos três que suporta animação.
• A melhor escolha para gráficos simples.
• Gama de cores limitada.
• Menor do que JPGs devido às acomodações de cores limitadas.
• Compressão sem perdas.

Plugins WordPress para compressão

Para compactar uma imagem para um site WordPress, você pode usar um software, uma ferramenta baseada em navegador ou um plugin. Algumas pessoas não usam um plugin porque não querem sobrecarregar o servidor ou se preocupar com problemas de compatibilidade, ou não querem passar pela etapa extra de criar backups. Se você está procurando agilizar seu processo, no entanto, os plug-ins podem ser bastante eficientes.

Aqui estão algumas coisas que você deve ter em mente ao usar um plugin do WordPress para compressão:

• Você não terá que fazer upload da imagem após redimensioná-la - ela já estará na sua biblioteca de mídia do WordPress.
• Muitos plug-ins têm uma configuração que permite otimizar durante o upload, removendo outra etapa do processo.
• Mesmo que dois plug-ins de compressão digam que fazem a mesma coisa, eles terão suas próprias configurações, prós e contras. Você pode ter que brincar com alguns para encontrar o equilíbrio certo entre a taxa de compressão e a qualidade.
• Versões gratuitas de plug-ins de compressão parecem atraentes no início, mas os resultados da compressão podem parecer ruins, então você terá que atualizar se quiser imagens de maior qualidade.
• Alguns plug-ins são difíceis de instalar e configurar, enquanto outros funcionam perfeitamente assim que saem da caixa.
• Recursos extras tornam alguns plug-ins mais atraentes do que outros. Por exemplo, ShortPixel tem uma opção brilhante, uma atração definitiva para fotógrafos profissionais. O Imagify manterá sua imagem original em uma pasta separada, o que significa que você pode restaurá-la a qualquer momento.

Pensamentos finais

Saber como você usará suas imagens é o primeiro passo para determinar o tipo de arquivo a ser escolhido. Em última análise, o objetivo é usar o menor arquivo possível, mantendo a qualidade necessária para o destino - uma imagem visualizada em um site será exibida em uma página maior do que uma imagem visualizada no Instagram, então você precisará da qualidade ser mais alto para tornar as imperfeições menos perceptíveis. Para as fotos que você perderia com o coração partido, use um sistema de backup para armazenar as originais - se você acidentalmente compactar muito, terá uma maneira de recomeçar.

Precisa encontrar mais imagens para o seu site? Unsplash é um dos meus lugares favoritos para fotografia de arquivo gratuita. Confira nosso artigo usando imagens Unsplash no WordPress com um clique.