Formatos de imagem na web: escolha sem drama

O que o material diz sobre formatos de imagem web

O episódio sobre formatos de imagem web abre assim: Eu não me importo, porque é um tópico importante, e servir os melhores assuntos de imagem para seus usuários é uma coisa importante para nós fazermos e fazer certo. E tanto quanto eu sou esquepitico de certos formatos de imagem novos e suportivos de alguns que vocês não necessariamente amam, há uma coisa que eu acho que todos podemos concordar. PNG é incrível, mas um pouco overused, especialmente quando você considera quantas funções ela está faltando, porque é um código bem antigo, não há muitas coisas que você pode fazer com PNG.

Eu estou tão animado para falar sobre as coisas novas que o PNG está fazendo e como o web pode evoluir com imagens agora. Eu não sei sobre vocês, mas eu estou passando muito mais tempo esperando por builds recentemente porque estamos enviando muito mais código. A AI fez isso mais fácil do que jamais para enviar um PR, especialmente com todos esses agentes de fundo mas se você está esperando 5 a 10 minutos para esses builds, não só você está esticado esperando o tempo todo, você também está gastando um monte de dinheiro nesses minutos no GitHub Actions, que parecem baratos até que você esteja enviando o suficiente, a menos que você esteja usando o sponsor de hoje, Blacksmith, esses caras vão fazer seus builds muito mais rápido e mais importante, muito mais barato, então você será menos assustado de ter todos esses PRs voando em, é literalmente uma linha de código de mudança em seu arquivo de YAML do GitHub para sua ação para começar e você vai começar imediatamente a salvar dinheiro e tempo nesses builds até 75% de redução de custos tantas empresas já estão fazendo o movimento como mintlify clerk e mais e há uma razão os próprios builds são muito mais rápidos porque estão usando cpus de gaming como pc de gaming porque as velocidades de core single em si tendem a ser muito melhor eles também estão fazendo um monte de coisas divertidas para cache eles te dão duas vezes quanto mais dados de cache que você tem no github de ações eles te dão 4 vezes mais downloads de cache colocando o armazém ao invés de usar alguns antigos hard drives em um outro rack de server em algum lugar no prédio e mais importante os builds docker são muito mais rápidos porque eles estão cacheando os linhas individuais em drives nvme que é uma loucura 40 vezes a velocidade de melhoria para muitos desses builds eles carregam metade do quanto por minuto eles são duas vezes mais rápidos geralmente o que significa 75% de desconto isso é bem difícil de alcançar além disso você ganha 3 mil minutos por mês gratuito então por que não dar uma olhada Veja-os hoje em soydev.link.

É melhor começar com o background para entender como chegamos aqui e os 20 anos que demoraram para chegarmos aqui. Antes de sabermos disso, tínhamos representação de, em ordem alfabética, Adobe, Apple, BBC, Comcast, NBC Universal, Google, Movie Labs e, claro, W3C, que mantém o spec. Eu talvez leve o tempo para mais tarde, porque eu sou um grande nerd sobre esses tipos de codecs e esses tipos de coisas de encodamento.

Para `formatos-imagem-web-escolha`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Mecanismo e restrição em formatos de imagem web

No miolo do material de formatos de imagem web, o mecanismo fica explícito: Você sabia que a Biblioteca do Congresso dos EUA, a Biblioteca e Arquivos do Canadá e o Arquivo Nacional da Austrália recomendaram PNG? Porque, tanto quanto eu acho que não é o que você deveria servir aos seus usuários, eu realmente não acho que, na maioria do tempo, um usuário no seu site deveria estar recebendo um PNG. O problema com outros formatos que eu apoio e amo, como WebP, AVIF e todas essas outras coisas, é que eles são um pouco perdidos.

Você pode usá-los perdidos em algum número, mas, normalmente, você os usa em 95% a 99%, o que significa que você acaba. Ou se você salvar um AVIF ou um WebP, e depois você o coloca no seu editor de fotos de escolha, faz algumas coisas com ele, e depois exporta novamente como um PNG, coloca isso na web e isso é reencodado para AVIF, a qualidade da fonte fica mais baixa em cada passo da pauta, o que não é muito bom. Produtos como o PicThing são remover de fundo para o tool de criadores de conteúdo que eu construí principalmente para mim e meu time usar.

