Filtros de imagem
Aplique tons de cinza, sépia, contraste, desfoque e giro de matiz a uma foto e exporte o PNG com o CSS correspondente.
Filtros de imagem funciona inteiramente no seu navegador. Sua foto é processada no dispositivo e nunca enviada.
Abrir o Otimizador de imagens
Sobre Image Filters
O canvas entende a mesma gramática de filtros do CSS, o que torna esta ferramenta especialmente honesta: a prévia, o PNG exportado e a declaração CSS copiável vêm de uma única cadeia de filtros e não podem divergir. Dez predefinições cobrem o básico — preto e branco, vintage, noir, desbotado — e abaixo há nove controles para o resto. Só aparecem na saída os controles que você move, então o CSS fica curto o bastante para colar em uma folha de estilos.
Recursos
- Brilho, contraste, saturação, tons de cinza, sépia, inverter, matiz, desfoque e opacidade
- Dez predefinições, de preto e branco a noir
- Prévia ao vivo em qualidade total
- Declaração CSS copiável idêntica à exportação
- Filtros aplicados na resolução completa da imagem
- Tudo funciona no seu navegador
Como usar Image Filters
- Solte uma imagem na ferramenta
- Toque em uma predefinição ou mova os controles
- Confira a prévia em resolução total
- Baixe o PNG ou copie o CSS para a web
Exemplo
Entrada
Black & white preset
Saída
filter: contrast(110%) grayscale(100%);
A mesma cadeia controla a exportação do canvas e o CSS copiado.
Erros comuns e solução de problemas
- O arquivo baixado é maior que o original. — A exportação é PNG, sem perda e bem mais pesada que um JPEG. Passe o resultado por um otimizador se o tamanho importa mais que a fidelidade exata.
- O CSS parece diferente no navegador e na exportação. — Verifique se um elemento pai já tem filtro: filtros CSS se acumulam na árvore. O PNG exportado já tem o filtro embutido.
- Um desfoque forte fica lento em uma foto grande. — O desfoque é o único filtro cujo custo cresce com o raio e com o tamanho. Reduza o raio ou redimensione a imagem antes.
Perguntas frequentes
- Como deixo uma imagem em preto e branco?
- Use a predefinição de preto e branco ou leve o controle de tons de cinza a 100%. Um pouco de contraste, em torno de 110%, evita que a foto fique chapada.
- Aplicar filtros reduz a qualidade?
- O filtro trabalha em resolução total e a exportação é PNG sem perda, então nada é descartado. A única perda vem do original, se já era um JPEG comprimido.
- Posso usar os mesmos filtros em CSS no meu site?
- Sim, é para isso que serve a declaração copiável. Aplicá-la a uma tag <img> dá resultado idêntico sem enviar uma segunda cópia da imagem.
- O que o giro de matiz faz exatamente?
- Desloca todas as cores ao redor do círculo cromático pelos graus indicados, sem alterar brilho e saturação. Giros pequenos esquentam ou esfriam a foto.
Ferramentas relacionadas
Todas as ferramentas de ArrayKit