Escolher os tipos certos de arquivos de imagem pode parecer uma decisão trivial.

Mas os seres humanos são criaturas visuais, e as imagens são parte integrante da experiência on-line.

A maioria das páginas e artigos usa screenshots e imagens para enriquecer o conteúdo do texto. Na verdade, apenas cerca de 8% dos sites não incluem nenhum conteúdo visual.

Infelizmente, muitos proprietários de websites ainda não entendem que tipos de arquivos de imagem escolher para diferentes casos de uso. O resultado? Eles acabam diminuindo a velocidade decarregamento deseusite porque suas imagens não são o melhor formato disponível, nem são otimizadas.

Neste artigo, cobriremos todas as extensões de arquivos de imagem mais importantes e quando você deve usá-los para proporcionar a melhor experiência de usuário possível a seus visitantes.

Quais são os diferentes tipos de arquivos de imagem?

Os tipos e formatos de arquivos de imagem estão divididos em duas categorias principais: arquivos de imagem raster e arquivos de imagem vetoriais.

Vamos dar uma olhada mais detalhada em cada categoria.

Formatos de Arquivo de Imagem Raster

Os formatos de imagem mais comuns para a web (JPEG, GIF e PNG) estão todos sob a categoria raster.

Os tipos de arquivos de imagens raster mostram imagens estáticas onde cada pixel tem uma cor, posição e proporção definidas com base em sua resolução (por exemplo, 1280×720).

Como elas são estáticas, não é possível redimensionar as imagens com eficiência, o design original e os pixels serão simplesmente esticados para preencher o espaço extra. Isto acaba criando uma imagem desfocada, pixelada ou distorcida de alguma forma.

Imagem Raster - Exemplo JPEG

Imagem Raster – Exemplo JPEG

A grande maioria das fotografias ou imagens que você vê na Internet utiliza um formato de imagem rasterizada.

Formatos de arquivo de imagem vetorial

SVG, EPS, AI, e PDF são exemplos de tipos de arquivos de imagem vetoriais.

Ao contrário dos formatos de arquivos de imagem raster estáticos, onde cada forma e cor de desenho é ligada a um pixel, estes formatos são mais flexíveis.

Os gráficos vetoriais, em vez disso, utilizam um sistema de linhas e curvas em um plano cartesiano, escalonadas em comparação com a área total, e não um único pixel.

Isto significa que você pode ampliar infinitamente a resolução da imagem original sem qualquer perda de qualidade ou distorção.

Ampliação do formato de imagem vetorial

Ampliação do formato de imagem vetorial (Fonte de imagem: Wikipedia.com)

Como você pode ver, a diferença entre a qualidade quando ampliada 7x é completamente incomparável.

Como o SVG calcula as posições com base em uma porcentagem da área total, e não em pixels, não há pixelação alguma.

Somente 8% dos websites não incluem conteúdo visual... mas para os outros 92%, é essencial exibir imagens com o tipo de arquivo correto. 🖼 Encontre as 15 melhores opções neste guide👇Click to Tweet

15 Tipos de arquivos de imagem mais populares

Abaixo, cobrimos todos os principais formatos de arquivos gráficos, desde imagens da web raster, a vetores, até arquivos de software de edição de imagens.

Fazemos um mergulho profundo e cobrimos os prós e os contras, navegador e suporte de SO, e casos ideais de uso para cada formato.

1.JPEG (E JPG) – Joint Photographic Experts Group

Formato Tiger Image JPEG

Formato Tiger Image JPEG

JPEG (ou JPG) é um formato de arquivo de imagem raster com compressãocom perdas que o torna adequado para compartilhar imagens. JPEGs são “com perdas”, o que significa que reduzem o tamanho do arquivo, mas também a qualidade das imagens quando se usa o formato.

O JPEG ainda é um dos tipos de arquivo de imagem mais usados que você verá na Internet por causa de sua compressão e suporte virtualmente universal ao navegador/OS.

A maioria das plataformas demídiasocial (como Facebook e Instagram) transforma automaticamente os arquivos de imagem carregados em JPEGs. Eles também usam tamanhos únicos deimagens de mídiasocial para controlar a resolução de suas fotos.

Vantagens e Desvantagens

Navegador e suporte de SO

Casos de uso

2. PNG — Portable Network Graphics

Kinsta's resource center .png arquivo de imagem

Kinsta’s resource center .png arquivo de imagem

PNG é um formato gráfico raster que suporta compressão sem perdas, mantendo detalhes e contraste entre as cores.

Em particular, PNG oferece uma legibilidade de texto muito melhor do que JPEG.

Isto faz de PNG uma escolha mais popular para infográficos, banners, capturas de tela e outros gráficos que incluem tanto imagens quanto texto.

Vantagens e Desvantagens