Esse produto literalmente seria possível sem AVIF e WebP, porque nos permite servir centenas de imagens em quilobites de dados. Em cada uma dessas, mesmo que elas sejam ótimas, se eu entrar na tabela de rede, vamos ver que qualquer uma dessas é muito pequena. É por isso que é importante ter esses outros formatos que você pode usar para essas coisas diferentes, porque diferentes casos de uso exigem diferentes requerimentos.

Para `formatos-imagem-web-escolha`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Decisões práticas ligadas a formatos de imagem web

As decisões práticas que aparecem quando o tema é formatos de imagem web: Eu gosto que temos uma variedade de tipos de imagem, mesmo se as pessoas não gostam que se eles clicar e salvar, não vai ser um tipo de imagem que eles querem usar. Fazer isso certo não é tão difícil quanto as pessoas parecem pensar, mas um melhor PNG significa que todos conseguem fazer progresso, especialmente aqueles que se importam com reencodar e arquivar imagens. Se não, acabamos com o mundo de eu pareço que sei o que é um JPEG, porque você resave, reencode de novo e de novo se você for para casa, você vai acabar em inferno.

Se você não sabe o que é HDR e está em um iPhone ou Mac moderno, eu recomendo que você veja o vídeo de fundação digital mais recente, o vídeo de Death Stranding. Mas se você tem um monitor de alta renda ou um sistema que sabe o que é HDR, a introdução para este vídeo que a Digital Foundry colocou está dentro das melhores demos de HDR que eu já vi na minha vida. Uma combinação do motor de Death Stranding e do trabalho louco que a equipe colocou para fazer isso tão impressionante, como a very gostosa apontada da Digital Foundry das partes mais legais aqui.

Isso significa que as sombras podem ser mais escuras, as luzes podem ser mais escuras, e há uma maior distância de como as coisas podem se ver. Mas também requer um encodamento diferente, porque precisamos de um set de cores maiores e um set de rancor e escuro maiores para que isso funcione. Não mostra os benefícios da brilhanteza e da escuridão, mas um dos maiores problemas com HDR é que quase sempre significa que as brilhantes podem ser muito brilhantes.

Para `formatos-imagem-web-escolha`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Onde o fluxo de formatos de imagem web quebra

Onde o fluxo costuma quebrar, segundo a fonte de formatos de imagem web: Chris Lilley, um dos co-autores originais do png e o diretor técnico atual que contribuiu para o novo trabalho do png, escreveu um excelente artigo explicando como isso funciona. É um valor medido objetivo que descreve a percepção visual humana de algum objeto que está emitindo luz, ou para objetos físicos, é iluminado por alguma luz e refletindo alguma de essa luz para nossa boca. Dois objetos com os mesmos valores de cromaticidade verão a mesma cor, mas um pode ser mais brilhante ou mais escuro do que o outro.

Para reproduzir um cor em um particular tela, precisamos saber as cromatices dos primários verde, verde e azul, e também a cor exata do branco que resulta quando quando esses três estão misturados em proporções iguais. Por exemplo, se um monitor levar entre 0 e 255 e enviar um número no meio, só obtemos 21% da brilhanteza completa, não 50%. Este monitor não pode fazer P3 color gamut porque estou conectado com minha extensão HDMI e o monitor naquele site não é HDR pronto, mas este é um visualizador realmente legal.

Era inicialmente introduzido para vídeo pela União de Telecomunicação, para que eles pudessem broadcastar diferentes televisões, gravar de diferentes maneiras e encodá-las de diferentes maneiras, e dizer, aqui é o padrão de cor que usamos para isso, para que você pudesse mudar isso para o seu lado também. Todas as coisas nisso até agora foram SDR, que é a Randa Dinâmica Normal, para que o branco é apenas o 6F é também a cor mais brilhante que pode ser mostrada, o branco de mídia pode ser visualizado com conforto sobre o whole screen outra coisa é que quando você está usando branco de HDR você tem que ter cuidado com o quanto branco está aparecendo porque é blindante quando você usa o branco de HDR, eu sei que algumas pessoas aparentemente, GIFs do Slack podem ser HDR e as pessoas têm sido muito assustadoras em certos servidores do Slack torturando as pessoas com GIFs do HDR Como eu disse antes, HDR significa que você também pode fazer cores mais brilhantes, como cores mais escuras do que o preto escuro, que frequentemente representa o preto no SDR. Uma vez que você vê HDR de forma correta em um bom OLED, você percebe que o preto é uma cor novamente, porque quase tudo mais é só preto.

