Compreendendo os tipos de imagem: um guia do desenvolvedor

Sabemos que pode ser um desafio acompanhar todos os tipos de arquivo de imagem em uso atualmente. Para simplificar a situação, compilamos um guia que cobre cada formato de imagem popular em detalhes. Nós nos concentramos especificamente nos tipos de imagens que um desenvolvedor da Web usaria - existem muitos outros formatos de arquivo, mas esses são os mais populares na Web.

Para se aprofundar no AVIF, o formato de imagem de última geração mais popular, confira este artigo .

No final deste artigo, você saberá quando e como usar todos os formatos de arquivo de imagem que discutimos e poderá ter certeza de escolher o caminho certo. Você aprenderá como maximizar a qualidade da imagem enquanto mantém o tamanho do arquivo baixo, aumentando assim o desempenho de seus sites e aplicativos.

Para saber como otimizar imagens automaticamente e converter formatos de imagem em tempo real, visite imgix.com.

Aqui está uma lista dos tipos de arquivo de imagem que abordaremos neste artigo:

• GIF
• PNG
• TIFF
• JPG/JPEG
• JPEG2000
• JPEG XR
• BMP
• SVG
• HEIC/HEIF
• WEBP
• AVIF/AV1

Por que existem tantos formatos de imagem?

A explicação mais simples para a grande variedade de formatos de imagem é que cada um serve a um propósito diferente. Diferentes formatos de imagem também usam diferentes métodos de compactação, um processo que codifica as informações de um arquivo para reduzir seu tamanho total e torná-lo mais rápido para baixar em uma página da web.

Devido às diferenças nos algoritmos de compactação, alguns formatos de imagem resultam em tamanhos de arquivo menores com a mesma qualidade de imagem, mas às custas de recursos como a transparência da imagem.

Alguns formatos têm propriedades que os tornam úteis apenas para imagens de um tipo específico. Por exemplo, o formato SVG é um formato vetorial e um excelente ajuste para ícones, mas não é adequado para fotografias porque elas são armazenadas usando um formato de imagem diferente conhecido como raster.

Falando em formatos de imagem, devemos esclarecer esses e alguns outros termos comuns antes de mergulhar nos tipos de imagem. Vamos discutir brevemente a diferença entre os formatos de imagem raster e vetorial e compactação sem perdas versus com perdas.

Raster vs Vetor

Sob o capô, os formatos vetoriais definem uma imagem como uma série de formas, em vez de armazenar informações sobre a cor de cada pixel em um campo.

Essa propriedade torna as imagens vetoriais como SVG uma excelente opção para ícones, logotipos, gráficos e outros gráficos digitais usando muito pouca largura de banda para cada imagem.

Por outro lado, os formatos raster são compostos de pixels individuais e são amplamente utilizados na web devido a seus algoritmos de compactação eficientes.

Uma das principais diferenças entre os formatos raster e os formatos vetoriais é que os formatos raster não podem ser ampliados de sua resolução original sem parecer pixelados ou borrados.

O gráfico abaixo demonstra como a ampliação de uma imagem leva à pixelização.

Fonte: Wikimedia Commons

Compressão sem perdas vs com perdas

As imagens requerem uma enorme quantidade de dados para serem exibidas. Transferir todos esses dados em sua forma bruta, seja pela Internet ou armazenados em seu disco rígido, é muito ineficiente. Para tornar as imagens mais eficientes, aplicamos “compressão” aos seus dados subjacentes.

A compactação usa abordagens matemáticas e de correspondência de padrões para reduzir os dados necessários para transferir uma imagem.

Se você já usou um acrônimo, como “LOL” para dizer “laugh out loud”, então você executou uma forma muito simples de compressão.

Para que a compactação funcione, tanto o remetente quanto o destinatário precisam saber que a compactação é aplicada e qual algoritmo de compactação é usado.

O remetente deve saber como compactar os dados da imagem e o receptor deve saber como reverter a compactação ou “descompactar” para obter os dados da imagem de volta em seu formato exibível.

Existem muitos métodos diferentes para compactar dados, mas todos eles se enquadram em uma das duas categorias: sem perdas ou com perdas. Algoritmos de compactação considerados “sem perdas” preservam os dados exatamente como estavam antes de serem compactados.

