Compressor de sprites de imagem

• Compressão de sprites de imagem instantânea no navegador: comprima folhas de sprites CSS instantaneamente no seu navegador usando quantização de paleta de cores por corte de mediana: sem upload para servidor, sem processamento na nuvem e sem espera. O compressor de sprites de imagem processa seu PNG inteiramente no seu dispositivo em segundos.
• Compressor de sprites de imagem online seguro: sua folha de sprites nunca sai do seu dispositivo. O compressor de sprites de imagem roda inteiramente no seu navegador: sem upload para servidores, sem transmissão de dados e 100% privado. Seguro para recursos de interface proprietários, conjuntos de ícones e folhas de sprites de produção.
• 5 opções de tamanho de paleta para controle preciso: o compressor de sprites de imagem oferece cinco tamanhos de paleta, de 16 a 256 cores, para você escolher o equilíbrio certo entre tamanho de arquivo e qualidade visual. Folhas de sprites CSS com ícones planos costumam ficar idênticas com 64-128 cores e redução de 30 a 60%.
• Compressor de sprites de imagem online sem instalação: comprima folhas de sprites CSS diretamente no navegador, sem download de software, sem plugins e sem conta. Funciona em qualquer navegador moderno no Windows, macOS e Linux.

• Otimização de desempenho de sites legados: comprima as folhas de sprites CSS usadas em sites antigos para reduzir o tamanho do payload das requisições HTTP. O compressor de sprites de imagem reduz o tamanho do PNG de sprites em 30 a 60% com quantização de paleta, melhorando os tempos de carregamento sem alterar o layout dos sprites nem os valores CSS background-position.
• Otimização de sprites de temas WordPress: comprima as folhas de sprites usadas em temas e plugins WordPress para melhorar as pontuações do PageSpeed Insights. O compressor de sprites de imagem funciona com qualquer sprite PNG: envie o sprite, escolha um tamanho de paleta e substitua o arquivo original na pasta de assets do seu tema.
• Compressão de sprites de ícones de temas Shopify: reduza o tamanho das folhas de sprites de ícones usadas em temas Shopify para melhorar a velocidade de carregamento da loja. O compressor de sprites de imagem é ideal para sprites de ícones de cores planas: 64 cores geralmente produzem uma saída visualmente idêntica com um arquivo 40 a 50% menor.
• Otimização de recursos de bibliotecas de componentes de UI: comprima as folhas de sprites de ícones usadas em bibliotecas de componentes e design systems antes de publicar no npm. O compressor de sprites de imagem reduz o tamanho de download dos recursos de imagem do seu pacote sem exigir um pipeline de processamento de imagens no build.
• Compressão de folhas de sprites para jogos: comprima folhas de sprites para jogos baseados em navegador e aplicações interativas para reduzir o tempo de carregamento inicial. O compressor de sprites de imagem preserva a transparência e as dimensões da imagem: o sprite comprimido funciona como substituto direto do original.
• Migração de configurações de sprites legadas: comprima folhas de sprites CSS existentes como parte de uma auditoria de desempenho antes de migrar para ícones SVG ou fontes de ícones. O compressor de sprites de imagem ajuda você a quantificar a economia de tamanho alcançável com a abordagem atual de sprites em comparação com o esforço de uma migração completa.

Uma folha de sprites CSS é uma única imagem PNG que contém várias imagens menores (ícones, botões, elementos de interface) organizadas em uma grade. As regras CSS background-position exibem cada sprite individualmente deslocando a imagem de fundo. Folhas de sprites reduzem requisições HTTP, mas podem ser arquivos PNG grandes. Nosso compressor de sprites de imagem reduz o tamanho da folha de sprites usando quantização de paleta de cores por corte de mediana: um algoritmo que reduz o número de cores únicas da imagem de milhões para uma paleta fixa (16-256 cores) e então recodifica o PNG. É a mesma técnica usada por ferramentas como pngquant e ImageOptim, implementada inteiramente no seu navegador com a API Canvas.

1. 1. Envie sua folha de sprites: arraste e solte sua folha de sprites PNG na zona de upload ou clique para procurar. A imagem é carregada na API Canvas do navegador: nenhum dado é enviado para nenhum servidor. Os formatos PNG, GIF, BMP e WebP são suportados.
2. 2. Escolha um tamanho de paleta e clique em "Comprimir sprite": o compressor amostra pixels da imagem, constrói uma paleta de cores ideal com quantização por corte de mediana, mapeia cada pixel para a cor de paleta mais próxima e recodifica o resultado como PNG. O processamento roda inteiramente no seu navegador.
3. 3. Baixe o sprite comprimido: o PNG comprimido é baixado automaticamente. O painel de resultados mostra o tamanho original, o tamanho comprimido e a porcentagem de redução. Use "Baixar novamente" se necessário. Substitua o arquivo de sprite original no seu projeto: nenhuma alteração no CSS é necessária.

• Paleta de cores: o número de cores únicas é reduzido de milhões (PNG de 24 bits) para o tamanho de paleta selecionado (16-256 cores). Cada pixel é mapeado para a cor de paleta mais próxima usando distância euclidiana no espaço RGB.
• Codificação PNG: o PNG recodificado usa o modo de cor indexada (baseado em paleta) em vez de cor verdadeira, o que comprime muito melhor com DEFLATE: o algoritmo de compressão usado dentro dos arquivos PNG.
• Transparência preservada: os valores do canal alfa são preservados durante a quantização: pixels transparentes e semitransparentes do sprite original são mantidos na saída comprimida.
• Dimensões inalteradas: a largura e a altura da imagem são idênticas às do original: o sprite comprimido é um substituto direto que funciona com as regras CSS background-position existentes sem nenhuma alteração.

Para sprites de ícones de cores planas (ícones de interface, de navegação, de redes sociais), 64 cores geralmente produzem uma saída visualmente idêntica com um arquivo 40 a 50% menor. Para sprites com degradês ou baseados em fotos, use 128 ou 256 cores para evitar faixas de cor visíveis. Se você notar artefatos de cor na saída comprimida, aumente o tamanho da paleta. O compressor de sprites de imagem mostra a economia exata em bytes para cada tamanho de paleta, para você encontrar o ajuste ideal para a sua folha de sprites específica.