Infelizmente, muitos propriet\u00e1rios de websites ainda n\u00e3o entendem que tipos de arquivos de imagem escolher para diferentes casos de uso. O resultado? Eles acabam diminuindo a velocidade decarregamento deseusite<\/a> porque suas imagens n\u00e3o s\u00e3o o melhor formato dispon\u00edvel, nem s\u00e3o otimizadas.<\/p>\n Neste artigo, cobriremos todas as extens\u00f5es de arquivos de imagem mais importantes e quando voc\u00ea deve us\u00e1-los para proporcionar a melhor experi\u00eancia de usu\u00e1rio poss\u00edvel a seus visitantes.<\/p>\n Os tipos e formatos de arquivos de imagem est\u00e3o divididos em duas categorias principais: arquivos de imagem raster e arquivos de imagem vetoriais.<\/p>\n Vamos dar uma olhada mais detalhada em cada categoria.<\/p>\n Os formatos de imagem mais comuns para a web (JPEG, GIF e PNG<\/a>) est\u00e3o todos sob a categoria raster.<\/p>\n Os tipos de arquivos de imagens raster mostram imagens est\u00e1ticas onde cada pixel tem uma cor, posi\u00e7\u00e3o e propor\u00e7\u00e3o definidas com base em sua resolu\u00e7\u00e3o (por exemplo, 1280×720).<\/p>\n Como elas s\u00e3o est\u00e1ticas, n\u00e3o \u00e9 poss\u00edvel redimensionar as imagens com efici\u00eancia, o design original e os pixels ser\u00e3o simplesmente esticados para preencher o espa\u00e7o extra. Isto acaba criando uma imagem desfocada, pixelada ou distorcida de alguma forma.<\/p>\n A grande maioria das fotografias ou imagens que voc\u00ea v\u00ea na Internet utiliza um formato de imagem rasterizada.<\/p>\n SVG<\/a>, EPS, AI, e PDF<\/a> s\u00e3o exemplos de tipos de arquivos de imagem vetoriais.<\/p>\n Ao contr\u00e1rio dos formatos de arquivos de imagem raster est\u00e1ticos, onde cada forma e cor de desenho \u00e9 ligada a um pixel, estes formatos s\u00e3o mais flex\u00edveis.<\/p>\n Os gr\u00e1ficos vetoriais, em vez disso, utilizam um sistema de linhas e curvas em um plano cartesiano, escalonadas em compara\u00e7\u00e3o com a \u00e1rea total, e n\u00e3o um \u00fanico pixel.<\/p>\n Isto significa que voc\u00ea pode ampliar infinitamente a resolu\u00e7\u00e3o da imagem original sem qualquer perda de qualidade ou distor\u00e7\u00e3o.<\/p>\n Como voc\u00ea pode ver, a diferen\u00e7a entre a qualidade quando ampliada 7x \u00e9 completamente incompar\u00e1vel.<\/p>\n Como o SVG calcula as posi\u00e7\u00f5es com base em uma porcentagem da \u00e1rea total, e n\u00e3o em pixels, n\u00e3o h\u00e1 pixela\u00e7\u00e3o alguma.<\/p>\n\n Abaixo, cobrimos todos os principais formatos de arquivos gr\u00e1ficos, desde imagens da web raster, a vetores, at\u00e9 arquivos de software de edi\u00e7\u00e3o de imagens.<\/p>\n Fazemos um mergulho profundo e cobrimos os pr\u00f3s e os contras, navegador e suporte de SO, e casos ideais de uso para cada formato.<\/p>\n JPEG (ou JPG)<\/a> \u00e9 um formato de arquivo de imagem raster com compress\u00e3ocom perdas<\/a> que o torna adequado para compartilhar imagens. JPEGs s\u00e3o “com perdas”, o que significa que reduzem o tamanho do arquivo, mas tamb\u00e9m a qualidade das imagens quando se usa o formato.<\/p>\n O JPEG ainda \u00e9 um dos tipos de arquivo de imagem mais usados que voc\u00ea ver\u00e1 na Internet por causa de sua compress\u00e3o e suporte virtualmente universal ao navegador\/OS.<\/p>\n A maioria das plataformas dem\u00eddiasocial<\/a> (como Facebook e Instagram) transforma automaticamente os arquivos de imagem carregados em JPEGs. Eles tamb\u00e9m usam tamanhos \u00fanicos deimagens de m\u00eddiasocial<\/a> para controlar a resolu\u00e7\u00e3o de suas fotos.<\/p>\n PNG \u00e9 um formato gr\u00e1fico raster que suporta compress\u00e3o sem perdas, mantendo detalhes e contraste entre as cores.<\/p>\n Em particular, PNG oferece uma legibilidade de texto muito melhor do que JPEG.<\/p>\n Isto faz de PNG uma escolha mais popular para infogr\u00e1ficos, banners<\/a>, capturas de tela e outros gr\u00e1ficos que incluem tanto imagens quanto texto.<\/p>\n O GIF \u00e9 outro tipo de arquivo de imagem que se enquadra no formato raster. Ele usa compress\u00e3o sem perdas, mas “restringe” a imagem a 8 bits por pixel e uma paleta limitada de 256 cores.<\/p>\n O formato GIF<\/a> \u00e9 mais famoso (e mais utilizado) para imagens animadas porque sua limita\u00e7\u00e3o de 8 bits mant\u00e9m os tamanhos dos arquivos de anima\u00e7\u00f5es pequenos e amig\u00e1veis \u00e0 internet.<\/p>\n WebP \u00e9 um formato de imagem desenvolvido especificamente para proporcionar uma melhor compress\u00e3o de imagens sem perdas e com perdas.<\/p>\n A mudan\u00e7a de JPEG e PNG para WebP pode ajudar a economizar espa\u00e7oem disco doservidor<\/a> e largura de banda significativa, com arquivos de imagem at\u00e9 35% menores para qualidade id\u00eantica.<\/p>\n Vantagens e Desvantagens<\/span><\/p>\n Um formato que n\u00e3o deve faltar neste guia de tipos de arquivos de imagem, temos o TIFF.<\/p>\n TIFF, que \u00e9 a abrevia\u00e7\u00e3o de Tagged Image File Format, \u00e9 um formato de imagem raster mais comumente usado para armazenar e editar imagens que ser\u00e3o posteriormente utilizadas para impress\u00e3o.<\/p>\n Embora suporte compress\u00e3o com perdas, ele \u00e9 tipicamente usado como um formato de imagem sem perdas. Al\u00e9m disso, a maioria dos aplicativos gr\u00e1ficos profissionais que suportam TIFF (Photoshop, Illustrator, etc.) n\u00e3o usam compress\u00e3o. Assim, \u00e9 comum que as imagens TIFF sejam grandes em tamanho de arquivo.<\/p>\n Bitmap (BMP) \u00e9 um formato de arquivo de imagem em sua maioria ultrapassado que mapeia pixels individuais com pouca ou nenhuma compress\u00e3o. Isso significa que os arquivos BMP podem facilmente se tornar extremamente grandes e s\u00e3o impratic\u00e1veis de armazenar ou manusear.<\/p>\n HEIF, abrevia\u00e7\u00e3o para High Efficiency Image File Format, \u00e9 um formato de imagem desenvolvido pela equipe por tr\u00e1s do formato dev\u00eddeo MPEG<\/a> para ser um concorrente direto do JPEG.<\/p>\n Em teoria, a compress\u00e3o \u00e9 quase duas vezes mais eficiente que o JPEG, levando a imagens de at\u00e9 o dobro da qualidade com tamanhos de arquivo id\u00eanticos.<\/p>\n \u00c9 um formato de imagem raster, baseado no mapeamento de pixels, o que significa que voc\u00ea n\u00e3o pode aumentar a escala das imagens sem perder qualidade.<\/p>\n O formato de arquivo Scalable Vector Graphics, geralmente referido como SVG, foi desenvolvido pelo W3C como uma linguagem de marca\u00e7\u00e3o para renderizar imagens bidimensionais diretamente dentro do navegador.<\/p>\n N\u00e3o depende de pixels como um formato raster, mas usa texto XML para delinear formas e linhas de forma similar a como as equa\u00e7\u00f5es matem\u00e1ticas criam gr\u00e1ficos.<\/p>\n Isto significa que voc\u00ea pode aumentar infinitamente as imagens SVG sem perda de qualidade.<\/p>\n Em ess\u00eancia, um arquivo EPS (Encapsulated PostScript) \u00e9 um arquivo de imagem vetorial utilizado para armazenar ilustra\u00e7\u00f5es no Adobe Illustrator e outros softwares de ilustra\u00e7\u00e3o como o CorelDraw.<\/p>\n Como os arquivos SVG, o EPS \u00e9 na verdade um documento baseado em texto que esbo\u00e7a formas e linhas com c\u00f3digo, em vez de mapear pixels e cores. Como resultado, os arquivos EPS tamb\u00e9m suportam escalas sem perdas.<\/p>\n Vantagens e Desvantagens<\/span><\/p>\n Voc\u00ea provavelmente associa o PDF ao armazenamento, salvamento e leitura de documentos em sua maioria baseados em texto. Isso \u00e9 perfeitamente compreens\u00edvel – afinal de contas, o documento est\u00e1 bem ali no nome.<\/p>\n Mas os arquivos PDF s\u00e3o na verdade baseados na mesma linguagem PostScript que alimenta os arquivos de imagem vetoriais EPS e podem ser usados para salvar imagens e ilustra\u00e7\u00f5es tamb\u00e9m.<\/p>\n \u00c9 o formato de imagem de escolha para armazenar ilustra\u00e7\u00f5es, capas de revistas e muito mais para impress\u00e3o posterior. \u00c9 tamb\u00e9m a escolha preferida para nossos ebooks Kinsta<\/a>.<\/p>\n Como o nome sugere, o formato de arquivo PSD \u00e9 um formato de imagem utilizado para salvar documentos de imagem e trabalha em andamento com o Adobe Photoshop.<\/p>\n N\u00e3o \u00e9 um formato de imagem seguro para a web<\/strong>, portanto n\u00e3o \u00e9 suportado por nenhum navegador ou visualizadores ou editores de imagem padr\u00e3o.<\/p>\n AI \u00e9 outro formato de imagem desenvolvido especificamente pela Adobe para n\u00e3o apenas salvar a imagem, mas tamb\u00e9m o estado do projeto.<\/p>\n Como o PSD, ele n\u00e3o \u00e9 destinado para uso na web <\/strong>e n\u00e3o \u00e9 suportado por nenhum navegador, nem pela maioria dos visualizadores de imagens padr\u00e3o.<\/p>\n Ao contr\u00e1rio dos arquivos PSD, voc\u00ea pode escalar livremente os arquivos AI sem qualquer perda na qualidade.<\/p>\n XCF, que significa eXperimental Computing Facility, \u00e9 um tipo de arquivo de imagem nativo do editor de imagens de c\u00f3digo aberto GIMP<\/a>. \u00c9 o equivalente dos arquivos PSD e salva caminhos, transpar\u00eancia, filtros e muito mais.<\/p>\n Mais uma vez, este \u00e9 um tipo de arquivo nativo para armazenar projetos e n\u00e3o \u00e9 suportado por nenhum navegador <\/strong>ou visualizador de imagens padr\u00e3o.<\/p>\n O INDD \u00e9 um tipo de arquivo nativo para usu\u00e1rios do Adobe InDesign onde voc\u00ea pode salvar arquivos de projeto incluindo conte\u00fado de p\u00e1gina, estilos, amostras e muito mais.<\/p>\n Embora \u00e0s vezes referido como um formato de arquivo de imagem, ele tende a se ligar a elementos visuais al\u00e9m do texto.<\/p>\n N\u00e3o \u00e9 suportado por nenhum navegador ou visualizador de imagens padr\u00e3o, uma vez que n\u00e3o \u00e9 um formato seguro para a web<\/strong>.<\/p>\n Os formatos de imagem bruta s\u00e3o os tipos de arquivo que uma c\u00e2mera digital utiliza para armazenar imagens de qualidade total para posterior p\u00f3s-produ\u00e7\u00e3o e edi\u00e7\u00e3o.<\/p>\n Principais tipos de arquivos de imagem bruta por fabricante de c\u00e2mera:<\/p>\n Ao inv\u00e9s dos 256 tons por canal de cor (8 bit) dispon\u00edveis em um arquivo JPEG, os arquivos RAW oferecem at\u00e9 16.384 tons por canal de cor (14 bit) em uma \u00fanica imagem. Isso lhe d\u00e1 mais flexibilidade no ajuste de cores e contraste no p\u00f3s-processamento.<\/p>\n Imagens brutas n\u00e3o s\u00e3o destinadas \u00e0 web <\/strong>ou compartilhamento e n\u00e3o s\u00e3o suportadas por nenhum navegador ou visualizador de imagens de grande porte.<\/p>\n Com base em dados relacionados ao uso da web, os tr\u00eas tipos mais comuns de arquivos de imagem s\u00e3o PNG, JPEG e SVG.<\/p>\n Examinemos a seguir o que os torna t\u00e3o difundidos.<\/p>\n Como o PNG como formato se presta melhor ao texto dentro da imagem, ele \u00e9 mais freq\u00fcentemente usado para capturas de tela, banners (dependendo do tamanho do an\u00fancio<\/a>), e muito mais.<\/p>\n Como utiliza compress\u00e3o sem perdas, tamb\u00e9m \u00e9 utilizada por designers e fot\u00f3grafos para exibir fotos de alta qualidade em seus websites deportf\u00f3lio<\/a>, por exemplo.<\/p>\n 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\u00e3o presentes em 77% dos websites.<\/p>\n A compress\u00e3o com perdas significa que o JPEG \u00e9 uma op\u00e7\u00e3o melhor a ser usada para mostrar as imagens em todo o seu conte\u00fado. A perda de qualidade \u00e9 pouco vis\u00edvel para o usu\u00e1rio m\u00e9dio da Internet, e voc\u00ea pode economizar consider\u00e1vel espa\u00e7o em disco e largura de banda.<\/p>\n \u00c9 por isso que \u00e9 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.<\/p>\n Como um lembrete: N\u00e3o h\u00e1 diferen\u00e7a entre JPG vs JPEG<\/a>, eles s\u00e3o duas siglas diferentes e extens\u00f5es de arquivo para o mesmo formato.<\/p>\n Os arquivos SVG s\u00e3o arquivos vetoriais escal\u00e1veis que s\u00e3o perfeitos para \u00edcones, logotipos, gr\u00e1ficos e ilustra\u00e7\u00f5es simples. A imagem pode at\u00e9 mesmo ser inserida diretamente na p\u00e1gina como c\u00f3digo CSS<\/a>.<\/p>\n \u00c9 por isso que os SVGs v\u00eam em terceiro lugar, usados por 27% dos websites.<\/p>\n Embora raramente o formato de escolha para as imagens est\u00e1ticas, o GIF tem feito um retorno como a escolha n\u00famero 1 para o compartilhamento de anima\u00e7\u00f5es.<\/p>\n Como resultado, cerca de 22% dos websites utilizam GIFs em suas p\u00e1ginas, embora provavelmente tamb\u00e9m utilizem PNGs e JPEGs como seus formatos padr\u00e3o.<\/p>\n Os formatos de imagem bruta s\u00e3o da mais alta qualidade, mas t\u00eam tamanhos de arquivo excessivamente grandes, de at\u00e9 centenas de megabytes.<\/p>\n Para imagens da web, o formato de arquivo WebP oferece tamanhos de arquivo 25-35% menores<\/a> que o JPEG para as mesmas fotos de qualidade, o que significa que voc\u00ea pode carregar imagens de maior qualidade para o mesmo espa\u00e7o em disco e acelerar seu site<\/a>.<\/p>\n O HEIF \u00e9 outra alternativa JPEG com compress\u00e3o mais eficiente, mas atualmente n\u00e3o \u00e9 suportado por nenhum dos principais navegadores.<\/p>\n Os arquivos PNG oferecem compress\u00e3o sem perdas, mas isso significa que os tamanhos dos arquivos ser\u00e3o extremamente grandes e lentos de carregar. Um \u00fanico arquivo PNG pode muitas vezes ser centenas de KB ou at\u00e9 mesmo 1MB+. Entretanto, se voc\u00ea aproveitar algumas t\u00e1ticas como carrega mento pregui\u00e7oso (dispon\u00edvel no n\u00facleo desde o WordPress 5.5)<\/a> e um CDN<\/a>, voc\u00ea ainda poder\u00e1 ter um site r\u00e1pido.<\/p>\n Os tipos de arquivos de imagem mais comuns para a web que suportam transpar\u00eancia s\u00e3o PNG, WebP, GIF e at\u00e9 mesmo SVG.<\/p>\n A maioria dos tipos de arquivos de imagem de projetos nativos como PSD, XCF e AI tamb\u00e9m ap\u00f3iam a transpar\u00eancia.<\/p>\n Por outro lado, o popular formato de imagem JPEG n\u00e3o suporta <\/strong>transpar\u00eancia.<\/p>\n A principal diferen\u00e7a entre PNG e JPEG \u00e9 que o PNG \u00e9 um formato de imagem sem perdas, enquanto o JPEG \u00e9 um formato com perdas. Isto significa basicamente que PNG usa t\u00e9cnicas de compress\u00e3o sem sacrificar a qualidade original ou detalhes da imagem.<\/p>\n Para textos em imagens, capturas de tela de tutorial e quando voc\u00ea quer que sinais ou outros elementos finos sejam 100% vis\u00edveis em uma foto, PNG \u00e9 o formato certo.<\/p>\n Como voc\u00ea pode ver nesta foto engra\u00e7ada acima, PNG, que \u00e9 representada \u00e0 esquerda, \u00e9 muito melhor em exibir claramente texto e formas simples quando comparado ao JPEG, o da direita.<\/p>\n Isso significa que JPEG \u00e9 um tipo de arquivo de imagem ruim? De jeito nenhum!<\/p>\nQuais s\u00e3o os diferentes tipos de arquivos de imagem?<\/h2>\n
Formatos de Arquivo de Imagem Raster<\/h3>\n
![\"Imagem](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/raster-image-jpg.jpg\")
Formatos de arquivo de imagem vetorial<\/h3>\n
![\"Amplia\u00e7\u00e3o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/vector-image.jpg\")
15 Tipos de arquivos de imagem mais populares<\/h2>\n
1.JPEG (E JPG) – Joint Photographic Experts Group<\/h3>\n
![\"Formato](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/tiger-jpg.jpg\")
Vantagens e Desvantagens<\/h4>\n
\n
Navegador e suporte de SO<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
2. PNG \u2014 Portable Network Graphics<\/h3>\n
![\"Kinsta's](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/kinsta-resource-center-png-image.png\")
Vantagens e Desvantagens<\/h4>\n
\n
Navegador e suporte de SO<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
3. GIF – Graphics Interchange Format<\/h3>\n
![\"Exemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/turtle-dancing-gif.gif\")
Vantagens e Desvantagens<\/h4>\n
\n
Navegador e suporte de SO<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
4. WebP<\/h3>\n
![\"Exemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/webp-image-compression.jpg\")
\n
Navegador e suporte de SO<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
5. TIFF<\/h3>\n
![\"\u00cdcone](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/tiff-icon.jpg\"){kind=icon}
Vantagens e Desvantagens<\/h4>\n
\n
Navegadores e suporte de SO<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
6. BMP \u2014 Bitmap<\/h3>\n
![\"Bitmap](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/bmp-vs-gif.png\")
Vantagens e Desvantagens<\/h4>\n
\n
Navegadores e suporte de SO<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
7. HEIF – Formato de Arquivo de Imagens de Alta Efici\u00eancia<\/h3>\n
![\"Formato](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/jpeg-vs-heif.jpg\")
Vantagens e Desvantagens<\/h4>\n
\n
Navegadores e suporte de SO<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
8. SVG – Scalable Vector Graphics<\/h3>\n
![\"Logo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/1200px-SVG_logo.svg.png\"){kind=logo}
Vantagens e Desvantagens<\/h4>\n
\n
Navegadores e suporte de SO<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
9. EPS – Earnings Per Share<\/h3>\n
![\"\u00cdcone](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/pasted-image-0-3.png\")
\n
Navegadores e suporte de SO<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
10. PDF – Portable Document Format<\/h3>\n
![\"Exemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-pdf.png\")
Vantagens e Desvantagens<\/h4>\n
\n
Navegadores e suporte de SO<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
11. PSD – Documento Photoshop<\/h3>\n
![\"Logotipo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/psd-logo.png\"){kind=logo}
Vantagens e Desvantagens<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
12. AI – Adobe Illustrator Artwork<\/h3>\n
![\"\u00cdcone](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-illustrator-file-icon.png\"){kind=icon}
Vantagens e Desvantagens<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
13. XCF – eXperimental Computing Facility<\/h3>\n
![\"\u00cdcone](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/xcf-icon.png\"){kind=icon}
Vantagens e Desvantagens<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
14. INDD – Documento Adobe InDesign<\/h3>\n
![\"\u00cdcone](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-indesign-icon.png\"){kind=icon}
Vantagens e Desvantagens<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
15. Tipos de arquivo de imagem bruta<\/h3>\n
\n
Vantagens e Desvantagens<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
Tipos de arquivo de imagem FAQs<\/h2>\n
Quais s\u00e3o os 3 tipos de arquivos comuns de um arquivo de imagem?<\/h3>\n
![\"Estat\u00edsticas](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/09\/image-file-types-stats.png\")
1. PNG: Capturas de tela, Banners, Infografias, Fotos<\/h4>\n
2. JPEG: Fotos<\/h4>\n
3. SVG: Logotipos, \u00cdcones e Ilustra\u00e7\u00f5es<\/h4>\n
Men\u00e7\u00e3o honrosa: Imagens animadas de GIF<\/h4>\n
![\"Exemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/comeback-gif.gif\")
Qual \u00e9 o formato de imagem de mais alta qualidade?<\/h3>\n
Quais formatos de arquivo suportam a transpar\u00eancia?<\/h3>\n
PNG \u00e9 melhor que o JPEG?<\/h3>\n
![\"PNG](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/09\/png-vs-jpeg.png\")