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.
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/avifence avifenc --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.