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.
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.
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.
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
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 universal e suporte a sistemas operacionais.
- Tamanho de arquivo bastante baixo.
- A compressão de imagens com perda pode levar a uma má legibilidade do texto.
Navegador e suporte de SO
- Suportado desde a versão 1.0 de todos os principais navegadores (Chrome, Firefox, Safari, etc.)
- Apoiado por padrão por todos os visualizadores e editores de imagem de todos os principais sistemas operacionais.
Casos de uso
- Boa escolha para imagens de blogs eartigos, como fotos de cabeça deentrevistados, imagens de produtos e muito mais.
- Não use JPEG para infográficos com muito texto pequeno ou capturas de tela de tutorial onde o texto é chave.
2. PNG — Portable Network Graphics
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
- Imagens de maior qualidade (sem perdas) e texto claramente visível.
- Arquivos maiores podem retardar seu website se forem utilizados em excesso (especialmente imagens de alta resolução).
Navegador e suporte de SO
- Apoiado por todos os principais navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
- Apoiado por todos os principais sistemas operacionais e seus editores de imagem padrão.
Casos de uso
- Boa escolha para infográficos, banners, gráficos de blogs, capturas de tela, cupons e outros visuais que incluem texto.
- Não use para fotos de alta resolução, pois criará arquivos grandes de até vários megabytes.
3. GIF – Graphics Interchange Format
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
- Tamanho de arquivo baixo.
- Apoio à animação.
- A limitação de 8 bits leva a uma qualidade de imagem limitada.
Navegador e suporte de SO
- Apoiado por todos os principais navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
- Apoiado por todos os principais sistemas operacionais e seus editores de imagem padrão.
Casos de uso
- Use GIFs animados não apenas para “apimentar o conteúdo”, mas para demonstrar como completar tarefas em tutoriais e guias.
- Não o utilize se precisar de imagens coloridas superiores a 8 bits (o JPEG suporta até 24 bits).
4. 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
- Arquivos menores para a mesma ou melhor qualidade de imagem.
- Não suportado por todos os navegadores e editores de imagem.
Navegador e suporte de SO
- Google Chrome (Versão 17+ para desktop, 25+ para celular), Firefox (65+), Edge (18+), e Opera (11.0+), suportam WebP nativamente. A versão 14 planejada do Safari irá suportar WebP.
- O formato ainda não é suportado pela maioria dos editores de imagem de SO nativos, mas as opções profissionais como o Photoshop suportam WebP.
Casos de uso
- Substitua os arquivos JPEG e PNG para economizar largura de banda e acelerar o seu site. Se você estiver usando o WordPress como seu software CMS preferido, veja aqui comousarimagensWebPno WordPress e entregar outros formatos aos navegadores legados.
5. TIFF
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
- Arquivos de alta qualidade perfeitos para armazenamento ou publicação impressa.
- Tamanho de arquivo grande devido ao uso típico, sem compressão.
- Suporte limitado do navegador.
Navegadores e suporte de SO
- Nenhum navegador principal pode renderizar um arquivo TIFF sem complementos ou extensões.
- Principalmente disponível como um formato de exportação para ferramentas profissionais de edição e publicação de imagens.
Casos de uso
- Armazenamento e preparação de imagens e gráficos para publicação.
- Usado por muitos scanners para preservar a qualidade de documentos ou imagens digitalizadas.
6. BMP — Bitmap
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
- Tamanhos de arquivos gigantes sem ganhos de qualidade perceptíveis sobre formatos como WebP, GIF, ou PNG.
Navegadores e suporte de SO
- Apoiado por todos os principais navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
- Suporte nativo na maioria dos editores de imagem de SO padrão, como MS Paint.
Casos de uso
- Em 2024, há basicamente zero casos de uso legítimo para o formato de imagem BMP.
7. HEIF – Formato de Arquivo de Imagens de Alta Eficiência
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
- Ótima relação qualidade/tamanho de arquivo.
- Sem navegador e suporte limitado ao sistema operacional.
Navegadores e suporte de SO
- Não é suportado por nenhum dos principais navegadores.
- Apoio nativo em macOS Sierra e iOS 11 e posteriores, mas não em suas respectivas versões Safari.
Casos de uso
- Usado por alguns telefones e dispositivos mais novos para armazenar fotos em qualidade superior aos arquivos JPEG.
8. SVG – Scalable Vector Graphics
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
- Pequenos tamanhos de arquivo e escala sem perdas para ilustrações simples, formas e textos.
- Não é um formato ideal para imagens ou desenhos complexos.
Navegadores e suporte de SO
- Apoiado por todos os principais navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
- Os editores de imagem padrão tendem a não suportar SVG (pois não é adequado para fotografias), mas a maioria dos softwares de ilustração suporta as exportações de SVG.
Casos de uso
- O SVG é o formato ideal para logotipos, ícones, ilustrações simples e qualquer outra coisa que você queira ser livremente escalável com seu design responsivo. Se você estiver usando WordPress, certifique-se de verificar comohabilitar o suporte a WordPress SVG para seu website.
9. EPS – Earnings Per Share
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
- Escala sem perdas.
- Suporte de impressão para documentos e desenhos.
Navegadores e suporte de SO
- O EPS não é um formato padrão de arquivo de imagem da web e não é suportado por nenhum dos principais navegadores.
Casos de uso
- É usado principalmente para armazenar, salvar e imprimir ilustrações quando se trabalha com o Adobe Illustrator ou outro software.
10. PDF – Portable Document Format
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
- O texto indexável e pesquisável o torna perfeito para infografias ou relatórios em profundidade.
- Pode incluir links, botões CTA, e outros elementos interativos.
- Escalabilidade sem perdas.
- Não pode ser incluído no conteúdo da web, deve ser carregado elido como um arquivo separado.
Navegadores e suporte de SO
- Apoiado por todos os principais navegadores, mas você é forçado a abrir o PDF como um arquivo separado. (Você não pode usar arquivos PDF para exibir imagens em todo o seu conteúdo HTML).
- Suportado como um formato pela maioria dos editores de documentos padrão (como MS Word ou Google Docs), e software de ilustração (AI, Inkscape), mas não por software de edição de imagens.
Casos de uso
- O PDF é a melhor opção se você quiser criar um relatório visual interativo ou infográfico que complemente seu conteúdo. Aqui está uma boa lista dos melhores plugins de visualização de PDF para usuários do WordPress.
11. PSD – Documento Photoshop
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
- Todos os filtros, transparência, caminhos e edições são totalmente personalizáveis e reversíveis.
- Qualidade de imagem sem perda.
- Grandes tamanhos de arquivos.
Casos de uso
- Salvando e armazenando projetos do Photoshop antes e depois de serem concluídos.
12. AI – Adobe Illustrator Artwork
AI é outro formato de imagem desenvolvido especificamente pela Adobe para não apenas salvar a imagem, mas também o estado do projeto.
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
- Todos os traçados, linhas, formas, filtros, são personalizáveis e reversíveis.
- Escalas para cima ou para baixo com ilustrações de tamanho livre.
- Grandes tamanhos de arquivos.
Casos de uso
- Salvando e armazenando projetos do Adobe Illustrator antes e depois de serem concluídos.
13. XCF – eXperimental Computing Facility
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
- Todos os caminhos, filtros e formas são personalizáveis e reversíveis.
- Qualidade de imagem sem perda.
- Grandes tamanhos de arquivos.
Casos de uso
- Salvando e armazenando projetos de GIMP antes e depois de serem concluídos.
14. INDD – Documento 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
- Armazenar grandes projetos de design de várias páginas com elementos personalizáveis.
Casos de uso
- É utilizado principalmente por designers gráficos e artistas de produção para projetar e colaborar em cartazes, folhetos, revistas, panfletos e muito mais.
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:
- Kodak: CR, K25, KDC
- Canon: CRW CR2 CR3
- Epson: ERF
- Nikon: NEF NRW
- Olympus: ORF
- Pentax: PEF
- Panasonic: RW2
- Sony: ARW, SRF, SR2
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
- Imagens de maior qualidade com maior variabilidade de cores.
- Arquivos de imagem gigantes (um arquivo bruto pode facilmente chegar a 20 a 40 megabytes).
Casos de uso
- Salvando fotos com a mais alta qualidade possível para pós-processamento e edição.
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.
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.
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.
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.
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?
Editor-chefe da Kinsta e consultor de marketing de conteúdo para desenvolvedores de plugins do WordPress. Conecte-se com Matteo no Twitter.
Deixe um comentário