Site

BMP, JPG, GIF, PNG, WebP ou SVG: Qual formato de imagem usar

Se em vez de um Web Designer profissional, é você mesmo que cuida do seu website, em algum momento do desenvolvimento esbarrará numa dúvida que parece simples, mas faz toda a diferença: “Qual formato de imagem usar?”.

Mas você conhece todos os formatos Web existentes? Por que há tantos? Faz diferença escolher um ou outro?

Se você não souber responder de imediato, fique tranquilo. É exatamente para isso que este post foi criado. Ao final, você vai se sentir seguro e saberá como escolher o melhor para seu projeto.

Por que existem tantos formatos de imagens?

O acervo de conteúdo que caracteriza a Internet é composto essencialmente de texto, imagens e vídeos. Mas nem sempre foi assim. No princípio, os primeiros sites eram compostos basicamente por texto e alguma cor. Era tudo o que se tinha.

Aos poucos, a evolução permitiu a inclusão das primeiras imagens, porém não existia banda larga, nem 3G, 4G e muito menos o 5G. A velocidade de transmissão dos dados era uma parcela muito pequena das taxas que temos hoje em dia. Uma imagem de poucos kilobytes de tamanho poderia levar vários segundos para ser exibida.

O primeiro formato possível naquela época, era o Bitmap, cujos arquivos usam a extensão .BMP. Esse formato existe até hoje e seu nome representa como uma imagem é composta, ou seja, consiste de um mapa de bits.

Ao se ver uma imagem neste formato, totalmente ampliada, consegue-se compreender o porquê.

Bitmap (BMP) ampliado

Imagine uma imagem pequena, de 8 pixels de largura, por 8 de altura, onde cada um dos 64 pequenos quadrados é um pixel que tem uma propriedade de preenchimento e de cor. Para algo tão pequeno, como um emoji, é suficiente. Agora imagine uma grande imagem ou foto. O tamanho final do arquivo é muito grande, o que na época fazia com que seu carregamento levasse muito tempo.

Mas não era apenas a velocidade de Internet que eram baixa. As mídias de armazenamento (disquetes, hard disks, etc) tinham capacidades igualmente bem inferiores ao que temos hoje. Por essas razões, imaginou-se maneiras de tornar o tamanho dos arquivos BMP, menores e foi quando surgiram os métodos de compressão, resultando em arquivos menores, com alguma perda na qualidade das imagens, porém mais adequados à realidade da época.

O primeiro método de compressão a ganhar popularidade foi o GIF (em 1987), seguido pelo JPG (em 1992), cada qual resolvendo problemas diferentes.

Com o tempo, a disponibilidade de mídias de armazenamento maiores, bem como melhores velocidades de conexão com a Internet, permitiram elevar os padrões mínimos de qualidade das imagens e que somados a outros fatores (resolução de tela, placas de vídeos, etc), ajudou a impulsionar novos formatos, como o PNG e o SVG.

Cada um destes e de outros formatos ainda são usados. Uns mais que outros, sendo que cada qual têm seu uso específico de acordo com a situação. Ao conhecer melhor as características de cada um, você terá melhores condições de escolher qual adotar para ter boas imagens no seu site ou aplicação Web.

Quais os formatos de imagens para a Web?

O primeiro ponto importante, é conhecer os formatos utilizáveis e quais as suas principais características.

A seguir listamos e comentamos cada um.

BMP (Bitmap)

Breve histórico:

O BMP foi criado pela Microsoft e já apareceu nas primeiras versões gráficas do Windows, sendo usado em papéis de parede, ícones, cursores do mouse e outros elementos da interface. Foi um dos primeiros formatos populares, mas por ser um padrão proprietário (não aberto), sua adoção geral foi limitada. Hoje, todos os navegadores o exibem, mas seu uso é raro.

Características principais:

Não sofre compressão, o que significa que cada pixel que compõe a imagem é armazenado individualmente;
Qualidade superior aos formatos JPG e GIF, quando comparado lado a lado;
Tamanho final do arquivo é grande, tornando-o pouco adequado para a Web atual;
Embora seja padrão proprietário (da Microsoft), o BMP nunca foi um formato estritamente "fechado" no sentido de requerer licença comercial para leitura/escrita;
É compatível com todos os principais navegadores Web.
A extensão associada – “.bmp”.