Para `formatos-imagem-web-escolha`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Como explicar formatos de imagem web sem hype

Traduzindo o trecho de formatos de imagem web para quem não viu o vídeo: BT2100 é o principal padrão HDR, o que dá uma gameta significativamente mais ampla do que o display P3, mas não significa necessariamente que o conteúdo se aproveite. Você já viu um iPhone quando você está olhando um vídeo, frequentemente no instagram quando eles estavam fazendo hdr agressivamente no início Você pode notar que a brilhanteza do seu celular mudou fundamentalmente quando você abriu um vídeo. A maneira como eles implementaram isso é opcional, então se seu browser ou plataforma de visibilidade não apoia o novo tipo de colar espaço, isso só faz a imagem parecer um pouco desgastada.

Oh, shit, Chris é o pai do SVG, isso é realmente legal, na verdade, bom isso não é a única coisa que é apoiada, embora Finalmente reconheci que o APNG é um padrão oficial. Mas se você quer uma animação sem perda, pequena, encodada, porque você quer que cada frame seja o mais acurado possível, APNG é uma ótima maneira de fazer isso. E ele apoia a transparência gif que apoia a transparência, mas dependendo da versão que você está usando no browser que você está usando, é estranho o quão bem é apoiado, sem dúvida, apg é muito útil, especialmente para coisas de transferência de ativos, como se eu estivesse trabalhando com um animador para fazer como um emote que está animado para meu chat no twitch eles me enviam um apng mesmo se for enorme como 30 40 megabytes por dois segundos isso é realmente bom porque eu posso reencodar isso para qualquer coisa completamente sem perda, o que é legal e eles podem me enviar uma previsão no browser, ou mesmo se demorar um tempo para carregá-la.

Benefícios e negativos a tudo isso, mas o APNG é um formato de transferência, em particular, um formato de arquivo, realmente útil como uma simples encodagem de animação sem percursos. Dito isso, um vídeo sem percursos é algo que você muito, muito raramente precisa, é principalmente uma ferramenta de produção, então eu estou assustado que o APNG se tornando popular pode acabar sendo uma coisa ruim, porque não é o formato que a maioria de nós deveria estar usando. É idiota, mas isso era um benefício do PNG porque o espectro era tão velho que essas coisas não importavam na época, mas agora, finalmente, um PNG pode ter informações sobre o PNG nela.

Para `formatos-imagem-web-escolha`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Checklist observável para formatos de imagem web

Para fechar o ciclo de formatos de imagem web com evidência do próprio material: A próxima vez que você ver um ticker de notícias scrollando Brave Dog Saves Family ou o banner de gravação atualizando enquanto sua equipe pula um jogo de clutch, veja se é em HDR. Esse é o primeiro padrão novo que eu vi que é tão óbvio, imediato, aparente, que tudo deve começar a se adotar e usar, que já está no PNG, no mínimo. Estou muito animado para melhor compressão, porque esse é o meu maior problema com PNG, e é por isso que não recomendo isso para coisas que são para usuários, a menos que você esteja downloadando a imagem.

Eu não me importo, porque é um tópico importante, e servir os melhores assuntos de imagem para seus usuários é uma coisa importante para nós fazermos e fazer certo. E tanto quanto eu sou esquepitico de certos formatos de imagem novos e suportivos de alguns que vocês não necessariamente amam, há uma coisa que eu acho que todos podemos concordar. PNG é incrível, mas um pouco overused, especialmente quando você considera quantas funções ela está faltando, porque é um código bem antigo, não há muitas coisas que você pode fazer com PNG.

