aguarde...

8 de setembro de 2020

Como usar AVIF: o novo formato de compactação de imagem de última geração

Como usar AVIF: o novo formato de compactação de imagem de última geração

Um formato de imagem mais ideal

Uma das novas tecnologias com a qual estamos realmente entusiasmados é o formato de arquivo de imagem AV1 (.avif) . É basicamente um tipo de imagem supercomprimido. A Netflix já considerou .avif superior ao JPEG, PNG e até mesmo aos formatos de imagem WebP mais recentes por sua qualidade de imagem em relação ao tamanho do arquivo compactado.

O formato foi desenvolvido pela Alliance for Open Media em colaboração com Google, Cisco e Xiph.org (que trabalhou com a Mozilla, criadores do navegador Firefox). Este formato foi criado para ser um formato de imagem de código-fonte aberto e livre de royalties (ao contrário do JPEG XR, que é um formato de arquivo muito pequeno, mas requer licenciamento caro para ser implementado).

AVIF em comparação com JPEG e WebP

AVIF oferece redução significativa de tamanho de arquivo para imagens em comparação com JPEG ou WebP; Economia de ~ 50% em comparação com JPEG e economia de ~ 20% em comparação com WebP . Daniel Aleksandersen do CTRL.Blog tem uma grande análise e um mergulho profundo na comparação do AVIF com JPEG e WebP .

.avif50% smaller than .jpeg30% smaller than .jpeg.webp.jpeg

O formato é muito flexível, pois suporta qualquer codec de imagem, pode ter ou não perdas, tem a capacidade de usar um canal alfa (transparência para IU e elementos de design) e ainda tem a capacidade de armazenar uma série de quadros animados (pense GIFs animados leves e de alta qualidade).

É também um dos primeiros formatos de imagem a oferecer suporte a cores HDR; oferecendo maior brilho, profundidade de bits de cor e gamas de cores.

Usando AVIF no desenvolvimento da Web hoje

A partir de 25 de agosto de 2020, AVIF é compatível com o Chrome 85 e habilitado usando um sinalizador de recurso no Firefox 80 (e será compatível por padrão em breve); então devemos começar a desenvolver para ele hoje!

Se a imagem AVIF acima não aparecer em seu navegador, tente usar a versão mais recente do Google Chrome ou habilitar o AVIF nas preferências de configuração avançada do Firefox. Você pode fazer isso inserindo about:configna barra de URL, pesquisando image.avif.enablede mudando este parâmetro para true.

Crie arquivos AVIF com Squoosh

Squoosh é um aplicativo da web de compactação de imagens que permite mergulhar nas opções avançadas fornecidas por vários compressores de imagens.

A equipe do Google Chrome Labs adicionou recentemente suporte AVIF ao incrível aplicativo da web Squoosh. Em minha opinião, esta é a melhor opção para converter e criar arquivos .avif.

Use o aplicativo Squoosh

Se você se sentir confortável com a linha de comando, pode usar a biblioteca oficial AOMedia, libavif , para codificar / decodificar arquivos AVIF. Além disso, se você é um usuário do macOS com Homebrew , pode instalar rapidamente uma versão pré-criada usando brew install joedrago/repo/avifencavifenc --helppara sintaxe e opções.

AVIF como aprimoramento progressivo

Mesmo que AVIF não seja compatível em todos os lugares ainda, podemos usar o formato em HTML nativo com o <picture>elemento. O <picture>elemento permite suporte progressivo, pois podemos listar as fontes de imagem na ordem em que desejamos carregar, e o navegador carregará a primeira que suporta. Se o navegador não for compatível <picture>, ele voltará a usar o padrão <img>.

<picture>	<source srcset="img/photo.avif" type="image/avif">	<source srcset="img/photo.webp" type="image/webp">	<img src="img/photo.jpg" alt="Description of Photo"></picture>

AVIF Content-Type Headers + Netlify

Um problema que notamos ao usar arquivos .avif no Netlify foi que a imagem não estava aparecendo no Firefox. Funcionou bem no Chrome, mas não no Firefox. Identificamos que os cabeçalhos de resposta estavam retornando Content-Type: application/octet-stream, fazendo com que o Firefox não exibisse nada. Corrigimos isso definindo cabeçalhos personalizados no arquivo de configuração do Netlify ( netlify.toml).

[[headers]]  for = "*.avif"  [headers.values]    Content-Type = "image/avif"    Content-Disposition = "inline"

Também definimos o Content-Dispositioncomo inlinevs attachment, dessa forma o navegador tentará renderizar o arquivo dentro do navegador em vez de externamente. Um bom exemplo disso é quando um PDF é aberto no navegador em vez de um arquivo para download. Embora inlinedeva ser o comportamento padrão, a especificação não fará mal, pois este é um novo tipo de arquivo.

Você pode aprender mais sobre como configurar cabeçalhos personalizados no Netlify verificando seus documentos.

Posted in Blog
Write a comment