Resumo:

BMP é um formato antigo, sem compressão, que oferece qualidade máxima, mas com arquivos pesados demais para sites. Só vale a pena em casos muito específicos onde a perda de qualidade não é aceitável e o tamanho do arquivo não é problema.

GIF (Graphics Interchange Format)

Histórico:

O GIF foi criado em 1987 pela CompuServe e foi o primeiro formato de imagem baseado em mapa de bits a adotar compressão, resultando em arquivos menores que o BMP. Essa característica permitiu que os primeiros navegadores exibissem imagens, tornando os sites mais visuais e atraentes, sendo essa a principal razão da sua popularização.

Com o tempo, ganhou melhorias, como a versão GIF 89a, que trouxe suporte a transparência e animações, consolidando ainda mais seu uso.

Características principais:

Suporta compressão sem perda (LZW), ou seja, a imagem mantém sua qualidade original mesmo após compactada;
Limitado a 256 cores por imagem (paleta de 8 bits), o que restringe seu uso em fotos com muitas nuances;
Permite transparência, ou seja, um pixel pode ser definido como transparente e assim a cor do fundo da imagem é que será exibida;
Suporta entrelaçamento, que exibe a imagem progressivamente à medida que ela é carregada;
Suporta animações, agrupando múltiplos quadros em um único arquivo, outro recurso que ajudou a impulsionar seu uso;
Compatível com todos os navegadores e dispositivos;
Tamanho final do arquivo pequeno, especialmente para imagens simples;
Extensão associada – “.gif”.

Resumo:

GIF é um formato leve e versátil, ótimo para ícones, logos simples, imagens com poucas cores e, claro, animações curtas. Porém, sua limitação a 256 cores o torna inadequado para fotografias ou imagens que exigem muitos tons e gradientes.

JPG / JPEG (Joint Photographic Experts Group)

Histórico:

O JPG surgiu em 1992, criado pelo grupo Joint Photographic Experts Group, e veio para resolver uma das principais limitações do GIF, a paleta restrita a 256 cores. Diferentemente do GIF, o JPG suporta milhões de cores (24 bits), o que o tornou imediatamente mais adequado para fotografias e imagens com gradientes.

Seu grande diferencial foi oferecer compressão com perda ajustável, permitindo ao usuário escolher entre arquivos menores (com mais perda de qualidade) ou arquivos maiores (com qualidade superior). Essa flexibilidade fez do JPG o formato padrão para fotos em câmeras digitais, smartphones e na Web por muitos anos.

Características principais:

Suporta compressão com perda (lossy), ou seja, parte da informação da imagem é descartada para reduzir o tamanho do arquivo;
Permite ajuste do nível de compressão (qualidade vs tamanho), dando controle do resultado final ao usuário ;
Suporta milhões de cores (24 bits), ideal para fotografias e imagens com muitos detalhes;
Não suporta transparência;
Não suporta animações;
Compatível com todos os navegadores, dispositivos e softwares de edição de imagens;
Tamanho de arquivo relativamente pequeno quando comparado a formatos sem compressão;
Extensões associadas – “.jpg” ou “.jpeg”.

Resumo:

JPG é o formato mais popular para fotografias e imagens com muitas cores. Seu ponto forte é a flexibilidade, pois você pode equilibrar qualidade e tamanho conforme a necessidade. Porém, não serve para imagens que exigem transparência ou animações, e seu uso repetido para salvar a mesma imagem pode acumular perda de qualidade.

PNG (Portable Network Graphics)

Histórico:

O PNG foi criado em 1996 como um substituto livre do GIF, que na época tinha patentes vinculadas ao seu algoritmo de compressão (LZW). Isso significava que programas que manipulavam arquivos GIF precisavam pagar royalties aos detentores das patentes. O PNG surgiu exatamente para oferecer uma alternativa gratuita e sem restrições legais, sendo rapidamente adotado pela comunidade Web e recomendado pelo W3C (o consórcio que define padrões para a Web) para uso em sites e aplicações.