Eu estou tão animado para falar sobre as coisas novas que o PNG está fazendo e como o web pode evoluir com imagens agora. Eu não sei sobre vocês, mas eu estou passando muito mais tempo esperando por builds recentemente porque estamos enviando muito mais código. A AI fez isso mais fácil do que jamais para enviar um PR, especialmente com todos esses agentes de fundo mas se você está esperando 5 a 10 minutos para esses builds, não só você está esticado esperando o tempo todo, você também está gastando um monte de dinheiro nesses minutos no GitHub Actions, que parecem baratos até que você esteja enviando o suficiente, a menos que você esteja usando o sponsor de hoje, Blacksmith, esses caras vão fazer seus builds muito mais rápido e mais importante, muito mais barato, então você será menos assustado de ter todos esses PRs voando em, é literalmente uma linha de código de mudança em seu arquivo de YAML do GitHub para sua ação para começar e você vai começar imediatamente a salvar dinheiro e tempo nesses builds até 75% de redução de custos tantas empresas já estão fazendo o movimento como mintlify clerk e mais e há uma razão os próprios builds são muito mais rápidos porque estão usando cpus de gaming como pc de gaming porque as velocidades de core single em si tendem a ser muito melhor eles também estão fazendo um monte de coisas divertidas para cache eles te dão duas vezes quanto mais dados de cache que você tem no github de ações eles te dão 4 vezes mais downloads de cache colocando o armazém ao invés de usar alguns antigos hard drives em um outro rack de server em algum lugar no prédio e mais importante os builds docker são muito mais rápidos porque eles estão cacheando os linhas individuais em drives nvme que é uma loucura 40 vezes a velocidade de melhoria para muitos desses builds eles carregam metade do quanto por minuto eles são duas vezes mais rápidos geralmente o que significa 75% de desconto isso é bem difícil de alcançar além disso você ganha 3 mil minutos por mês gratuito então por que não dar uma olhada Veja-os hoje em soydev.link.

Para `formatos-imagem-web-escolha`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Sinais de progresso em formatos de imagem web

Mais um recorte útil sobre formatos de imagem web antes de virar padrão do time: É melhor começar com o background para entender como chegamos aqui e os 20 anos que demoraram para chegarmos aqui. Antes de sabermos disso, tínhamos representação de, em ordem alfabética, Adobe, Apple, BBC, Comcast, NBC Universal, Google, Movie Labs e, claro, W3C, que mantém o spec. Eu talvez leve o tempo para mais tarde, porque eu sou um grande nerd sobre esses tipos de codecs e esses tipos de coisas de encodamento.

Você sabia que a Biblioteca do Congresso dos EUA, a Biblioteca e Arquivos do Canadá e o Arquivo Nacional da Austrália recomendaram PNG? Porque, tanto quanto eu acho que não é o que você deveria servir aos seus usuários, eu realmente não acho que, na maioria do tempo, um usuário no seu site deveria estar recebendo um PNG. O problema com outros formatos que eu apoio e amo, como WebP, AVIF e todas essas outras coisas, é que eles são um pouco perdidos.

Você pode usá-los perdidos em algum número, mas, normalmente, você os usa em 95% a 99%, o que significa que você acaba. Ou se você salvar um AVIF ou um WebP, e depois você o coloca no seu editor de fotos de escolha, faz algumas coisas com ele, e depois exporta novamente como um PNG, coloca isso na web e isso é reencodado para AVIF, a qualidade da fonte fica mais baixa em cada passo da pauta, o que não é muito bom. Produtos como o PicThing são remover de fundo para o tool de criadores de conteúdo que eu construí principalmente para mim e meu time usar.

Para `formatos-imagem-web-escolha`, preserve só o que muda uma decisão observável esta semana. Se o trecho for opinião, rotule como opinião — não fabrique métrica ausente do áudio.

Recortes adicionais da fonte sobre formatos de imagem web

Estes trechos reforçam o raciocínio de `formatos-imagem-web-escolha` sem resumo genérico:

Eu não me importo, porque é um tópico importante, e servir os melhores assuntos de imagem para seus usuários é uma coisa importante para nós fazermos e fazer certo. E tanto quanto eu sou esquepitico de certos formatos de imagem novos e suportivos de alguns que vocês não necessariamente amam, há uma coisa que eu acho que todos podemos concordar. PNG é incrível, mas um pouco overused, especialmente quando você considera quantas funções ela está faltando, porque é um código bem antigo, não há muitas coisas que você pode fazer com PNG.