Embora os algoritmos sem perdas sejam eficientes, ainda mais eficiência pode ser obtida se os dados da imagem puderem ser pré-ajustados de maneira a facilitar a compactação.

Por exemplo, se houver um monte de pixels esbranquiçados imperceptíveis em sua imagem, alterá-los para branco perfeito pode tornar a imagem mais fácil de compactar. O usuário final que visualizar a imagem nunca notará a diferença.

No entanto, como os dados mudam, parte do detalhe original é “perdido” para beneficiar a compactação. Isso é chamado de compactação “com perdas”.

Resumindo, a compactação sem perdas significa que o tamanho do arquivo de uma imagem pode ser reduzido sem afetar sua qualidade. Por outro lado, a compactação com perdas elimina certas informações (geralmente redundantes) dentro de um arquivo que não pode ser recuperado.

Agora que abordamos esses termos (que aparecerão à medida que examinarmos cada tipo de imagem), vamos falar mais sobre os tipos de imagem mais comuns usados na Web.

GIF (Graphic Interchange Format)

Descrição: O Graphics Interchange Format (GIF) é um formato de imagem raster criado em 1987 e é o formato de arquivo mais antigo ainda em uso frequente hoje. As imagens GIF usam um algoritmo de compactação conhecido como codificação LZW para permitir armazenamento fácil e maior qualidade de imagem compactada.

Os GIFs são quase sempre construídos de forma a impor um limite de 256 cores nas imagens, embora tecnicamente os GIFs possam suportar mais variações de cores.

Hoje, o GIF é mais famoso como formato de imagens animadas. Uma imagem animada combina várias imagens (ou quadros) em um arquivo e os quadros são reproduzidos sucessivamente. Uma das razões pelas quais os GIFs são populares para animação é que eles se disfarçam de imagens.

Você pode enviar um GIF animado para uma página sem precisar de um reprodutor de vídeo. Embora os GIFs sejam comumente usados para animação, eles não são uma opção ideal devido à qualidade de resolução mais baixa e como os quadros são compactados (o que resulta em tamanhos de arquivo grandes).

Mais adequado para: imagens simples, como gráficos ou logotipos, que exigem transparência simples.

Desempenho: o desempenho depende do número de quadros no GIF. Se houver muitos quadros, o GIF será carregado lentamente em uma página da Web devido ao tamanho maior do arquivo. Ao criar uma imagem GIF, você pode ajustar a resolução de cada quadro e o número de quadros exibidos por segundo.

Naturalmente, quanto maior o valor dos quadros por segundo (FPS) e maior a resolução de cada quadro, maior será o arquivo GIF. Tente usar diferentes valores de FPS e diferentes resoluções para encontrar a combinação ideal para seu caso de uso.

Em geral, os GIFs são muito difíceis de compactar porque cada sequência animada é um conjunto de imagens independentes unidas. Mesmo que algumas partes da imagem sejam iguais entre os quadros de um GIF, é difícil para um algoritmo de compactação identificar essas partes.

Essa limitação é uma das razões pelas quais o tamanho do arquivo de uma imagem GIF geralmente é maior do que a mesma sequência de quadros em um vídeo MP4.

Qualidade: os GIFs usam um algoritmo de compactação sem perdas, mas a qualidade da imagem geralmente diminui devido à pré-filtragem (incluindo pontilhamento, fixação e quantização de cores) relacionada à conversão de imagens coloridas de 24 bits em GIFs paletizados de 8 bits.

Compatibilidade do navegador: todas as versões do Chrome, Edge, Firefox, Internet Explorer, Opera e Safari.

PNG (Gráficos de Rede Portáteis)

Descrição: Portable Network Graphics (PNG) é um formato de arquivo que usa compactação sem perdas. Imagens com transições nítidas e grandes áreas de cor sólida (por exemplo, gráficos ou imagens contendo texto) podem ser melhor comprimidas no formato PNG do que, digamos, no formato JPG.

Como resultado, você frequentemente encontra imagens PNG como capturas de tela e ilustrações.

As imagens PNG se tornaram padrão na web porque oferecem transparência de imagem: você pode colocar uma imagem PNG transparente sobre outra imagem e criar o efeito de profundidade e múltiplas camadas.

PNGs também suportam full alpha, o que significa que a imagem pode ser semitransparente. O efeito de semitransparência permite, por exemplo, ter sombras transparentes em uma imagem PNG.