Navegador e suporte de SO

Casos de uso

3. GIF – Graphics Interchange Format

Exemplo de uma imagem gif

Exemplo de uma imagem gif

O GIF é outro tipo de arquivo de imagem que se enquadra no formato raster. Ele usa compressão sem perdas, mas “restringe” a imagem a 8 bits por pixel e uma paleta limitada de 256 cores.

O formato GIF é mais famoso (e mais utilizado) para imagens animadas porque sua limitação de 8 bits mantém os tamanhos dos arquivos de animações pequenos e amigáveis à internet.

Vantagens e Desvantagens

Navegador e suporte de SO

Casos de uso

4. WebP

Exemplo de imagem WebP

Exemplo de imagem WebP

WebP é um formato de imagem desenvolvido especificamente para proporcionar uma melhor compressão de imagens sem perdas e com perdas.

A mudança de JPEG e PNG para WebP pode ajudar a economizar espaçoem disco doservidor e largura de banda significativa, com arquivos de imagem até 35% menores para qualidade idêntica.

Vantagens e Desvantagens

Navegador e suporte de SO

Casos de uso

5. TIFF

Ícone TIFFC

Ícone TIFFC

Um formato que não deve faltar neste guia de tipos de arquivos de imagem, temos o TIFF.

TIFF, que é a abreviação de Tagged Image File Format, é um formato de imagem raster mais comumente usado para armazenar e editar imagens que serão posteriormente utilizadas para impressão.

Embora suporte compressão com perdas, ele é tipicamente usado como um formato de imagem sem perdas. Além disso, a maioria dos aplicativos gráficos profissionais que suportam TIFF (Photoshop, Illustrator, etc.) não usam compressão. Assim, é comum que as imagens TIFF sejam grandes em tamanho de arquivo.

Vantagens e Desvantagens

Navegadores e suporte de SO

Casos de uso

6. BMP — Bitmap

Bitmap vs gif

Bitmap vs gif

Bitmap (BMP) é um formato de arquivo de imagem em sua maioria ultrapassado que mapeia pixels individuais com pouca ou nenhuma compressão. Isso significa que os arquivos BMP podem facilmente se tornar extremamente grandes e são impraticáveis de armazenar ou manusear.

Vantagens e Desvantagens

Navegadores e suporte de SO

Casos de uso

7. HEIF – Formato de Arquivo de Imagens de Alta Eficiência

Formato JPEG vs HEIF

Formato JPEG vs HEIF

HEIF, abreviação para High Efficiency Image File Format, é um formato de imagem desenvolvido pela equipe por trás do formato devídeo MPEG para ser um concorrente direto do JPEG.

Em teoria, a compressão é quase duas vezes mais eficiente que o JPEG, levando a imagens de até o dobro da qualidade com tamanhos de arquivo idênticos.

É um formato de imagem raster, baseado no mapeamento de pixels, o que significa que você não pode aumentar a escala das imagens sem perder qualidade.

Vantagens e Desvantagens

Navegadores e suporte de SO

Casos de uso

8. SVG – Scalable Vector Graphics

Logo SVG

Logo SVG

O formato de arquivo Scalable Vector Graphics, geralmente referido como SVG, foi desenvolvido pelo W3C como uma linguagem de marcação para renderizar imagens bidimensionais diretamente dentro do navegador.

Não depende de pixels como um formato raster, mas usa texto XML para delinear formas e linhas de forma similar a como as equações matemáticas criam gráficos.

Isto significa que você pode aumentar infinitamente as imagens SVG sem perda de qualidade.

Vantagens e Desvantagens

Navegadores e suporte de SO

Casos de uso

9. EPS – Earnings Per Share

Ícone EPS

Ícone EPS

Em essência, um arquivo EPS (Encapsulated PostScript) é um arquivo de imagem vetorial utilizado para armazenar ilustrações no Adobe Illustrator e outros softwares de ilustração como o CorelDraw.

Como os arquivos SVG, o EPS é na verdade um documento baseado em texto que esboça formas e linhas com código, em vez de mapear pixels e cores. Como resultado, os arquivos EPS também suportam escalas sem perdas.

Vantagens e Desvantagens

Navegadores e suporte de SO

Casos de uso

10. PDF – Portable Document Format

Exemplo de arquivo PDF

Exemplo de arquivo PDF

Você provavelmente associa o PDF ao armazenamento, salvamento e leitura de documentos em sua maioria baseados em texto. Isso é perfeitamente compreensível – afinal de contas, o documento está bem ali no nome.

Mas os arquivos PDF são na verdade baseados na mesma linguagem PostScript que alimenta os arquivos de imagem vetoriais EPS e podem ser usados para salvar imagens e ilustrações também.

É o formato de imagem de escolha para armazenar ilustrações, capas de revistas e muito mais para impressão posterior. É também a escolha preferida para nossos ebooks Kinsta.

