Agora é 2019, e já está na hora de tomarmos uma decisão sobre o GIF ( — estamos falando sobre a pronúncia em inglês, que não é relevante para nós — nota do tradutor.). Os GIFs ocupam uma enorme quantidade de espaço (geralmente vários megabytes!), o que, se você é um desenvolvedor web, vai totalmente contra seus desejos! Como desenvolvedor web, você quer minimizar o que os usuários precisam baixar para que o site carregue rapidamente. Pelo mesmo motivo, você minimiza o JavaScript, otimiza PNG, JPEG, e às vezes converte . Mas o que fazer com o velho GIF?
Para onde estamos indo, não precisaremos de GIFs!
Se seu objetivo é melhorar a velocidade de carregamento do site, então você deve se livrar dos GIFs! Mas como fazer imagens animadas então? A resposta é vídeo. E na maioria dos casos, você obterá qualidade melhor e uma economia de espaço de 50-90%! Na vida, a maioria das coisas tem seus prós e contras. Quando você substitui o GIF por vídeo, geralmente não há desvantagens.
Fora todos os GIFs!
Felizmente, substituir GIFs por vídeos tem sido uma prática comum nos últimos anos, então todas as ferramentas necessárias já estão em uso. Neste post, não vou reinventar a roda, mas apenas melhorar um pouco as soluções existentes. Então, aqui está a essência:
- Pegue o GIF e converta-o para vídeo
- Codifique o vídeo usando H.264 ou VP9, ou seja, comprima-o e empacote-o em um contêiner MP4 ou WebM
- Substitua
<img>o GIF animado porum clipe - Ative a reprodução automática sem som e repita, para conseguir o efeito do GIF
Agora é 2019
Agora é 2019. O progresso está avançando, e devemos acompanhá-lo. Até agora, tivemos duas opções de codecs que são amplamente suportadas em todos os navegadores e ferramentas de codificação de vídeo:
- H.264 — que surgiu em 2003 e é amplamente utilizado hoje
- VP9 — que surgiu em 2013 e conseguiu uma melhoria na compressão de quase 50% em comparação com o H.264, embora nem tudo é tão simples
Nota: embora o padrão H.265 — a próxima versão do H.264 e capaz de competir com o VP9, eu não o considero devido ao fraco suporte nos navegadores, conforme demonstrado na página. . Os custos de licenciamento são a principal razão pela qual o H.265 não se tornou tão popular quanto o H.264 e pela qual o consórcio Alliance of Open Media está trabalhando com o codec sem royalties — com o AV1.
Lembre-se de que nosso objetivo é reduzir os enormes GIFs ao menor tamanho possível para acelerar o carregamento. Este teria sido um ano estranho em 2019 se não tivéssemos um novo padrão para compressão de vídeo. Mas temos, e ele se chama AV1. Com o AV1, podemos . Maravilhoso! 🙂
AV1 está à sua disposição desde 2019!
Em desktops
Recentemente, o suporte para decodificação de vídeo AV1 foi adicionado nas versões desktop do e . Neste momento, o suporte no Firefox está apresentando falhas e pode causar panes, mas a situação deve mudar com a adição do já no Firefox 67 ( — nota do tradutor.). Para mais detalhes sobre a nova versão, leia —
Em smartphones
Para smartphones, o suporte de hardware atualmente não existe devido à falta de decodificadores adequados. É possível realizar a decodificação por software, mas isso resultará em um aumento no consumo da bateria. Os primeiros SOC móveis com suporte para decodificação de hardware AV1 aparecerão em 2020.
E aqui os leitores do artigo pensam: "então, se os dispositivos móveis ainda não suportam bem, por que usar o AV1?"
O AV1 é um codec relativamente novo, e estamos apenas no início de sua adoção. Pense neste artigo como uma fase de "enquanto você se prepara, a galera vem atrás". O suporte em desktops já vai acelerar sites para uma parte do público. E os codecs antigos podem ser usados como uma opção de falha quando o AV1 não é suportado no dispositivo alvo. À medida que os usuários migram para dispositivos com suporte ao AV1, tudo já estará pronto. Para isso, precisamos criar uma tag de vídeo, como mostrado abaixo, que permitirá ao navegador escolher o formato preferido — AV1 ->> VP9 ->> H.264. Agora, se o usuário tiver um dispositivo ou navegador muito antigo que não suporta vídeo de forma alguma (o que é bastante improvável com H264), simplesmente verá um GIF.
<video style="display:block; margin: 0 auto;" autoplay loop muted playsinline poster="RollingCredits.jpg">
<source src="media/RollingCredits.av1.mp4" type="video/mp4">
<source src="media/RollingCredits.vp9.webm" type="video/webm">
<source src="media/RollingCredits.x264.mp4" type="video/mp4">
<img src="media/RollingCredits.gif">
</video>Criando AV1
Criar vídeo em AV1 não é difícil. e utilize os comandos abaixo. Usamos 2 passagens para atingir a taxa de bits alvo. Para isso, executaremos o ffmpeg duas vezes. Na primeira vez, gravaremos o resultado em um arquivo inexistente. Isso criará um log que será necessário para a segunda execução do ffmpeg.
# Linux or Mac
## Проход 1
ffmpeg -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 /dev/null &&
## Проход 2
ffmpeg -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4
# Windows
## Проход 1
ffmpeg.exe -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 NUL && ^
## Проход 2
ffmpeg.exe -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4Aqui está a descrição dos parâmetros:
-i - Arquivo de entrada.
-pix_fmt - Formato 4:2:0 para selecionar informações de crominância no vídeo. Existem muitos outros formatos possíveis, mas o 4:2:0 é o mais compatível.
-c:v - Qual codec usar, neste caso - AV1.<br />
-b:v – A taxa de bits média que queremos alcançar.
-filter:v scale - O filtro de escala do ffmpeg é usado para reduzir a resolução do vídeo. Definimos X:-1, o que instrui o ffmpeg a reduzir a largura para X, mantendo a proporção da tela.
-strict experimental - Deve ser especificado, pois o AV1 é um codec relativamente novo.
-cpu-used - Parâmetro mal nomeado, que na verdade é usado para escolher o nível de qualidade do vídeo. Valores possíveis de 0 a 4. Quanto menor o valor, melhor a qualidade e, consequentemente, mais tempo levará a codificação.
-tile-columns - Para usar múltiplas threads. Instrui o AV1 a dividir o vídeo em colunas separadas, que podem ser recodificadas independentemente para melhor utilização da CPU.
-row-mt – Similar ao parâmetro anterior, mas também divide em linhas dentro das colunas.
-threads - Número de threads.
-pass - Qual passagem está sendo realizada atualmente.
-f - Usado apenas na primeira passagem. Especifica o formato do arquivo de saída, ou seja, MP4 neste caso.
-movflags faststart - Ativamos o início rápido do vídeo, movendo parte dos dados para o início do arquivo. Isso permitirá iniciar a reprodução antes que o arquivo esteja completamente carregado.
Criando GIF
Para criar o GIF, usei o comando abaixo. Para reduzir o tamanho, dimensionei o GIF para 720px de largura e 12 fps, ao invés dos 24 fps do vídeo original.
./ffmpeg -i /mnt/c/Users/kasing/Desktop/ToS.mov -ss 00:08:08 -t 12
-filter_complex "[0:v] fps=12,scale=720:-1" -y scene2.gifResultados dos testes
É melhor ver uma vez do que ler cem, não é? Vamos garantir que o AV1 seja a escolha certa para nossos objetivos. Peguei um vídeo gratuito Tears Of Steel, disponível aqui , e o converti, usando uma taxa de bits aproximadamente igual para os codecs AV1, VP9, H.264. Os resultados estão abaixo, assim você pode compará-los por conta própria.
Nota 1: Se o arquivo abaixo não carregar, pode ser hora de atualizar seu navegador. Eu recomendaria um navegador baseado em Chromium, como Chrome, Vivaldi, Brave ou Opera. Aqui estão as informações mais recentes sobre suporte ao AV1
Nota 2: Para o Firefox 66 no Linux, você precisará ativar o flag media.av1.enabled como valor verdadeiro em about:config
Nota 3: Decidi não incluir os GIFs normais abaixo devido ao seu grande tamanho e ao volume de dados que poderia ser necessário para carregar esta página! (O que seria irônico, já que esta página é sobre a redução do uso de dados na página :)). Mas você pode visualizar os GIFs finais aqui
Nota do tradutor: O Habr não permite habilitar a reprodução automática e a repetição do arquivo, então só será possível avaliar a qualidade. Você pode ver como seriam as ‘imagens animadas’ ao vivo em .
Cena 1 @ 200 Kbps
Aqui há muito movimento, o que é especialmente sensível em baixas taxas de bits. É imediatamente evidente como o H.264 é ruim nessa taxa de bits, com os quadrados visíveis. O VP9 melhora um pouco a situação, mas os quadrados ainda são visíveis. O AV1 claramente se sai melhor, apresentando mais nitidez.
H.264
VP9
AV1
Cena 2 @ 200 Kbps
Aqui há muito conteúdo CGI semitransparente. Os resultados não diferem tanto quanto na última vez, mas no geral o AV1 parece melhor.
H.264
VP9
AV1
Cena 3 @ 100 Kbps
Nesta cena, reduzimos a taxa de bits para 100 Kbps e os resultados refletem isso. O AV1 mantém a liderança mesmo em baixas taxas de bits!
H.264
VP9
AV1
A cereja do bolo
Para concluir o artigo, sentindo a quantidade de tráfego economizado em comparação com os GIFs — o tamanho total de todos os vídeos acima é… 1,62 MB!! Correto. Algo como 1.708.032 bytes! Para comparação, aqui está o tamanho do vídeo GIF e AV1 para cada uma das cenas.
GIF
AV1
Cena 1
11,7 MB
0,33 MB
Cena 2
7,27 MB
0,18 MB
Cena 3
5,62 MB
0,088 MB
Simplesmente impressionante! Não é?
Nota: Os tamanhos dos arquivos VP9 e H264 não são mencionados, pois praticamente não diferem do AV1 devido ao uso da mesma taxa de bits. Seria redundante adicionar mais duas colunas com tamanhos iguais, só para enfatizar que esses codecs oferecem qualidade muito melhor que o GIF com tamanhos de arquivo muito menores.
Fonte: habr.com