Mais adequado para: Gráficos, ilustrações, banners e logotipos.

Desempenho: os arquivos PNG tendem a ter tamanhos de arquivo maiores do que JPEGs e SVGs, portanto, eles são menos adequados para a Web se você precisar de uma imagem de alta resolução com um tamanho de arquivo menor.

Qualidade: as imagens PNG usam compactação sem perdas e sua representação com pixels perfeitos é ideal para gráficos de alto contraste. Alguns arquivos PNG contêm até 16 milhões de cores devido à profundidade de cor de 24 bits.

Compatibilidade do navegador: todas as versões do Chrome, Edge, Firefox, Internet Explorer, Opera e Safari.

TIFF (formato de arquivo de imagem marcado)

Descrição: O Tagged Image File Format (TIFF) é um formato de imagem criado inicialmente para armazenar fotos digitalizadas. O formato é mais popular entre fotógrafos, editores de imagem e editores, principalmente por razões históricas.

Mais adequado para: gráficos de alta resolução e arte gráfica onde o tamanho do arquivo não é um problema.

Desempenho: arquivos TIFF podem ser compactados ou descompactados; o formato oferece suporte a várias opções de compactação. As imagens TIFF normalmente não são suportadas em navegadores da Web, portanto, usá-las para exibir imagens na Web não é uma opção.

Qualidade: os arquivos TIFF são de altíssima qualidade; eles geralmente carecem totalmente de compactação ou usam compactação sem perdas, tornando-os ideais para fotografias e imagens digitalizadas.

Compatibilidade do navegador: nenhum navegador atualmente oferece suporte a TIFF; é usado apenas como um formato de download.

JPG/JPEG (Grupo Conjunto de Especialistas em Fotografia)

Descrição: um arquivo Joint Photographic Expert Group (JPEG/JPG) é o formato mais comumente usado para imagens compactadas com perdas. Muitos se perguntam qual é a diferença entre arquivos JPG e JPEG, mas não existe: as duas abreviações são completamente intercambiáveis.

Recurso exclusivo: um recurso valioso do formato JPG é o modo progressivo . A maioria das imagens JPG é criada no modo de linha de base. Para entender a diferença entre os dois modos, imagine ler uma página de texto linha por linha. Você começa no topo e prossegue linha por linha em direção ao fundo.

Se você levar um minuto para ler a página, levará 30 segundos para ler metade da página.

Modo de linha de base

Com uma imagem JPG no modo de linha de base , é assim que você carregaria o arquivo JPG na web — uma linha de pixels após a outra, de cima para baixo. Se a sua imagem carregar lentamente devido a um tamanho de arquivo grande ou uma conexão lenta, os visitantes do seu site verão apenas uma parte da imagem até que ela carregue completamente.

modo progressivo

No modo progressivo , no entanto, você começa carregando uma versão de baixa resolução de sua imagem e depois carrega uma versão de resolução mais alta.

Os visitantes do seu site verão uma imagem completa imediatamente, mesmo que seja de qualidade inferior e, à medida que a imagem for carregada, sua qualidade na página melhorará.

As imagens JPG progressivas são uma ótima opção para sites rápidos, pois minimizam o tempo inicial de pintura da página.

Mais adequado para: imagens estáticas e fotos, capturas de tela.

Desempenho: Alto desempenho devido ao pequeno tamanho do arquivo; fácil de baixar e carregar.

Qualidade: JPEG é um formato com perdas, o que significa que a qualidade é perdida sempre que a imagem é redimensionada. As imagens JPEG tendem a perder um pouco de nitidez, por isso não funcionam bem em gráficos e outros gráficos que exigem um alto nível de nitidez para serem visualizados corretamente.

No entanto, os JPEGs são excelentes quando usados para fotografias e imagens cheias de cores. O JPEG também funciona bem para capturas de tela devido ao tamanho menor do arquivo em comparação com o PNG.

Compatibilidade do navegador: todas as versões do Chrome, Edge, Firefox, Internet Explorer, Opera e Safari.

“Qual é a diferença entre JPEGmini e MozJPEG?” O objetivo do JPEGmini e do MozJPEG é reduzir o tamanho da imagem JPG sem efeitos visíveis para o usuário final.

