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) 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. Descrição: 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). imagens simples, como gráficos ou logotipos, que exigem transparência simples. Mais adequado para: 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. Desempenho: 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. 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. Qualidade: todas as versões do Chrome, Edge, Firefox, Internet Explorer, Opera e Safari. Compatibilidade do navegador: PNG (Gráficos de Rede Portáteis) 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. Descrição: 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. Gráficos, ilustrações, banners e logotipos. Mais adequado para: 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. Desempenho: 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. Qualidade: todas as versões do Chrome, Edge, Firefox, Internet Explorer, Opera e Safari. Compatibilidade do navegador: TIFF (formato de arquivo de imagem marcado) 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. Descrição: gráficos de alta resolução e arte gráfica onde o tamanho do arquivo não é um problema. Mais adequado para: 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. Desempenho: 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. Qualidade: nenhum navegador atualmente oferece suporte a TIFF; é usado apenas como um formato de download. Compatibilidade do navegador: JPG/JPEG (Grupo Conjunto de Especialistas em Fotografia) 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. Descrição: um recurso valioso do formato JPG é o . 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. Recurso exclusivo: modo progressivo 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 , é 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 de linha de base modo progressivo No , 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. modo progressivo 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. imagens estáticas e fotos, capturas de tela. Mais adequado para: Alto desempenho devido ao pequeno tamanho do arquivo; fácil de baixar e carregar. Desempenho: 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. Qualidade: 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. todas as versões do Chrome, Edge, Firefox, Internet Explorer, Opera e Safari. Compatibilidade do navegador: “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 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. Descrição: imagens estáticas e fotos. Mais adequado para: Alto desempenho devido ao seu pequeno tamanho de arquivo; fácil de baixar e carregar. Desempenho: a qualidade é superior à de um arquivo JPEG normal, pois os métodos de compactação são muito mais eficazes. Qualidade: 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. Compatibilidade do navegador: JPEG XR 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. Descrição: 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. 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. Recurso exclusivo: Fotos exibidas para usuários do Internet Explorer (versões 9 a 11) e Microsoft Edge (até a versão 18). Mais adequado para: Alto desempenho devido a um algoritmo de compressão mais eficaz. O suporte a blocos permite uma renderização mais rápida no navegador. Desempenho: 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. Qualidade: 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. Compatibilidade do navegador: BMP (Bitmap) O formato de arquivo Bitmap (BMP) é um formato de imagem raster mais popular em sistemas Windows. Descrição: Usado principalmente para capturas de tela em máquinas Windows se a compactação não for possível por algum motivo. Mais adequado para: 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. Desempenho: as imagens de bitmap oferecem qualidade sem perdas e com pixels perfeitos (assim como os PNGs). Qualidade: todas as versões do Chrome, Edge, Firefox, Internet Explorer, Opera e Safari. Compatibilidade do navegador: SVG (gráficos vetoriais escalonáveis) Um arquivo Scalable Vector Graphics (SVG) é um formato de imagem vetorial baseado em XML comumente usado na web. Descrição: 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. Gráficos que exigem qualidade consistente quando dimensionados, como ícones, banners e gráficos. Mais adequado para: 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. Desempenho: 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. Qualidade: 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). Compatibilidade do navegador: HEIC / HEIF (formato de arquivo de imagem de alta eficiência) 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. Descrição: 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. Fotografia, imagens animadas. Mais adequado para: 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. Desempenho: Muito alta—As imagens HEIC podem armazenar mais de duas vezes os detalhes de uma imagem JPEG. Qualidade: nenhum navegador moderno oferece suporte para o formato HEIC. Compatibilidade do navegador: “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) 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. Descrição: 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. Fotografias, banners e imagens animadas. Mais adequado para: Bom ao usar compactação. Desempenho: geralmente boa, especialmente ao usar compactação sem perdas. Qualidade: 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. Compatibilidade do navegador: “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 . 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. Salvar imagem como PNG AVIF (formato de arquivo de imagem AV1) O formato AVIF é o formato de imagem baseado no formato de codificação de vídeo AV1. O AV1 foi criado e é desenvolvido pela , um consórcio formado pela Mozilla, Google, Cisco, Netflix, Amazon e outras empresas. Descrição: Alliance for Open Media 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 para imagens em seus aplicativos devido à qualidade superior que esse formato oferece, mantendo o tamanho da imagem baixo. acredita que o AVIF tem potencial Imagens que contêm detalhes específicos que precisam ser preservados, por exemplo, gradientes, texto e gráficos em pôsteres de filmes. Mais adequado para: Ótimo ao usar compressão. Desempenho: Ótima ao usar compressão. Qualidade: 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. Compatibilidade do navegador: 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. 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. Fotografias: 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. 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. Desenhos e desenhos animados: Nossa recomendação para elementos de design gráfico é dupla: Elementos de design gráfico: 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. Recomendamos o formato SVG para ícones. O formato produz arquivos pequenos e permite dimensionar sua imagem sem perder a qualidade. Ícones: É 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. 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. Logotipos de sites: 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. Imagens animadas: Use a tag , defina as opções de reprodução automática e loop e defina o atributo 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). muted Quais formatos de imagem podem ser servidos com o imgix? Os tipos de arquivo podem interagir com o imgix como ou . formatos de entrada formatos de saída Um é um arquivo que será aceito pelos parâmetros do imgix. Você pode transformar imagens aceitas com um usando a API do imgix ( , por exemplo). formato de entrada formato de entrada w=600 Um é 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. formato de saída Qualquer formato de entrada não compatível será exibido . sem nenhuma transformação Tipo de arquivo Suportado como formato de entrada Suportado como formato de saída usando FM IA x APNG* x AVIF x BMP x EPS* GIF x x HEIC X* ICO x ICNS x JPEG x x JPEG2000 x x JPEG XL JPEG XR x JSON x PCT x PDF x PJPEG x x PNG x x PNG8 x x PNG32 x x PSD x SVG X* TIFF x WEBP X* x AVI x H.264 x HLS x MOV x MPEG-4 x MP4 x x WMV x WEBM x X* * Veja abaixo as notas específicas do arquivo 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 tiver sido criada a partir de um dispositivo iOS imagem original SVGs Os SVGs podem ser ativados como um parâmetro de entrada entrando em contato com . 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. support@imgix.com 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 , 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. a proporção de pixels do dispositivo (DPR) 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 para o elemento é uma maneira conveniente de exibir diferentes tamanhos de imagem com base no tamanho da tela. para obter mais detalhes sobre por que é útil e como funciona. srcset Confira o guia Imagens responsivas com srcset 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