É 2019 e já é hora de decidirmos sobre os GIFs ( - aqui estamos falando de pronúncia em inglês, para nós isso não é relevante - aprox. tradução). Os GIFs ocupam muito espaço (geralmente vários megabytes!), o que, se você é um desenvolvedor web, é completamente contrário aos seus desejos! Como desenvolvedor web, você deseja 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 GIF antigo?
Não precisaremos de GIFs para onde vamos!
Se o seu objetivo é melhorar a velocidade de carregamento do site, você precisa se livrar dos GIFs! Mas como então você faz imagens animadas? A resposta é vídeo. E na maioria dos casos, você obterá melhor qualidade e economia de espaço de 50 a 90%! Na vida, a maioria das coisas tem seus prós e contras. Ao substituir GIF por vídeo, na maioria das vezes você não conseguirá encontrar nenhum contra.
Abaixo todos os GIFs!
Felizmente, substituir GIFs por vídeos tem sido comum nos últimos anos, por isso todas as ferramentas necessárias já estão em uso. Neste post não vou reinventar a roda, mas apenas melhorar ligeiramente as soluções existentes. Então aqui está a essência:
- Pegue um GIF e converta-o em um vídeo
- Codifique o vídeo usando H.264 ou VP9, ou seja, compactá-lo e empacotá-lo em um contêiner MP4 ou WebM
- Substituir
<img>com GIF animado ativado<video>com rolo - Ative a reprodução automática sem som e loop para obter um efeito GIF
É 2019
É 2019 agora. O progresso avança e devemos acompanhá-lo. Até agora, tivemos duas opções de codec que são amplamente suportadas 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 melhorias de compressão de quase 50% em comparação com H.264, embora nem tudo nem sempre é tão róseo
Nota: Embora o H.265 seja a próxima versão do H.264 e seja capaz de competir com o VP9, não considero isso devido ao fraco suporte do navegador, conforme mostrado na página . 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 porque o consórcio Alliance of Open Media está trabalhando com um codec isento de royalties, o AV1.
Lembre-se de que nosso objetivo é reduzir GIFs enormes ao menor tamanho possível para acelerar o tempo de carregamento. Seria um 2019 estranho se não tivéssemos um novo padrão de compressão de vídeo em nosso arsenal. Mas existe e se chama AV1. Com AV1 você pode . Lepota! 🙂
AV1 está ao seu serviço desde 2019!
Em computadores
Recentemente, o suporte para decodificação de vídeo AV1 foi adicionado às versões desktop и . No momento, o suporte ao Firefox apresenta bugs e pode causar travamentos, mas as coisas devem melhorar com a adição de já no Firefox 67 ( - Aproximadamente. trad.). Para obter detalhes sobre a nova versão, leia -
Em smartphones
Atualmente não há suporte de hardware para smartphones devido à falta de decodificadores apropriados. Você pode fazer a decodificação de software, embora isso aumente o consumo da bateria. Os primeiros SOCs móveis com suporte para decodificação de hardware AV1 aparecerão em 2020.
E então os leitores do artigo pensam: “então, se os telefones celulares ainda não oferecem suporte adequado, por que usar AV1?”
AV1 é um codec relativamente novo e estamos no início de sua adaptação. Pense neste artigo como a etapa “enquanto você cozinha, a multidão o acompanha”. O suporte para desktop por si só irá acelerar os sites para parte do público. E codecs antigos podem ser usados como cenário alternativo quando AV1 não é compatível com o dispositivo de destino. Mas à medida que os usuários mudam para dispositivos com suporte AV1, tudo estará pronto. Para conseguir isso, precisamos criar uma tag de vídeo conforme mostrado abaixo, que permitirá ao navegador selecionar seu formato preferido - AV1 - >> VP9 - >> H.264. Bem, se o usuário possui um dispositivo ou navegador muito antigo que não suporta vídeo algum (o que é extremamente improvável com H264), então ele verá apenas o 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>Criação de AV1
Criar vídeos no AV1 é fácil. e use os comandos abaixo. Usamos 2 passagens para atingir a taxa de bits desejada. Para fazer isso, executaremos o ffmpeg duas vezes. Na primeira vez, escrevemos 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á uma análise 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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Fazendo GIFs
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.gifResultados do teste
É melhor ver uma vez do que ler cem vezes, certo? Vamos ter certeza de que o AV1 é a escolha certa para nossos propósitos. Peguei o vídeo gratuito do Tears Of Steel disponível aqui e converteu-o usando aproximadamente a mesma taxa de bits para codecs AV1, VP9, H.264. Os resultados estão abaixo para que você possa compará-los por si mesmo.
Nota 1: Se o arquivo abaixo não carregar para você, talvez seja 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 o suporte AV1
Nota 2: Para Firefox 66 no Linux você precisará definir o sinalizador media.av1.enabled em significado true в about:config
Nota 3: Decidi não incluir GIFs normais abaixo devido ao seu grande tamanho e à quantidade de dados necessários para carregar esta página! (O que seria irônico, já que esta página trata de reduzir a quantidade de dados em uma página :)). Mas você pode ver os GIFs finais aqui
Nota do tradutor: Habr não permite que você habilite a reprodução automática e faça o loop do arquivo, então você só pode avaliar a qualidade. Você pode ver como ficarão as “imagens animadas” ao vivo em .
Cena 1 a 200 Kbps
Há muito movimento aqui, o que é especialmente sensível em taxas de bits baixas. Você pode ver imediatamente o quão ruim é o 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. AV1 vence claramente, produzindo uma imagem obviamente melhor.
H.264
VP9
AV1
Cena 2 a 200 Kbps
Há muito conteúdo CGI translúcido aqui. Os resultados não são tão diferentes como da última vez, mas no geral o AV1 parece melhor.
H.264
VP9
AV1
Cena 3 a 100 Kbps
Nesta cena, reduzimos a taxa de bits para 100 Kbps e os resultados são consistentes. AV1 mantém sua liderança mesmo com taxas de bits baixas!
H.264
VP9
AV1
Cereja no bolo
Para finalizar este artigo sentindo a quantidade de largura de banda economizada em comparação com o GIF - o tamanho total de todos os vídeos é maior... 1.62MB!! Certo. Uns malditos 1,708,032 bytes! Para efeito de comparação, aqui estão os tamanhos de vídeo GIF e AV1 para cada cena
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 deslumbrante! Não é?
Nota: Os tamanhos de arquivo VP9 e H264 não são fornecidos, pois praticamente não diferem do AV1 devido ao uso da mesma taxa de bits. Seria redundante adicionar mais duas colunas com os mesmos tamanhos, apenas para destacar que esses codecs produzem uma qualidade muito melhor que o GIF em tamanhos de arquivo muito menores.
Fonte: habr.com