Agora é o ano de 2019, e é hora de tomarmos uma decisão sobre o GIF ( não, não é sobre essa decisão! Aqui nunca vamos concordar! - aqui estamos falando sobre pronúncia em inglês, para nós não é relevante - aprox. Transl. ). Os GIFs ocupam uma quantidade enorme de espaço (geralmente alguns megabytes!). Se você é um desenvolvedor web, isso contradiz completamente seus desejos! Como desenvolvedor da web, você deseja minimizar o que os usuários precisam baixar para que o site seja carregado rapidamente. Pelo mesmo motivo, você minimiza o JavaScript, otimiza PNG, JPEG e às vezes converte JPEG em WebP . Mas o que fazer com o antigo GIF?
Para onde vamos, não precisamos de GIFs!
Se seu objetivo é melhorar a velocidade de carregamento do site, você precisa se livrar do GIF! Mas como fazer imagens animadas? A resposta é vídeo. E, na maioria dos casos, você obtém a melhor qualidade e economia de espaço de 50 a 90%! Na vida, a maioria das coisas tem seus prós e contras. Quando você substitui GIFs por vídeo, as desvantagens mais comuns não podem ser encontradas.
Abaixo todos os gifs!
Felizmente, a substituição de GIFs por vídeo tem sido comum nos últimos anos; portanto, todas as ferramentas necessárias já estão em uso. Neste post, não reinventarei a roda, mas apenas melhorarei ligeiramente as soluções existentes. Então aqui está a essência:
- Pegue um GIF e converta-o em vídeo
- Codifique vídeo usando H.264 ou VP9, ou seja, apertá-lo e embalá-lo em um recipiente MP4 ou WebM
- Substitua
<img> por GIF animado por <video> pelo filme - Ative a reprodução automática silenciosa e faça um loop para obter o efeito GIF
O Google tem uma boa documentação que descreve o processo.
Agora é 2019
Agora é o ano de 2019. O progresso está avançando, e devemos acompanhá-lo. Até o momento, tivemos duas versões de codecs com amplo suporte em todos os navegadores e ferramentas de codificação de vídeo:
- H.264 - introduzido em 2003 e mais utilizado atualmente
- VP9 - apareceu em 2013 e alcançou uma melhoria de compressão em quase 50% em comparação com o H.264, embora, como dizem aqui, nem tudo seja e nem sempre seja tão otimista
Nota: embora o padrão H.265 seja a próxima versão do H.264 e seja capaz de competir com o VP9, não o considero devido ao pouco suporte do navegador, que é mostrado na página https://caniuse.com/#feat=hevc . Os custos de licenciamento são a principal razão pela qual o H.265 não se tornou tão difundido quanto o H.264 e o consórcio Alliance of Open Media trabalha com um codec sem royalties - com o AV1.
Lembre-se de que nosso objetivo é reduzir enormes GIFs para o menor tamanho possível para acelerar o carregamento. Seria um ano estranho para 2019 se não tivéssemos um novo padrão para compactação de vídeo em nosso arsenal. Mas ele é e é chamado AV1. Com o AV1, você pode obter aproximadamente 30% de melhoria na compactação em comparação ao VP9 . Lepota! :)
AV1 ao seu serviço desde 2019!
Em computadores
Recentemente, o suporte à decodificação de vídeo AV1 foi adicionado nas versões para desktop do Google Chrome 70 e Mozilla Firefox 65 . No momento, o suporte ao Firefox é defeituoso e pode causar falhas, mas as coisas devem mudar com a adição do decodificador dav1d no Firefox 67 ( já está disponível, mas o suporte apareceu - aprox. Transl.) . Para detalhes sobre a nova versão, leia - dav1d 0.3.0: ainda mais rápido!
Em smartphones
Atualmente, para smartphones, o suporte a hardware está ausente devido à falta de decodificadores apropriados. Você pode decodificar o software, embora isso leve ao aumento do consumo da bateria. O primeiro SOC móvel com suporte à decodificação de hardware AV1 será exibido em 2020.
E aqui os leitores do artigo são "então, se o celular ainda não suporta normalmente, então por que usar o AV1?"
O AV1 é um codec bastante novo e estamos no início de sua adaptação. Pense neste artigo como o estágio "enquanto você cozinha, as pessoas estão se levantando". Somente o suporte a desktops acelerará os sites para parte do público. E codecs antigos podem ser usados como um script de fallback, quando o AV1 não é suportado no dispositivo de destino. Mas à medida que os usuários mudam para dispositivos com suporte para AV1, tudo estará pronto. Para conseguir isso, precisamos criar uma tag de vídeo, como mostrado abaixo, que permite ao navegador selecionar o formato preferido - AV1 - >> VP9 - >> H.264 . Bem, se o usuário tiver um dispositivo ou navegador completamente antigo que o vídeo não suporta (o que dificilmente será roubado com o H264) , ele 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 um vídeo no AV1 é fácil. Faça o download da versão mais recente do ffmpeg para o seu sistema aqui e use os comandos abaixo. Usamos 2 passes para atingir a taxa de bits desejada. Para fazer isso, executaremos o ffmpeg duas vezes. A primeira vez que escrevemos o resultado em um arquivo inexistente. Isso criará o log 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.mp4
Aqui está uma descrição dos parâmetros:
-i - . -pix_fmt - 4:2:0 . , 4:2:0 . -c:v - , - AV1.<br /> -b:v – , . -filter:v scale - ffmpeg . X:-1 ffmpeg X, . -strict experimental - , .. AV1 . -cpu-used - , . 0-4. , , , , . -tile-columns - . AV1 , . -row-mt – , , . -threads - . -pass - . -f - . , .. MP4 . -movflags faststart - , . .
Criação de GIF
Para criar o GIF, usei o comando abaixo. Para reduzir o tamanho, dimensionei o GIF para 720px de largura e 12 fps em vez do vídeo original de 24 fps.
./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.gif
Resultados do teste
Melhor ver uma vez do que ler cem vezes, certo? Vamos garantir que o AV1 seja a escolha certa para nossos propósitos. Peguei o vídeo gratuito Tears Of Steel, disponível aqui https://mango.blender.org/ , e o converti usando aproximadamente a mesma taxa de bits para os codecs AV1, VP9, H.264. Os resultados estão abaixo, para que você possa compará-los.
Nota 1: Se o arquivo abaixo não estiver sendo baixado de você, talvez seja necessário atualizar seu navegador. Eu recomendaria um navegador baseado em Chromium como Chrome, Vivaldi, Brave ou Opera. Aqui estão as informações de suporte mais recentes para o AV1 https://caniuse.com/#feat=av1
Nota 2: Para o Firefox 66 no Linux, você precisará definir o sinalizador media.av1.enabled como true em about:config
Nota 3: Decidi não incluir GIFs regulares abaixo devido ao seu tamanho grande e à quantidade de dados que podem ser necessários para carregar esta página! (O que seria irônico, porque esta página é para reduzir a quantidade de dados na página :)). Mas você pode ver os GIFs finais aqui https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs
Nota do tradutor: Habr não permite que você ative a reprodução automática e faça um loop do arquivo; portanto, apenas a qualidade será avaliada. Você pode ver como as "imagens animadas" aparecem ao vivo no artigo original .
Cena 1 a 200 Kbps
Há muito movimento, o que é especialmente sensível com taxas de bits baixas. Você pode ver imediatamente o quão ruim H.264 nessa taxa de bits os quadrados são imediatamente visíveis. O VP9 melhora um pouco a situação, mas os quadrados ainda são visíveis. O AV1 vence claramente, dando obviamente a melhor imagem.
H.264
VP9
AV1
Cena 2 a 200 Kbps
Há muito conteúdo CGI translúcido. Os resultados não diferem mais da última vez, mas no geral o AV1 parece melhor.
H.264
VP9
AV1
Cena 3 a 100 Kbps
Nesta cena, distorcemos a taxa de bits para 100 Kbps e os resultados são consistentes. O AV1 mantém a liderança em taxas de bits baixas!
H.264
VP9
AV1
Cereja no Bolo
Para concluir o artigo, sentindo a quantidade de tráfego salvo comparada ao GIF - o tamanho total de todos os vídeos é maior ... 1,62 MB !! Certo. Alguns malditos 1.708.032 bytes! Para comparação, veja o tamanho dos vídeos GIF e AV1 para cada uma das cenas
Apenas impressionante! Certo?
Nota: Os tamanhos de arquivo VP9 e H264 não são mostrados, pois praticamente não diferem do AV1 devido ao uso da mesma taxa de bits. Seria redundante adicionar mais duas colunas com as mesmas dimensões, apenas para enfatizar que esses codecs produzem qualidade muito melhor do que GIFs com tamanhos de arquivo muito menores.