O JPEGmini usa um algoritmo ajustado à mão que reduz a qualidade da imagem em locais onde um humano provavelmente não notaria. Esse algoritmo exclusivo permite que o programa reduza consideravelmente o tamanho das imagens JPEG, às vezes até 80%.

MozJPEG é um codificador JPG desenvolvido pela Mozilla que usa muitos ajustes automatizados para obter uma grande redução no tamanho do arquivo JPG, mantendo a qualidade da imagem.

JPEG2000

Descrição: Joint Photographic Expert Group 2000 (JPEG2000) é um padrão às vezes usado no lugar do JPEG. JPEG2000 usa um método de codificação sofisticado. Comparado a um arquivo JPEG comum, oferece melhor desempenho de compactação sem perda significativa de qualidade de imagem.

Mais adequado para: imagens estáticas e fotos.

Desempenho: Alto desempenho devido ao seu pequeno tamanho de arquivo; fácil de baixar e carregar.

Qualidade: a qualidade é superior à de um arquivo JPEG normal, pois os métodos de compactação são muito mais eficazes.

Compatibilidade do navegador: o formato não é compatível com versões anteriores e não oferece suporte para os principais navegadores, como Chrome, Firefox, Internet Explorer e Microsoft Edge. O formato é suportado apenas no navegador Safari a partir da versão 5-13.1.

JPEG XR

Descrição: JPEG XR (Extended Range), também conhecido como HD Photo, é um formato de arquivo desenvolvido pela Microsoft. O formato é usado principalmente em sistemas Windows e geralmente não é suportado em outras plataformas.

O JPEG XR, em comparação com o JPEG, adiciona recursos como compactação sem perdas, suporte alfa completo (uma opção para semitransparência) e maior precisão de cores.

Recurso exclusivo: Uma capacidade exclusiva do JPEG XR é o suporte para uma estrutura lado a lado. Uma imagem é dividida em blocos - regiões independentes que podem ser decodificadas separadamente, e cada região pode ser exibida sem a necessidade de decodificar o restante da imagem.

Mais adequado para: Fotos exibidas para usuários do Internet Explorer (versões 9 a 11) e Microsoft Edge (até a versão 18).

Desempenho: Alto desempenho devido a um algoritmo de compressão mais eficaz. O suporte a blocos permite uma renderização mais rápida no navegador.

Qualidade: o JPEG XR pode usar compactação com e sem perdas, portanto, a qualidade de uma imagem varia dependendo da opção de compactação escolhida. Geralmente, o tamanho do arquivo será menor que uma imagem JPG ao usar compactação com perdas e menor que um PNG ao usar compactação sem perdas.

Compatibilidade do navegador: compatível apenas com IE 9-11 e Microsoft Edge até a versão 18. Versões mais recentes do Edge removeram o suporte para imagens JPEG XR.

BMP (Bitmap)

Descrição: O formato de arquivo Bitmap (BMP) é um formato de imagem raster mais popular em sistemas Windows.

Mais adequado para: Usado principalmente para capturas de tela em máquinas Windows se a compactação não for possível por algum motivo.

Desempenho: as imagens de bitmap ocupam uma quantidade substancial de armazenamento, especialmente se contiverem muitas cores. Como resultado, eles podem demorar para carregar quando usados em um site, que é uma das razões pelas quais não recomendamos o uso de arquivos BMP na web.

Qualidade: as imagens de bitmap oferecem qualidade sem perdas e com pixels perfeitos (assim como os PNGs).

Compatibilidade do navegador: todas as versões do Chrome, Edge, Firefox, Internet Explorer, Opera e Safari.

SVG (gráficos vetoriais escalonáveis)

Descrição: Um arquivo Scalable Vector Graphics (SVG) é um formato de imagem vetorial baseado em XML comumente usado na web.

Os formatos vetoriais são muito mais versáteis e fáceis de usar do que suas contrapartes raster como GIF, PNG, JPG e BMP; mais importante, eles escalam suavemente sem qualquer perda de qualidade.

Mais adequado para: Gráficos que exigem qualidade consistente quando dimensionados, como ícones, banners e gráficos.

Desempenho: as imagens SVG influenciam positivamente o desempenho da página da Web, pois tendem a ter tamanhos de arquivo muito menores do que os formatos raster, como PNG, BMP e TIFF.

