Compressor de recursos do React Native

• Geração instantânea de variantes @1x @2x @3x: gere as três variantes de densidade do React Native a partir de uma única imagem de origem em segundos - inteiramente no navegador. O compressor reduz sua origem @3x para @2x e @1x com interpolação Canvas de alta qualidade, sem upload para servidor e sem espera.
• Compressor de recursos do React Native online seguro: suas imagens nunca saem do seu dispositivo. O compressor roda inteiramente no navegador - sem uploads para servidores, sem transmissão de dados e 100 % privado. Seguro para ícones de apps proprietárias, splash screens e recursos do React Native em produção.
• Processe várias imagens de uma vez em lote: envie várias imagens simultaneamente e gere variantes de densidade para todas em uma única passagem. Todos os arquivos de saída são empacotados em um ZIP pronto para usar, com a convenção de nomes correta do React Native: image.png, [email protected], [email protected].
• 100 % grátis para sempre: o compressor de recursos do React Native é completamente grátis, sem cadastro, sem plano premium, sem limites de tamanho de arquivo e sem anúncios. Gere variantes de densidade de recursos do React Native ilimitadas a custo zero, para sempre.

• Geração de ícones de app para todas as densidades de tela: gere as variantes @1x, @2x e @3x dos ícones do seu app React Native em uma só etapa. O compressor garante que seus ícones fiquem nítidos em todos os dispositivos - de telas Android de baixa densidade a telas Retina de iPhone de alta densidade - sem redimensionar manualmente no Photoshop ou Figma.
• Otimização de splash screens e imagens de onboarding: comprima e redimensione splash screens e ilustrações de onboarding nas três variantes de densidade. O compressor reduz o tamanho dos arquivos mantendo a qualidade visual, o que ajuda seu app a carregar mais rápido e reduz o tamanho total do pacote para envios à App Store e à Play Store.
• Preparação de recursos de UI e ilustrações: prepare ilustrações de UI, imagens de fundo e recursos decorativos para telas do React Native. O compressor gera variantes de densidade com os nomes corretos que o React Native seleciona automaticamente em tempo de execução - sem mudanças de código, basta colocar os arquivos no diretório de assets.
• Projetos Expo e React Native CLI: funciona perfeitamente com o Expo e com projetos de React Native CLI puro. O compressor gera arquivos seguindo a convenção de nomes padrão do React Native (image.png, [email protected], [email protected]) que tanto o Expo quanto o bundler Metro reconhecem automaticamente.
• Entrega de design e exportação de recursos: converta exportações de design do Figma, Sketch ou Adobe XD em variantes de densidade prontas para o React Native. O compressor aceita qualquer exportação PNG, JPEG ou WebP e produz os três arquivos de densidade em um ZIP - prontos para entregar aos desenvolvedores ou colocar direto no projeto.
• Preparação para envio à App Store e Play Store: reduza o tamanho do pacote do seu app React Native antes do envio à App Store e à Play Store comprimindo todos os recursos de imagem. O compressor aplica compressão de qualidade a cada variante de densidade, ajudando você a respeitar os limites de tamanho e a melhorar as taxas de conversão de download.

O React Native usa um sistema de densidade de pixels para servir a resolução de imagem correta em cada tela. As três densidades padrão são @1x (resolução base, ~1 pixel CSS = 1 pixel do dispositivo), @2x (Retina / alta densidade padrão, 2 pixels do dispositivo por pixel CSS) e @3x (telas de iPhone e Android topo de linha, 3 pixels do dispositivo por pixel CSS). Quando você referencia uma imagem com require('./image.png'), o React Native seleciona automaticamente a variante de densidade correta em tempo de execução, com base na densidade de tela do dispositivo. Nosso compressor de recursos do React Native gera as três variantes a partir de uma única imagem de origem, com os nomes corretos e comprimidas.

1. 1 Envie sua imagem de origem: arraste e solte uma imagem PNG, JPEG, WebP, GIF ou BMP. Use seu recurso de maior resolução como origem - idealmente a versão @3x ou uma exportação de design a 3× o tamanho de exibição pretendido. O arquivo é carregado no navegador - nenhum dado é enviado a servidor algum.
2. 2 Escolha formato de saída, qualidade e variantes de densidade: selecione PNG (recomendado para ícones e recursos com transparência) ou JPEG (mais leve para fotos). Escolha a qualidade JPEG, se aplicável. Selecione quais variantes de densidade gerar - as três, apenas @2x e @3x, ou apenas @3x. O processamento roda inteiramente no navegador usando a API Canvas.
3. 3 Baixe e adicione ao seu projeto: todas as variantes de densidade são empacotadas em um arquivo ZIP. Extraia e coloque os três arquivos no mesmo diretório do seu projeto React Native. Referencie o recurso com require('./image.png') - o React Native cuida do resto automaticamente.

• Variante @1x (image.png): a resolução base - um terço das dimensões da imagem de origem. Usada em telas de baixa densidade e como fallback. Normalmente o menor arquivo das três variantes.
• Variante @2x ([email protected]): dois terços das dimensões da imagem de origem. Usada em telas Retina padrão (a maioria dos iPhones e dispositivos Android intermediários). É a variante mais servida na prática.
• Variante @3x ([email protected]): as dimensões completas da imagem de origem. Usada em dispositivos topo de linha de alta densidade (iPhone Pro, Android de alto desempenho). Maior tamanho de arquivo, mas renderização mais nítida nas telas compatíveis.
• Compressão aplicada: a saída PNG remove metadados e é recodificada sem perdas. A saída JPEG aplica o nível de qualidade selecionado (60-90 %) para redução adicional. É usada redução de escala Canvas de alta qualidade (imageSmoothingQuality: 'high') em todas as variantes.

O bundler Metro do React Native usa uma convenção de nomes específica para identificar as variantes de densidade: image.png para @1x, [email protected] para @2x e [email protected] para @3x. Os três arquivos precisam estar no mesmo diretório. O compressor de recursos do React Native gera arquivos exatamente com essa convenção - sem necessidade de renomear. Isso funciona tanto com o Expo (workflow gerenciado e bare) quanto com projetos de React Native CLI puro.