Vantagens e Desvantagens

Navegadores e suporte de SO

Casos de uso

11. PSD – Documento Photoshop

Logotipo PSD

Logotipo PSD

Como o nome sugere, o formato de arquivo PSD é um formato de imagem utilizado para salvar documentos de imagem e trabalha em andamento com o Adobe Photoshop.

Não é um formato de imagem seguro para a web, portanto não é suportado por nenhum navegador ou visualizadores ou editores de imagem padrão.

Vantagens e Desvantagens

Casos de uso

12. AI – Adobe Illustrator Artwork

Ícone do arquivo Adobe Illustrator

Ícone do arquivo Adobe Illustrator

AI é outro formato de imagem desenvolvido especificamente pela Adobe para não apenas salvar a imagem, mas também o estado do projeto.

Cansado de um host lento para o seu site WordPress? Nós fornecemos servidores de alta velocidade e suporte 24/7, com especialistas em WordPress. Confira nossos planos

Como o PSD, ele não é destinado para uso na web e não é suportado por nenhum navegador, nem pela maioria dos visualizadores de imagens padrão.

Ao contrário dos arquivos PSD, você pode escalar livremente os arquivos AI sem qualquer perda na qualidade.

Vantagens e Desvantagens

Casos de uso

13. XCF – eXperimental Computing Facility

Ícone XCF

Ícone XCF

XCF, que significa eXperimental Computing Facility, é um tipo de arquivo de imagem nativo do editor de imagens de código aberto GIMP. É o equivalente dos arquivos PSD e salva caminhos, transparência, filtros e muito mais.

Mais uma vez, este é um tipo de arquivo nativo para armazenar projetos e não é suportado por nenhum navegador ou visualizador de imagens padrão.

Vantagens e Desvantagens

Casos de uso

14. INDD – Documento Adobe InDesign

Ícone Adobe InDesign

Ícone Adobe InDesign

O INDD é um tipo de arquivo nativo para usuários do Adobe InDesign onde você pode salvar arquivos de projeto incluindo conteúdo de página, estilos, amostras e muito mais.

Embora às vezes referido como um formato de arquivo de imagem, ele tende a se ligar a elementos visuais além do texto.

Não é suportado por nenhum navegador ou visualizador de imagens padrão, uma vez que não é um formato seguro para a web.

Vantagens e Desvantagens

Casos de uso

15. Tipos de arquivo de imagem bruta

Os formatos de imagem bruta são os tipos de arquivo que uma câmera digital utiliza para armazenar imagens de qualidade total para posterior pós-produção e edição.

Principais tipos de arquivos de imagem bruta por fabricante de câmera:

Ao invés dos 256 tons por canal de cor (8 bit) disponíveis em um arquivo JPEG, os arquivos RAW oferecem até 16.384 tons por canal de cor (14 bit) em uma única imagem. Isso lhe dá mais flexibilidade no ajuste de cores e contraste no pós-processamento.

Imagens brutas não são destinadas à web ou compartilhamento e não são suportadas por nenhum navegador ou visualizador de imagens de grande porte.

Vantagens e Desvantagens

Casos de uso

Tipos de arquivo de imagem FAQs

Quais são os 3 tipos de arquivos comuns de um arquivo de imagem?

Com base em dados relacionados ao uso da web, os três tipos mais comuns de arquivos de imagem são PNG, JPEG e SVG.

Estatísticas de uso de formatos de arquivos de imagem

Estatísticas de uso de formatos de arquivos de imagem (Fonte de imagem: w3techs.com)

Examinemos a seguir o que os torna tão difundidos.

1. PNG: Capturas de tela, Banners, Infografias, Fotos

Como o PNG como formato se presta melhor ao texto dentro da imagem, ele é mais freqüentemente usado para capturas de tela, banners (dependendo do tamanho do anúncio), e muito mais.

Como utiliza compressão sem perdas, também é utilizada por designers e fotógrafos para exibir fotos de alta qualidade em seus websites deportfólio, por exemplo.

Estes dois fatores, juntamente com seu navegador universal e suporte a SO, fazem dele o tipo de arquivo de imagem mais popular na web. PNGs estão presentes em 77% dos websites.

2. JPEG: Fotos

A compressão com perdas significa que o JPEG é uma opção melhor a ser usada para mostrar as imagens em todo o seu conteúdo. A perda de qualidade é pouco visível para o usuário médio da Internet, e você pode economizar considerável espaço em disco e largura de banda.

É por isso que é o segundo formato mais popular na Internet, utilizado por quase 72% dos sites. A maioria dos sites usa tanto PNGs quanto JPEGs para diferentes fins.