Qualidade: as imagens SVG mantêm a qualidade, independentemente de como são transformadas, grandes ou pequenas. Essa propriedade é essencial para gráficos, como logotipos de empresas, usados como favicons e como imagens de cabeçalho em um site.

Compatibilidade do navegador: quase todos os navegadores suportam o formato SVG, exceto IE 6-8 (lançado antes de março de 2009) e Android Browser 2.1-2.3 (lançado antes de dezembro de 2010).

HEIC / HEIF (formato de arquivo de imagem de alta eficiência)

Descrição: O formato de arquivo de imagem de alta eficiência (HEIC / HEIF) é um formato de imagem desenvolvido pelo Moving Picture Experts Group. É um formato de imagem bastante novo recentemente introduzido pela Apple como o formato de armazenamento de fotos no iPhone e no iPad.

Uma das razões pelas quais a Apple escolheu esse formato para seus dispositivos móveis é a capacidade de armazenar sequências de imagens (por exemplo, uma Live Photo ou uma sequência de fotos) como um único arquivo.

Em tais situações, os arquivos HEIC armazenam a diferença entre as imagens em vez de armazenar uma imagem completa, resultando em um tamanho de arquivo significativamente menor.

Mais adequado para: Fotografia, imagens animadas.

Desempenho: os arquivos HEIC têm um tamanho de arquivo maior que os arquivos JPEG porque o formato HEIC usa compactação sem perdas. No entanto, as imagens HEIC têm um tamanho de arquivo menor que o PNG, um formato sem perdas comparável.

Qualidade: Muito alta—As imagens HEIC podem armazenar mais de duas vezes os detalhes de uma imagem JPEG.

Compatibilidade do navegador: nenhum navegador moderno oferece suporte para o formato HEIC.

“HEIC é melhor que JPEG?” O HEIC pode armazenar mais do que o dobro dos detalhes de uma imagem JPEG, mantendo o tamanho do arquivo baixo, tornando-os muito mais eficientes e com maior qualidade do que o formato JPEG.

O tamanho de arquivo menor do HEIC é particularmente útil para ajudar a reduzir os custos de armazenamento em nuvem, desde que você possa converter arquivos HEIC para outros formatos ao servir na web. Atualmente, o formato HEIC não é amplamente usado na Web devido à falta de suporte do navegador.

No entanto, algumas soluções CDN de imagem converterão automaticamente um arquivo HEIC em um formato compatível com o navegador.

“Como posso converter minhas imagens HEIC para o formato JPEG?” Você pode fazer isso usando uma ferramenta online como HEIC to JPG .

“Preciso de uma licença para usar o HEIC?” Nenhuma licença é necessária para usar o formato HEIC de maneira não comercial.

WEBP (formato de imagem da Web)

Descrição: O Web Picture Format (WebP) é um formato de imagem desenvolvido pelo Google. Ele pode empregar compactação com ou sem perdas, para que você possa escolher entre tamanhos de arquivo menores e maior qualidade.

O WebP visa criar imagens menores e de melhor aparência que geralmente aumentam os tempos de carregamento de uma página da web. O WebP também oferece suporte a animação e looping, semelhantes aos GIFs. O formato está crescendo em popularidade e suporte.

Mais adequado para: Fotografias, banners e imagens animadas.

Desempenho: Bom ao usar compactação.

Qualidade: geralmente boa, especialmente ao usar compactação sem perdas.

Compatibilidade do navegador: a partir de 2018, o WebP obteve amplo suporte em todos os principais navegadores da Web, exceto o IE, e a Apple anunciou o suporte ao WebP nas próximas versões do Safari. Recomendamos usar substitutos JPEG ou PNG ao adicionar imagens WebP ao seu site.

“Como evito que o Google Chrome salve minhas imagens como WebP?” Por padrão, o Google Chrome salva imagens da web no formato WebP. Se você estiver em um Mac, poderá exportar uma imagem WebP para um JPG usando o aplicativo Preview padrão do sistema.

No Windows, você pode baixar uma extensão como Salvar imagem como PNG . Outra opção é usar o imgix para que as imagens do seu site sejam servidas no formato WebP quando seus clientes usam Chrome ou Firefox e no formato PJPG (Progressive JPG) para outros navegadores.