Eu estou tão animado para falar sobre as coisas novas que o PNG está fazendo e como o web pode evoluir com imagens agora. Eu não sei sobre vocês, mas eu estou passando muito mais tempo esperando por builds recentemente porque estamos enviando muito mais código. A AI fez isso mais fácil do que jamais para enviar um PR, especialmente com todos esses agentes de fundo mas se você está esperando 5 a 10 minutos para esses builds, não só você está esticado esperando o tempo todo, você também está gastando um monte de dinheiro nesses minutos no GitHub Actions, que parecem baratos até que você esteja enviando o suficiente, a menos que você esteja usando o sponsor de hoje, Blacksmith, esses caras vão fazer seus builds muito mais rápido e mais importante, muito mais barato, então você será menos assustado de ter todos esses PRs voando em, é literalmente uma linha de código de mudança em seu arquivo de YAML do GitHub para sua ação para começar e você vai começar imediatamente a salvar dinheiro e tempo nesses builds até 75% de redução de custos tantas empresas já estão fazendo o movimento como mintlify clerk e mais e há uma razão os próprios builds são muito mais rápidos porque estão usando cpus de gaming como pc de gaming porque as velocidades de core single em si tendem a ser muito melhor eles também estão fazendo um monte de coisas divertidas para cache eles te dão duas vezes quanto mais dados de cache que você tem no github de ações eles te dão 4 vezes mais downloads de cache colocando o armazém ao invés de usar alguns antigos hard drives em um outro rack de server em algum lugar no prédio e mais importante os builds docker são muito mais rápidos porque eles estão cacheando os linhas individuais em drives nvme que é uma loucura 40 vezes a velocidade de melhoria para muitos desses builds eles carregam metade do quanto por minuto eles são duas vezes mais rápidos geralmente o que significa 75% de desconto isso é bem difícil de alcançar além disso você ganha 3 mil minutos por mês gratuito então por que não dar uma olhada Veja-os hoje em soydev.link.

É melhor começar com o background para entender como chegamos aqui e os 20 anos que demoraram para chegarmos aqui. Antes de sabermos disso, tínhamos representação de, em ordem alfabética, Adobe, Apple, BBC, Comcast, NBC Universal, Google, Movie Labs e, claro, W3C, que mantém o spec. Eu talvez leve o tempo para mais tarde, porque eu sou um grande nerd sobre esses tipos de codecs e esses tipos de coisas de encodamento.

Você sabia que a Biblioteca do Congresso dos EUA, a Biblioteca e Arquivos do Canadá e o Arquivo Nacional da Austrália recomendaram PNG? Porque, tanto quanto eu acho que não é o que você deveria servir aos seus usuários, eu realmente não acho que, na maioria do tempo, um usuário no seu site deveria estar recebendo um PNG. O problema com outros formatos que eu apoio e amo, como WebP, AVIF e todas essas outras coisas, é que eles são um pouco perdidos.

Você pode usá-los perdidos em algum número, mas, normalmente, você os usa em 95% a 99%, o que significa que você acaba. Ou se você salvar um AVIF ou um WebP, e depois você o coloca no seu editor de fotos de escolha, faz algumas coisas com ele, e depois exporta novamente como um PNG, coloca isso na web e isso é reencodado para AVIF, a qualidade da fonte fica mais baixa em cada passo da pauta, o que não é muito bom. Produtos como o PicThing são remover de fundo para o tool de criadores de conteúdo que eu construí principalmente para mim e meu time usar.

Esse produto literalmente seria possível sem AVIF e WebP, porque nos permite servir centenas de imagens em quilobites de dados. Em cada uma dessas, mesmo que elas sejam ótimas, se eu entrar na tabela de rede, vamos ver que qualquer uma dessas é muito pequena. É por isso que é importante ter esses outros formatos que você pode usar para essas coisas diferentes, porque diferentes casos de uso exigem diferentes requerimentos.

Internalize com links reais do ecossistema CrazyStack: /blog, /curso-cursor-avancado-configuracoes-pro, /curso-claude-code-9-dicas-profissionais, /programa-crazystack e /checklist-independencia-cursor.