Com o tempo, o PNG evoluiu e incorporou características tanto do GIF quanto do JPG, tornando-se um dos formatos mais versáteis disponíveis.

Características principais:

Oferece compressão sem perda (lossless), preservando toda a qualidade original da imagem;
Permite imagens com milhões de cores (até 48 bits por pixel), ideal para imagens onde é necessária a fidelidade de cores e com muitos detalhes e gradientes;
Suporta transparência com até 256 níveis (canal alfa, que consiste da informação que define o nível de transparência ou opacidade de cada pixel), permitindo suavidade nos contornos e sobreposições;
Não suporta animações (exceto a variação APNG, que não é oficialmente parte do padrão);
Compatível com todos os navegadores modernos;
Oferece taxas de compressão superiores às do GIF e, em alguns casos, melhores que as do JPG;
Livre de patentes e restrições de uso;
Extensão associada – “.png”.

Resumo:

PNG é um formato muito versátil para a Web, pois combina compressão sem perda, suporte a milhões de cores e transparência sofisticada, tudo isso sem restrições legais. É a escolha ideal para uma variedade de usos. A única desvantagem é que arquivos PNG costumam ser mais pesados que JPGs para fotografias, e não suporta animações.

WebP

Histórico:

O WebP (pronuncia-se "weppy") foi desenvolvido pelo Google e anunciado em 2010 como um formato moderno para a Web. Nasceu com o audacioso propósito de oferecer arquivos significativamente menores que os formatos existentes, sem comprometer a qualidade visual. O objetivo era de acelerar o carregamento de páginas, reduzir o consumo de banda e melhorar a experiência do usuário, especialmente em dispositivos móveis com conexões mais lentas.

Com o tempo, o formato evoluiu e passou a reunir as melhores características de seus antecessores, tornando-se uma alternativa viável para substituir JPG, PNG e GIF em muitas situações.

Características principais:

Suporta compressão com perda (lossy) e sem perda (lossless), oferecendo flexibilidade conforme a necessidade, de modo semelhante ao JPG;
Tamanho de arquivo menor que JPG (cerca de 25-35% menor) com qualidade visual equivalente;
Tamanho de arquivo menor que PNG (cerca de 25-35% menor), também com qualidade equivalente;
Suporta transparência (canal alfa), assim como o PNG;
Suporta animações, substituindo o GIF com arquivos muito menores e mais qualidade da imagem;
Suporta milhões de cores (24 bits);
Compatível com a maioria dos navegadores modernos (Chrome, Firefox, Edge, Safari a partir de 2020, Opera);
Compatibilidade limitada em alguns aplicativos e sistemas operacionais (ex: visualizador nativo do Windows, Gimp sem plugins);
Extensão associada – “.webp”.

Resumo:

WebP é o formato mais moderno e eficiente da lista, combinando o melhor do JPG, PNG e GIF em um único arquivo. Resulta em arquivos menores, qualidade superior e suporte a transparência e animações. Embora nem todos os aplicativos, sistemas e navegadores mais antigos o suportam nativamente, estima-se que compatibilidade do WebP em navegadores modernos é superior a 97% globalmente.

SVG (Scalable Vector Graphics)

Histórico:

O SVG é também um formato “recente”, tendo sido desenvolvido pelo W3C e lançado em 2001. Diferentemente de todos os outros formatos apresentados até aqui, o SVG abandona completamente o conceito de mapa de bits (bitmap) para adotar o modelo vetorial.

Em vez de armazenar informações de cada pixel individualmente, o SVG descreve a imagem matematicamente, por meio de vetores, ou seja, pontos, linhas, curvas e formas geométricas com dimensão e ângulo definidos em relação a uma origem. Essa abordagem traz benefícios significativos, especialmente para certos tipos de imagem.

Por ser um formato aberto e livre de patentes, o SVG também é recomendado pelo W3C para uso na Web, assim como o PNG.

Características principais:

