Preparar imagens, ícones e vídeo para a web

Toda imagem publicada decide três coisas de uma vez: o formato, o preparo antes de publicar e a origem com a licença que ela carrega. Quem decide a imagem do próprio site sai com a marcação certa, um script que prepara qualquer foto sozinho e a resposta sobre de quem é o direito.

AVIF vem antes de WebP, que vem antes do formato legado, e a meta é ficar abaixo de 150 KB no tamanho real de exibição. O AVIF descreve a mesma foto com menos dados; o WebP é aceito há mais tempo; o JPEG é o piso que qualquer navegador exibe.

A etiqueta picture oferece os três em ordem, e o navegador para no primeiro que reconhece. O srcset lista as larguras que existem e o sizes diz o espaço ocupado; com os dois, o celular baixa a versão pequena. Width e height declarados reservam o espaço antes de o arquivo chegar, e o botão para de pular sob o dedo.

Três tipos fogem da regra. Ícone, desenho de linha e gráfico simples vão em vetor SVG; captura de tela com letra pequena, em WebP sem perda; foto com transparência, em AVIF com alfa.

O preparo é a etapa que some do processo, porque nada quebra quando ela é pulada: o arquivo aparece na tela e tudo parece certo. Quem desistiu de esperar no celular não deixa registro. A solução é tirar o preparo da memória e pôr no script que roda antes do build (a montagem final do site antes de publicar).

O Sharp redimensiona, converte e gera a versão minúscula e borrada, uma vez por imagem, no build; o Squoosh faz o mesmo numa ferramenta de tela. O SVGO limpa o vetor, tirando o metadado de editor que dobra o arquivo. No Next.js (a base de código do curso), o next/image monta a cadeia inteira numa linha.

A imagem de compartilhamento, a capa que o WhatsApp mostra ao lado do link, sai de um gerador, nunca de uma arte por página. O Satori 1.0 com @vercel/og converte HTML e JSX (a marcação do React) em SVG no edge, o servidor mais perto de quem pede. Ele pesa 500 kB contra os 50 MB de um Chromium.

A atualização de março de 2026 deixou o gerador até 20 vezes mais rápido em imagem complexa, com variáveis CSS e box-sizing. O resvg rasteriza o SVG em PNG, o formato que as redes leem. O custo por capa cai a zero depois que o gerador está de pé.

Ampliar e recortar são dois trabalhos com ferramenta própria. Para ampliar foto real sem inventar detalhe, use o Topaz; para acrescentar detalhe a arte estilizada, o Magnific, que inventa de propósito. Ele fica fora da foto de produto.

A remoção de fundo roda dentro do navegador, e a foto nunca sai do aparelho. O transformers.js carrega o modelo RMBG-1.4 ou o ModNet na WebGPU (a placa de vídeo via navegador), com reserva em Wasm, a via pelo processador. O MediaPipe Image Segmenter separa a pessoa do fundo em tempo real, o caso da câmera ao vivo.

Direito vem antes de gerar ou baixar. Cada plataforma define quem detém a imagem gerada e se o uso comercial está liberado, e as regras mudam entre OpenAI, Midjourney e Firefly. A Lei 9.610, de 1998, define autor como pessoa física no artigo 11 e nada diz sobre obra gerada por modelo; esse vácuo persiste.

Adote C2PA na geração: é o padrão que grava no arquivo quem gerou, com qual ferramenta e o que foi editado, exibido como Content Credentials. Verifique o selo antes de publicar e guarde o comprovante. Banco gratuito e ilustração aberta seguem a mesma ordem de leitura: CC0 (uso livre sem crédito), depois atribuição, depois as proibições específicas.

Modelo de imagem erra palavra escrita, e o problema piora em português: ponha o texto por cima, em HTML. A descrição alternativa segue uma regra: vazia na imagem que só enfeita, o conteúdo real na que informa, nunca o nome do arquivo.

O PhotoSwipe 5 abre a galeria com gesto de pinça e está estável, sem versão maior desde 2024. O esqueleto de carregamento (o contorno cinza no lugar da imagem antes de ela chegar) vem do react-content-loader ou do react-loading-skeleton. Ele substitui o círculo girando: a pessoa vê a forma do que vem e a tela não pula.

