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

Toda imagem publicada decide três coisas de uma vez: o formato do arquivo, o preparo antes de subir e a licença que ela carrega. Formato é o jeito de guardar a foto, como escolher entre embalar num saco ou numa caixa, e ele muda quanto a foto pesa.

Peça AVIF primeiro, WebP depois e JPEG por último, com a meta de ficar abaixo de 150 KB no tamanho em que a foto aparece. O AVIF descreve a mesma imagem com menos dados, o WebP é aceito há mais tempo e o JPEG é o piso que qualquer navegador abre.

A etiqueta picture oferece os três em ordem, e o navegador para no primeiro que reconhece. Assim o celular antigo recebe o JPEG e o novo recebe o AVIF, sem você manter duas páginas. Largura e altura declaradas 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, que não perde nitidez em nenhum tamanho. Captura de tela com letra pequena pede WebP sem perda, e foto com fundo transparente pede AVIF.

O preparo é a etapa que some do processo, porque nada quebra quando ela é pulada. A foto de 4,2 MB aparece na tela igual à de 96 KB, e quem desistiu de esperar no celular não deixa registro nenhum. Por isso o prejuízo é invisível até alguém medir.

A saída é tirar o preparo da memória de alguém e pôr num script que roda no 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, e o SVGO limpa o vetor.

Quem prefere tela em vez de script usa o Squoosh, que faz a mesma conversão no navegador. 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 desenhada página a página. O Satori com @vercel/og transforma a marcação da própria página em imagem, no servidor mais perto de quem pediu o link.

Ele pesa 500 kB contra os 50 MB de um navegador completo, por isso cabe num servidor pequeno e custa quase nada por capa. Depois que o gerador está de pé, toda página nova ganha a capa sozinha, sem passar pelo designer.

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 uma arte estilizada, use o Magnific, que inventa de propósito e por isso fica longe da foto de produto.

A remoção de fundo roda dentro do navegador, então a foto do cliente nunca sai do aparelho dele. O transformers.js usa a placa de vídeo pelo navegador, com reserva no processador quando ela falta, e o MediaPipe separa a pessoa do fundo na câmera ao vivo.

Direito vem antes de gerar ou de baixar. Cada plataforma define quem detém a imagem gerada e se o uso comercial está liberado, e a regra muda entre OpenAI, Midjourney e Firefly. A Lei 9.610, de 1998, define autor como pessoa física e nada diz sobre obra feita por modelo.

Adote o C2PA na geração, o padrão que grava dentro do arquivo quem gerou a imagem, com qual ferramenta e o que foi editado depois. Ele aparece como Content Credentials, e conferir esse selo antes de publicar é o que te protege numa reclamação.

Banco gratuito e ilustração aberta seguem a mesma ordem de leitura: primeiro o CC0, que libera o uso sem crédito, depois a atribuição exigida. Por último vêm as proibições específicas de cada arquivo.

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

O PhotoSwipe abre a galeria com gesto de pinça e segue estável. O esqueleto de carregamento, o contorno cinza que ocupa o lugar da imagem antes de ela chegar, vem do react-content-loader. Ele substitui o círculo girando, porque a pessoa vê a forma do que vem e a tela não pula.

Antes de publicar, abra a página no computador e vá na aba Rede das ferramentas do navegador, que lista tudo que desceu. Recarregue em modo celular e olhe a coluna de tamanho de cada imagem. É assim que se confere o peso de uma foto.

JPEG ou PNG puro acima de 150 KB é o sinal de que falta a etiqueta picture naquela imagem. Um script do Sharp no build entrega cada foto abaixo desse limite todo dia, sem ninguém precisar lembrar.

Depois teste a capa de compartilhamento mandando o link para você mesmo no WhatsApp. Liste a origem, a licença e o selo de cada imagem em uso, e marque em vermelho aquela que você não sabe responder de onde veio.

Pedir ícone e vídeo que não gastam banda de quem só olha