AVIF (formato de arquivo de imagem AV1)

Descrição: O formato AVIF é o formato de imagem baseado no formato de codificação de vídeo AV1. O AV1 foi criado e é desenvolvido pela Alliance for Open Media , um consórcio formado pela Mozilla, Google, Cisco, Netflix, Amazon e outras empresas.

A ideia principal por trás do AVIF é aproveitar os algoritmos de compressão originalmente desenvolvidos para vídeo em formato de imagem.

A Netflix acredita que o AVIF tem potencial para imagens em seus aplicativos devido à qualidade superior que esse formato oferece, mantendo o tamanho da imagem baixo.

Mais adequado para: Imagens que contêm detalhes específicos que precisam ser preservados, por exemplo, gradientes, texto e gráficos em pôsteres de filmes.

Desempenho: Ótimo ao usar compressão.

Qualidade: Ótima ao usar compressão.

Compatibilidade do navegador: O formato AVIF é suportado no Google Chrome a partir da versão 85. O Firefox oferece suporte ao AVIF desde a versão 77, mas a funcionalidade AVIF está desativada por padrão e precisa ser ativada nas configurações. Outros navegadores atualmente não suportam o formato AVIF.

Qual formato de imagem devo escolher?

Nesta seção, fornecemos recomendações para formatos de imagem com base em seu caso de uso específico.

Fotografias: Para fotografias em um site, recomendamos JPG por causa de seu tamanho de arquivo menor. Embora outros formatos ofereçam recursos adicionais, como transparência, eles não são necessários para fotos.

Uma opção ainda melhor é usar um serviço inteligente que converte imagens estáticas no formato ideal, dependendo do navegador que seus usuários estão executando.

Por exemplo, o imgix oferece imagens no formato WebP para quem usa Chrome e Firefox e no formato PJPG para quem usa Internet Explorer, Safari e Microsoft Edge.

Desenhos e desenhos animados: Para desenhos e desenhos, também recomendamos o uso do formato JPG pelos mesmos motivos: as imagens JPG têm tamanhos de arquivo menores e o trabalho artístico geralmente não precisa de transparência.

Elementos de design gráfico: Nossa recomendação para elementos de design gráfico é dupla:

• Use SVG sempre que possível devido ao seu pequeno tamanho de arquivo e fácil redimensionamento sem perda de qualidade.

• Caso contrário, use PNG, pois sua compactação sem perdas funciona bem para imagens com transições nítidas e grandes áreas de cores sólidas.

Ícones: Recomendamos o formato SVG para ícones. O formato produz arquivos pequenos e permite dimensionar sua imagem sem perder a qualidade.

É melhor ter os ícones criados no formato SVG desde o início, pois a conversão de uma imagem PNG ou GIF em um formato vetorial como SVG pode não ser viável após o fato.

Logotipos de sites: Para logotipos de sites, o SVG vence novamente. Este formato ocupa menos largura de banda do que outros formatos e pode ser facilmente redimensionado. Tal como acontece com os ícones, tente criar seu logotipo como um SVG.

Imagens animadas: Nossa recomendação para imagens animadas é o formato MP4. É um formato de vídeo em vez de um formato de imagem e, em comparação com um GIF, uma animação MP4 tem cerca de um décimo do tamanho.

Use a tag <video> , defina as opções de reprodução automática e loop e defina o atributo muted para replicar o comportamento de um GIF com um arquivo MP4. Quando você usa o imgix, convertemos seus arquivos GIF em MP4 automaticamente (nota: o suporte para GIFs animados é um recurso premium do imgix).

Quais formatos de imagem podem ser servidos com o imgix?

Os tipos de arquivo podem interagir com o imgix como formatos de entrada ou formatos de saída .

Um formato de entrada é um arquivo que será aceito pelos parâmetros do imgix. Você pode transformar imagens aceitas com um formato de entrada usando a API do imgix ( w=600 , por exemplo).

Um formato de saída é um tipo de arquivo no qual o imgix pode transformar qualquer formato de entrada. Por exemplo, você pode transformar um jpg em um png usando fm=png.

Qualquer formato de entrada não compatível será exibido sem nenhuma transformação .

* Veja as notas específicas do arquivo abaixo

Servindo ativos não suportados com imgix