Baseado em vetores, não em pixels (bitmap);
Imagens podem ser ampliadas (redimensionadas) infinitamente sem perda de qualidade ou definição;
Tamanho de arquivo extremamente pequeno para imagens simples (ícones, logotipos, ilustrações);
As imagens podem conter transparência;
Suporta animações e interatividade (via CSS e JavaScript);
Permite edição de cada elemento da imagem separadamente (cores, formas, tamanhos);
É basicamente um arquivo de texto (XML), o que permite compressão eficiente (GZIP) e edição manual em código;
Compatível com todos os navegadores modernos, mas com suporte limitado em versões mais antigas;
Suportado por editores populares como GIMP, Adobe Illustrator, Corel Draw, Inkscape e Figma;
Extensão associada – “.svg”

Resumo:

SVG é o formato ideal para elementos gráficos que não são fotografias, como logotipos, ícones, ilustrações, infográficos e qualquer imagem que precise ser redimensionada sem perda de qualidade. Seu tamanho reduzido, transparência, animações e escalabilidade infinita fazem dele ótimo em design para a Web. Porém, não é adequado para fotografias ou imagens complexas com muitos detalhes e gradientes. Nesses casos, os formatos bitmap (JPG, PNG, WebP) ainda são superiores.

AVIF (AV1 Image File Format)

Histórico:

O AVIF é o mais novo formato de imagens, desenvolvido em 2019 pela Alliance for Open Media (grupo que também criou o codec de vídeo AV1). Ele é baseado no codec AV1 e foi projetado para ser o “sucessor” do WebP, oferecendo compressão ainda mais eficiente, mas ainda pouco adotado.

Características principais:

Suporta compressão com e sem perda;
Tamanho de arquivo significativamente menor que JPG, PNG e até WebP (cerca de 50% menor que JPG com qualidade similar);
Suporta milhões de cores (até 10 ou 12 bits por canal);
As imagens podem conter transparência (canal alfa);
Permite criar animações;
Suporta HDR (High Dynamic Range), ideal para imagens com ampla gama de cores e contraste;
Compatível com navegadores modernos (Chrome, Firefox, Edge). Safari passou a suportar o formato AVIF a partir do iOS 16 e macOS Ventura (2022);
Compatibilidade limitada em editores de imagem e sistemas operacionais;
Extensão associada – “.avif”.

Resumo:

AVIF é o formato mais avançado em compressão, superando o WebP em eficiência. Porém, sua adoção ainda é limitada, muitos navegadores e ferramentas não o suportam plenamente. É uma excelente escolha para o futuro, mas hoje ainda exige fallbacks (alternativas) para garantir compatibilidade.

TIFF (Tagged Image File Format)

Histórico:

O TIFF foi criado em 1986 pela Aldus Corporation (hoje parte da Adobe) como um formato para armazenamento de imagens de alta qualidade, especialmente voltado para impressão e fotografia profissional.

Características principais:

Suporta compressão com e sem perda (incluindo LZW);
Imagens podem ter milhões de cores e alta profundidade de bits;
As imagens podem conter transparência e múltiplas camadas (layers);
A principal desvantagem, é que os arquivos são extremamente grandes (muitas vezes maiores que BMP);
Não é compactado para Web, pois o seu uso é voltado para impressão, arquivamento e edição profissional;
Não suporta animações;
A compatibilidade com navegadores é muito limitada (a maioria não exibe TIFF nativamente);
Compatível com editores profissionais (Photoshop, GIMP, Lightroom, etc.);
Extensões associadas – “.tif” ou “.tiff”

Resumo:

TIFF é o formato dos profissionais de impressão e fotografia. Oferece qualidade máxima e flexibilidade, mas seus arquivos são pesadíssimos e praticamente nenhum navegador os exibe. Para a Web, não é recomendado. Em vez disso, use PNG ou WebP para qualidade sem perda.

HEIC / HEIF (High Efficiency Image Format)

Histórico:

O HEIC (variação do HEIF) foi desenvolvido pela MPEG e adotado pela Apple em 2017 como formato padrão para fotos em iPhones e iPads, substituindo o JPG. Ele usa o codec de compressão HEVC (High Efficiency Video Coding) para reduzir drasticamente o tamanho dos arquivos.

Características principais:

Suporta compressão com perda e sem perda;
Tamanho de arquivo cerca de 50% menor que JPG com qualidade equivalente;
Suporta milhões de cores;
As imagens podem conter transparência;
Suporta animações e sequências de imagens;
Suporta profundidade e metadados (como informações de profundidade para efeitos de retrato);
Compatibilidade em dispositivos Apple (macOS, iOS), mas suporte limitado no Windows (exige codecs adicionais) e nos principais navegadores;
Suporte limitado em editores de imagem;
Extensões associadas – “.heic” (para imagens estáticas) ou “.heif” (para sequências)

Resumo:

HEIC é o formato padrão para fotos em iPhones, oferecendo excelente compressão e qualidade. Porém, sua compatibilidade fora do ecossistema Apple ainda é restrita. Para a Web, não é recomendado diretamente. Nesses casos, converta para JPG ou WebP ao publicar.

ICO (Icon Format)

Histórico:

O ICO foi criado pela Microsoft em 1981 para armazenar ícones no Windows, sendo utilizado até hoje em favicons (aqueles ícones pequenos que aparecem na aba do navegador) e outros elementos de interface.

Características principais:

Formato baseado em bitmap (como BMP);
Pode armazenar múltiplos tamanhos e profundidades de cor no mesmo arquivo (ex: 16x16, 32x32, 48x48, 256x256);
Suporta transparência (em versões mais recentes);
Não suporta compressão eficiente;
Não suporta animações;
Compatibilidade limitada, pois é utilizado principalmente para favicons e ícones de aplicativos;
Navegadores modernos exibem ICO quando usado como favicon;
Suporte em ferramentas específicas para ícones, além de editores como GIMP e Photoshop (com plugins);
Extensão associada – “.ico”

Resumo:

ICO é um formato muito específico, usado quase exclusivamente para favicons e ícones de aplicativos Windows. Para a Web, seu uso se restringe a esse contexto e, mesmo assim, muitos sites hoje usam PNG ou SVG para favicons, que são mais flexíveis.

Quando usar cada formato?

Chegamos à parte que muitos aguardavam, afinal na prática, qual formato escolher para cada situação? A boa notícia é que, depois de conhecer as características de cada um, a decisão fica muito mais simples.

Vamos ver exemplos de casos mais comuns em um site e as melhores escolhas para cada um.

Logotipo

Formato recomendado – SVG (principal) e PNG (alternativa).

Por quê?

O logotipo é parte importante da identidade visual da sua marca e precisa estar sempre nítido, seja no cabeçalho do site (pequeno) ou em banners e materiais promocionais (grandes). O SVG é perfeito porque pode ser redimensionado infinitamente sem perda de qualidade, ou seja, o seu logotipo ficará perfeito em qualquer tela, incluindo monitores 4K e retina.

Quando usar PNG em vez de SVG?

Se o seu logotipo tiver efeitos complexos (gradientes, sombras, texturas) que não são facilmente reproduzidos em vetor, ou se você estiver usando um CMS que não aceita SVG nativamente, o PNG é a melhor alternativa. Use sempre com transparência (fundo invisível) para sobrepor o logotipo sobre qualquer fundo do site.

O que evitar?

O JPG (não tem transparência e pode criar bordas indesejadas) e GIF (qualidade baixa e cores limitadas).

Botões

Formato recomendado – SVG e PNG.

Por quê?

Botões são elementos interativos e geralmente precisam de transparência para se integrar ao design do site. O SVG é ideal porque permite criar botões com formas personalizadas, efeitos de hover (mudança de cor ao passar o mouse) e animações leves usando CSS. Além disso, o arquivo é extremamente leve.

Quando usar PNG em vez de SVG?

Se o botão tiver texturas, gradientes complexos ou efeitos fotográficos, o PNG pode ser mais adequado. Também é a escolha certa se você não tem familiaridade com ferramentas vetoriais para criar ou editar SVG.

O que evitar?

JPG (sem transparência, pode ficar com bordas indesejadas), GIF (limitado a 256 cores, qualidade inferior).

Ícones

Formato recomendado – SVG (fortemente recomendado) e PNG.

Por quê?

Ícones são pequenos por natureza, mas precisam ser nítidos em diferentes tamanhos e resoluções. O SVG é a escolha número um porque é leve, escalável, permite mudar cores via CSS (ótimo para temas com diferentes esquemas de cores) e carrega quase instantaneamente.