Como um lembrete: Não há diferença entre JPG vs JPEG, eles são duas siglas diferentes e extensões de arquivo para o mesmo formato.

3. SVG: Logotipos, Ícones e Ilustrações

Os arquivos SVG são arquivos vetoriais escaláveis que são perfeitos para ícones, logotipos, gráficos e ilustrações simples. A imagem pode até mesmo ser inserida diretamente na página como código CSS.

É por isso que os SVGs vêm em terceiro lugar, usados por 27% dos websites.

Menção honrosa: Imagens animadas de GIF

Embora raramente o formato de escolha para as imagens estáticas, o GIF tem feito um retorno como a escolha número 1 para o compartilhamento de animações.

Exemplo animado de gif

Exemplo animado de gif

Como resultado, cerca de 22% dos websites utilizam GIFs em suas páginas, embora provavelmente também utilizem PNGs e JPEGs como seus formatos padrão.

Qual é o formato de imagem de mais alta qualidade?

Os formatos de imagem bruta são da mais alta qualidade, mas têm tamanhos de arquivo excessivamente grandes, de até centenas de megabytes.

Para imagens da web, o formato de arquivo WebP oferece tamanhos de arquivo 25-35% menores que o JPEG para as mesmas fotos de qualidade, o que significa que você pode carregar imagens de maior qualidade para o mesmo espaço em disco e acelerar seu site.

O HEIF é outra alternativa JPEG com compressão mais eficiente, mas atualmente não é suportado por nenhum dos principais navegadores.

Os arquivos PNG oferecem compressão sem perdas, mas isso significa que os tamanhos dos arquivos serão extremamente grandes e lentos de carregar. Um único arquivo PNG pode muitas vezes ser centenas de KB ou até mesmo 1MB+. Entretanto, se você aproveitar algumas táticas como carrega mento preguiçoso (disponível no núcleo desde o WordPress 5.5) e um CDN, você ainda poderá ter um site rápido.

Quais formatos de arquivo suportam a transparência?

Os tipos de arquivos de imagem mais comuns para a web que suportam transparência são PNG, WebP, GIF e até mesmo SVG.

A maioria dos tipos de arquivos de imagem de projetos nativos como PSD, XCF e AI também apóiam a transparência.

Por outro lado, o popular formato de imagem JPEG não suporta transparência.

PNG é melhor que o JPEG?

A principal diferença entre PNG e JPEG é que o PNG é um formato de imagem sem perdas, enquanto o JPEG é um formato com perdas. Isto significa basicamente que PNG usa técnicas de compressão sem sacrificar a qualidade original ou detalhes da imagem.

Para textos em imagens, capturas de tela de tutorial e quando você quer que sinais ou outros elementos finos sejam 100% visíveis em uma foto, PNG é o formato certo.

PNG vs JPEG tira cômica

PNG vs JPEG tira cômica (Fonte da imagem: lbrandy.com)

Como você pode ver nesta foto engraçada acima, PNG, que é representada à esquerda, é muito melhor em exibir claramente texto e formas simples quando comparado ao JPEG, o da direita.

Isso significa que JPEG é um tipo de arquivo de imagem ruim? De jeito nenhum!

Para posts regulares em blogs ou imagens de cabeçalho, o JPEG oferece mais do que qualidade suficiente com arquivos de tamanho significativamente menor. Você pode frequentemente economizar até 50% ou mais de espaço enquanto luta para detectar qualquer diferença na qualidade a olho nu.

Mantenha o conteúdo visual de seu website claro com este guia para os melhores tipos de arquivo de imagem ✨Click to Tweet

Resumo

Não há falta de imagens que você poder i a usar legitimamente para seus projetos. Esperamos que este artigo tenha lhe ajudado a entender quais tipos e formatos de arquivos de imagem usar em que contexto para obter os melhores resultados.

Os formatos raster são melhor utilizados para imagens e quadros, enquanto os vetores são um ótimo substituto para logotipos, ícones e gráficos digitais.

Usar os tipos certos de arquivos de imagem para a tarefa certa pode não só ajudar a melhorar a velocidade decarregamento desuapágina, mas também diminuira largura de bandae acarga doservidor. Como um efeito positivo subseqüente, sua experiência geral do usuário também melhorará muito. Nada mal, uh?


Economize tempo, custos e otimize o desempenho do seu site com:

  • Ajuda instantânea de especialistas em hospedagem do WordPress, 24/7.
  • Integração do Cloudflare Enterprise.
  • Alcance global com 28 centros de dados em todo o mundo.
  • Otimização com nosso monitoramento integrado de desempenho de aplicativos.

Tudo isso e muito mais em um plano sem contratos de longo prazo, migrações assistidas e uma garantia de 30 dias de devolução do dinheiro. Confira nossos planos ou entre em contato com as vendas com as vendas para encontrar o plano certo para você.