Embora o imgix seja otimizado para servir imagens, é possível passar por outros recursos estáticos, como arquivos JavaScript e CSS de sua fonte. Isso lhe dará o benefício de atender a outros ativos por meio de nossa CDN distribuída globalmente.

No entanto, não garantimos o comportamento de tais recursos — os parâmetros de renderização (especialmente os parâmetros padrão) podem afetar a saída e podem gerar acidentalmente um erro de renderização.

Ao servir tipos de arquivo não suportados, é importante não aplicar nenhum parâmetro na URL. Embora geralmente não haja problemas com o uso de parâmetros em tipos de entrada não suportados, existem algumas instâncias raras em que um parâmetro pode causar um comportamento inesperado em determinados tipos de arquivo.

Se você tiver uma origem configurada com parâmetros padrão que estão causando problemas com recursos de entrada não suportados, você pode contornar esse problema:

• Servir esses ativos sem usar imgix ou

• Use uma fonte separada para servir esses ativos

Notas Específicas do Arquivo

APNG

Os PNGs animados serão renderizados como um APNG estático. Para animações, use GIFs animados (recurso premium).

EPS

Suportado apenas como passagem, não como um tipo de entrada.

HEIC

O HEIC só funcionará se a imagem original tiver sido criada a partir de um dispositivo iOS

SVGs

Os SVGs podem ser ativados como um parâmetro de entrada entrando em contato com [email protected] . Se eles ainda não estiverem ativados para sua conta, podemos repassá-los, desde que tenham uma declaração XML correta na parte superior do arquivo.

Observe que há uma vulnerabilidade de segurança para SVGs que permite a execução de javascript embutido ao ser servido por meio de um navegador da web.

Ao habilitar SVGs como um parâmetro de entrada, você pode impedir a execução deste código, permitindo que o imgix rasterize e sirva o arquivo. Você pode fazer isso aplicando qualquer parâmetro padrão em suas configurações de origem, como auto=compress.

Outra maneira de evitar vulnerabilidades relacionadas a SVGs é impedir que SVGs carregados pelo usuário impeçam que SVGs não autorizados sejam servidos a partir de sua fonte.

Não é recomendado usar a codificação Base64 em seus arquivos SVG. O bloco Base64 não será processado por nossa pilha de renderização e não será exibido na renderização de saída.

WEBP

O WebP animado ainda não é suportado como um formato de entrada.

WEBM

A transparência é perdida ao converter um GIF em um WEBM. Como alternativa, você pode converter o GIF em um APNG para oferecer suporte à transparência.

Perguntas Frequentes (FAQ)

“Qual é o tamanho e a resolução corretos para uma imagem em um site?” A resposta depende de quais dispositivos os visitantes do seu site estão usando e de como você usa cada imagem.

Recomendamos o uso de um tamanho de imagem otimizado para o tamanho da tela de cada dispositivo, para que as imagens mantenham alta qualidade e consumam o mínimo de largura de banda possível.

Por exemplo, um iPhone 11 Pro Max tem uma resolução de tela de 1242x2688 pixels. Ao considerar a proporção de pixels do dispositivo (DPR) , você deve considerar uma imagem com 3x o tamanho dessas dimensões se sua imagem ocupar toda a largura do site na janela do navegador.

Tornar a imagem muito grande consumiria largura de banda extra desnecessariamente, enquanto usar um tamanho de arquivo menor pixelizaria a imagem e daria a ela uma qualidade inferior na página. O mesmo princípio se aplica proporcionalmente a imagens únicas ou múltiplas que ocupam menos do que a largura total da janela.

Em um navegador, o atributo srcset para o elemento <img> é uma maneira conveniente de exibir diferentes tamanhos de imagem com base no tamanho da tela. Confira o guia Imagens responsivas com srcset para obter mais detalhes sobre por que é útil e como funciona.

Resumo

Neste artigo, abordamos muitos formatos de imagem convencionais, incluindo seu desempenho e compatibilidade com o navegador. Tenha em mente que não existe um formato certo para cada imagem na web.

Para escolher um formato de imagem ideal, considere como você usará cada imagem, se precisará mostrá-la aos usuários em formatos diferentes e quais navegadores você planeja oferecer suporte. Para converter formatos de imagem automaticamente para desempenho ideal, crie uma conta gratuita no imgix hoje .