Quando usar PNG em vez de SVG?

Se você estiver usando um conjunto de ícones em PNG já pronto (como alguns pacotes de ícones disponíveis em bancos) e não tiver acesso aos arquivos vetoriais, ou se o ícone tiver efeitos muito complexos que não valem a pena reproduzir em SVG.

O que evitar?

GIF (tamanho maior que SVG para ícones simples, qualidade inferior), JPG (não tem transparência, fundo branco indesejado).

Site de imagens (bancos de imagens, wallpapers, portfólio de fotógrafo)

Formato recomendado – WebP (principal) e JPG (alternativa universal).

Por quê?

Para sites com muitas fotos, como um portfólio online de fotógrafo, um banco de imagens ou um site de wallpapers, o foco principal é a qualidade visual aliada ao tempo de carregamento. O WebP oferece arquivos cerca de 25-35% menores que o JPG com a mesma qualidade, o que significa mais fotos carregando mais rápido e melhor experiência para o visitante.

Quando usar JPG em vez de WebP?

Se você não tiver certeza sobre a compatibilidade do WebP com os navegadores do seu público (ex: visitantes usando navegadores mais antigos ou Safari em versões anteriores a 2020), o JPG é a alternativa universal. Todos os navegadores, dispositivos e editores suportam JPG.

Importante: Se for um site profissional de fotografia, considere oferecer imagens em alta resolução para download (em JPG de alta qualidade) e usar WebP para a exibição no site.

O que evitar?

PNG (arquivos muito grandes para fotos, sem necessidade), GIF (cores limitadas, qualidade ruim para fotos), BMP (tamanho absurdo, impraticável).

Infográficos

Formato recomendado – SVG (para infográficos simples) e PNG (para infográficos complexos).

Por quê?

Infográficos combinam texto, gráficos, ícones e ilustrações, sendo que muitas vezes com muitos detalhes. O SVG é excelente quando o infográfico é composto por elementos vetoriais (linhas, formas, textos), pois permite zoom sem perda de qualidade e arquivos leves.

Quando usar PNG em vez de SVG?

Se o infográfico contiver muitas imagens, fotos ou texturas complexas (ex: mapas com fotos de satélite, gradientes ricos, efeitos de sombra elaborados), o PNG é mais adequado. Ele preserva toda a qualidade e detalhes da imagem, e a compressão sem perda garante que nada será perdido.

O que evitar?

JPG (compressão com perda pode borrar textos e linhas finas), GIF (cores limitadas, péssimo para infográficos com muitos detalhes), WebP (falta de compatibilidade com ferramentas legadas de edição/leitura fora da Web).

Outras imagens no site (fotos de produtos, ilustrações, banners, posts de blog)

Formato recomendado – WebP (principal) e JPG (alternativa).

Por quê?

Para a maioria das imagens em um site (fotos de produtos, imagens de posts, banners promocionais, ilustrações, etc) o objetivo é equilibrar qualidade visual com carregamento rápido. O WebP entrega exatamente isso, arquivos menores com qualidade equivalente ou superior aos formatos tradicionais.

Quando usar JPG em vez de WebP?

Se você tem um site com muitos visitantes usando navegadores mais antigos, ou se está usando um CMS que não converte automaticamente para WebP, o JPG é a escolha segura e universal.

Quando usar PNG em vez de WebP/JPG?

Se a imagem precisar de transparência (ex: um produto recortado com fundo invisível, uma ilustração com elementos soltos) ou se for uma imagem com áreas de texto ou linhas finas, o PNG é melhor, pois ele preserva a nitidez e suporta transparência.

O que evitar?

GIF (não é para fotos), BMP (tamanho enorme).

Conclusão

A escolha do formato ideal depende do objetivo da imagem no seu site. Para fotos, priorize a leveza do WebP ou JPG. Para elementos com transparência, prefira PNG ou WebP. Logotipos e ícones funcionam melhor em SVG, enquanto os GIFs são ideais para pequenas animações. Variar os formatos na medida certa garante um site visualmente incrível, mais rápido e bem ranqueado no Google.