Antes de publicar, confira na aba de rede, em modo celular, qual arquivo desceu e quantos quilobytes pesa: JPEG ou PNG puro acima de 150 KB avisa que falta a etiqueta picture. Um script do Sharp no build entrega cada foto abaixo desse limite todo dia, sem ninguém lembrar.

Teste a capa de compartilhamento no link enviado por WhatsApp. Liste a origem, a licença e o selo de cada imagem em uso, e marque em vermelho a que você não sabe responder.

Ícone e vídeo sem cobrar banda de quem só olha

Ícone, vídeo e som são os três ativos que mais cobram banda de quem só olha a página, e cada um tem jeito de cobrar só o necessário. Quem decide o próprio site sai pedindo ícone pelo nome, vídeo que desce só depois do toque e trilha que pesa sete quilobytes.

O ícone é o ativo que mais engorda o pacote sem ninguém perceber. A importação nomeada, pedindo cada desenho pelo nome, deixa de fora o que a tela não usa. A importação em bloco, com asterisco, arrasta a coleção inteira para a conta de quem só via três desenhos.

A cor do ícone vem de currentColor (a palavra-chave que faz o desenho herdar a cor do texto ao redor). Dentro do botão, o ícone escurece no hover e apaga no estado desativado junto com o rótulo, sem variável extra, e troca de tema com o texto. Hex fixo dentro do SVG vira preto sobre preto no tema escuro.

O vídeo é o arquivo mais pesado que a página serve, e quatro atributos resolvem a primeira visita. O poster, a imagem parada antes do play, é o que a maioria das visitas vê.

O preload em none impede que o arquivo desça antes do toque, e o playsInline mantém o vídeo dentro da página no iPhone. O track aponta a legenda em arquivo .vtt, texto com o tempo de cada fala. Vídeo curto vale como arquivo próprio; aula gravada pede plataforma de streaming, que adapta a qualidade à rede de cada pessoa.

A regra da casa vale para toda página pública: nunca a etiqueta video com controls crua. O player precisa de controle de velocidade, transcrição no HTML servido, que o buscador e o leitor de tela leem, e botão de compartilhar.

O Video.js v10 reúne os times de Video.js, Plyr, Vidstack e Media Chrome dentro da Mux. O beta de março de 2026 chegou com pacote 81% menor e mínimo de cinco quilobytes comprimidos; a versão final está prevista para meados de 2026.

Até a versão final, o Vidstack e o hls.js isolado são as opções estáveis. O Vidstack traz provedores para HLS e DASH (os formatos de streaming que trocam a qualidade conforme a rede), YouTube e Remotion; o hls.js cuida só do streaming.

Som tem três bibliotecas e um padrão. O Howler.js, com sete quilobytes, toca trilha e efeito com um chamado só e lida com o bloqueio de som automático do celular. O Tone.js sintetiza e agenda notas, o caso do instrumento na tela. O wavesurfer.js desenha a forma de onda em que a pessoa clica para pular.

O padrão combina Howler para a trilha e Tone só na camada generativa, aquela em que o som nasce na hora. Som nunca começa sozinho: a pessoa aperta, e o botão mostra que está tocando.

O sinal de que a conta está certa é simples: com poster, preload none, playsInline e legenda dentro de um player completo, só o quadro parado desce. Se o arquivo aparecer na lista de rede antes do clique, o preload ainda está ligado.

O mesmo vale para o ícone e para o som. Ícone importado pelo nome fica fora do pacote quando a tela não o usa, e pintado por currentColor continua visível no tema escuro. A trilha ambiente toca pelo Howler depois do toque, nunca sozinha, e o Tone fica reservado à camada generativa.

Antes de publicar, desative o cache, a cópia que o navegador guarda, e recarregue a página mais visitada.

Confira na aba de rede quantos quilobytes desceram antes de qualquer toque no play. Vídeo e áudio não podem aparecer na lista antes do clique. Todo controls cru em página pública vira Vidstack ou hls.js, com velocidade, transcrição e botão de compartilhar.