A esteira já entrega imagem leve com licença conferida, e ícone e vídeo entram pela mesma régua, sem cobrar banda de quem apenas olha a página.

Ícone, vídeo e som são os três arquivos que mais cobram internet de quem só olha a página, e cada um tem jeito de cobrar apenas o necessário. Banda é o quanto de dados o celular da pessoa precisa baixar, e no plano dela isso vira dinheiro e espera.

O ícone engorda o pacote sem ninguém perceber. Pedir cada desenho pelo nome deixa de fora o que a tela não usa, como comprar três frutas na feira. Pedir a coleção inteira de uma vez arrasta o catálogo completo para a conta de quem via só três desenhos.

A cor do ícone vem de currentColor, a palavra que faz o desenho herdar a cor do texto ao redor. Dentro do botão, o ícone escurece junto com o rótulo e acompanha a troca de tema. Cor fixa escrita dentro do desenho vira preto sobre preto no tema escuro.

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

Com preload em none, o arquivo não desce antes do toque, e o playsInline mantém o vídeo dentro da página no iPhone. O track aponta a legenda, um arquivo de texto com o tempo de cada fala.

Vídeo curto vale como arquivo próprio. Aula gravada pede plataforma de streaming, que ajusta a qualidade à internet de cada pessoa e evita travar no celular com sinal fraco.

A regra da casa vale para toda página pública: nunca a etiqueta video crua, com os controles padrão do navegador. 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 juntou os times de Video.js, Plyr, Vidstack e Media Chrome numa versão só, ainda em teste. Enquanto ela não sai, o Vidstack e o hls.js sozinho são as opções estáveis para uma página no ar hoje.

Já o Vidstack traz HLS e DASH, os formatos de streaming que trocam a qualidade conforme a internet da pessoa, além de YouTube. O hls.js cuida só do streaming, e serve quando a interface já existe.

Som tem três bibliotecas e um padrão. O Howler.js pesa 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 notas, o caso do instrumento na tela, e o wavesurfer.js desenha a onda em que a pessoa clica para pular.

O padrão combina Howler para a trilha e Tone só onde o som nasce na hora. Som nunca começa sozinho, porque a pessoa pode estar num lugar silencioso: ela aperta, e o botão mostra que está tocando.

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

Vale o mesmo para o ícone e para o som. Ícone pedido 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 toca depois do toque, nunca sozinha.

Antes de publicar, desative o cache, que é a cópia guardada pelo navegador para não baixar tudo de novo, e recarregue a página mais visitada.

Confira na aba de rede quantos quilobytes desceram antes de qualquer toque no play. O critério de pronto é nenhum vídeo e nenhum áudio aparecerem na lista antes do clique. Todo player cru em página pública vira Vidstack ou hls.js, com velocidade, transcrição e compartilhar.

Guia prático: medir o peso que o template trouxe e converter antes de publicar

Template profissional chega bonito e pesado, e o peso não aparece no navegador do computador de quem aprova. Os 51 templates de site medidos em 07/10/2026 dão a dimensão:

Num template de advocacia, o pacote final deu 5,0 MB, dos quais 3,4 MB eram o vídeo do topo. Os endereços externos têm outro risco: a foto mora no servidor de alguém. Se o arquivo no Unsplash mudar ou se o armazenamento da plataforma sair do ar, por fim de assinatura ou mudança de projeto, as 141 imagens dos 19 templates somem do seu site sem aviso.

A lição: antes de publicar, rode um passo de conversão que traz cada imagem para o projeto, no formato moderno e na largura em que aparece, e anote o peso antes e depois.

A imagem é quase sempre o arquivo mais pesado da página

Foto em PNG de 2 MB no topo da página atrasa tudo o que vem depois, e no celular com sinal fraco o visitante desiste antes de ver a oferta. Os formatos WebP e AVIF entregam a mesma foto com bem menos bytes, e as bases modernas, como o Next.js, já convertem e redimensionam sozinhas quando o componente certo é usado.

Aplicar os recursos ao projeto