Compresor de recursos de React Native

• Generación instantánea de variantes @1x @2x @3x: genera las tres variantes de densidad de React Native desde una sola imagen original en segundos, todo en tu navegador. El compresor reduce tu original @3x a @2x y @1x con interpolación Canvas de alta calidad, sin subida a servidor y sin esperas.
• Compresor de recursos de React Native online seguro: tus imágenes nunca salen de tu dispositivo. El compresor funciona enteramente en tu navegador: sin subidas a servidores, sin transmisión de datos y 100 % privado. Seguro para iconos de apps propietarias, pantallas de bienvenida y recursos de React Native en producción.
• Procesa varias imágenes a la vez por lotes: sube varias imágenes simultáneamente y genera variantes de densidad para todas en una sola pasada. Todos los archivos de salida se empaquetan en un ZIP listo para usar con la convención de nombres correcta de React Native: image.png, [email protected], [email protected].
• 100 % gratis para siempre: el compresor de recursos de React Native es completamente gratis, sin registro, sin plan premium, sin límites de tamaño de archivo y sin anuncios. Genera variantes de densidad de recursos de React Native ilimitadas a coste cero, para siempre.

• Generación de iconos de app para todas las densidades de pantalla: genera las variantes @1x, @2x y @3x de los iconos de tu app de React Native en un solo paso. El compresor garantiza que tus iconos se vean nítidos en todos los dispositivos, desde pantallas Android de baja densidad hasta pantallas Retina de iPhone de alta densidad, sin redimensionar a mano en Photoshop o Figma.
• Optimización de pantallas de bienvenida e imágenes de onboarding: comprime y redimensiona pantallas de bienvenida e ilustraciones de onboarding a las tres variantes de densidad. El compresor reduce el tamaño de archivo manteniendo la calidad visual, lo que ayuda a que tu app cargue más rápido y reduce el tamaño total del paquete para los envíos a App Store y Play Store.
• Preparación de recursos de UI e ilustraciones: prepara ilustraciones de UI, imágenes de fondo y recursos decorativos para pantallas de React Native. El compresor genera variantes de densidad con el nombre correcto que React Native selecciona automáticamente en tiempo de ejecución: sin cambios de código, solo tienes que colocar los archivos en tu directorio de assets.
• Proyectos de Expo y React Native CLI: funciona sin problemas tanto con Expo como con proyectos de React Native CLI puro. El compresor genera archivos siguiendo la convención de nombres estándar de React Native (image.png, [email protected], [email protected]) que tanto Expo como el bundler Metro reconocen automáticamente.
• Entrega de diseño y exportación de recursos: convierte las exportaciones de diseño de Figma, Sketch o Adobe XD en variantes de densidad listas para React Native. El compresor acepta cualquier exportación PNG, JPEG o WebP y produce los tres archivos de densidad en un ZIP, listos para entregar a los desarrolladores o colocar directamente en el proyecto.
• Preparación para el envío a App Store y Play Store: reduce el tamaño del paquete de tu app de React Native antes de enviarla a App Store y Play Store comprimiendo todos los recursos de imagen. El compresor aplica compresión de calidad a cada variante de densidad, lo que te ayuda a cumplir los límites de tamaño y a mejorar las tasas de conversión de descarga.

React Native usa un sistema de densidad de píxeles para servir la resolución de imagen correcta en cada pantalla. Las tres densidades estándar son @1x (resolución base, ~1 píxel CSS = 1 píxel de dispositivo), @2x (Retina / alta densidad estándar, 2 píxeles de dispositivo por píxel CSS) y @3x (pantallas de iPhone y Android insignia de alta densidad, 3 píxeles de dispositivo por píxel CSS). Cuando referencias una imagen con require('./image.png'), React Native selecciona automáticamente la variante de densidad correcta en tiempo de ejecución según la densidad de pantalla del dispositivo. Nuestro compresor de recursos de React Native genera las tres variantes desde una sola imagen original, con el nombre correcto y comprimidas.

1. 1 Sube tu imagen original: arrastra y suelta una imagen PNG, JPEG, WebP, GIF o BMP. Usa tu recurso de mayor resolución como original, idealmente la versión @3x o una exportación de diseño a 3× el tamaño de visualización previsto. El archivo se carga en tu navegador: no se envía ningún dato a ningún servidor.
2. 2 Elige formato de salida, calidad y variantes de densidad: selecciona PNG (recomendado para iconos y recursos con transparencia) o JPEG (más pequeño para fotos). Elige la calidad JPEG si corresponde. Selecciona qué variantes de densidad generar: las tres, solo @2x y @3x, o solo @3x. El procesamiento se ejecuta enteramente en tu navegador con la API Canvas.
3. 3 Descarga y añade a tu proyecto: todas las variantes de densidad se empaquetan en un archivo ZIP. Extráelo y coloca los tres archivos en el mismo directorio de tu proyecto de React Native. Referencia el recurso con require('./image.png'): React Native se encarga del resto automáticamente.

• Variante @1x (image.png): la resolución base, un tercio de las dimensiones de la imagen original. Se usa en pantallas de baja densidad y como respaldo. Normalmente es el archivo más pequeño de las tres variantes.
• Variante @2x ([email protected]): dos tercios de las dimensiones de la imagen original. Se usa en pantallas Retina estándar (la mayoría de iPhones y dispositivos Android de gama media). Es la variante que más se sirve en la práctica.
• Variante @3x ([email protected]): las dimensiones completas de la imagen original. Se usa en dispositivos insignia de alta densidad (iPhone Pro, Android de gama alta). Es el archivo más grande, pero ofrece el renderizado más nítido en las pantallas compatibles.
• Compresión aplicada: la salida PNG elimina metadatos y se recodifica sin pérdidas. La salida JPEG aplica el nivel de calidad seleccionado (60-90 %) para reducir aún más el tamaño. Se usa reducción de escala Canvas de alta calidad (imageSmoothingQuality: 'high') en todas las variantes.

El bundler Metro de React Native usa una convención de nombres concreta para identificar las variantes de densidad: image.png para @1x, [email protected] para @2x e [email protected] para @3x. Los tres archivos deben estar en el mismo directorio. El compresor de recursos de React Native genera archivos exactamente con esta convención, sin necesidad de renombrar. Funciona tanto con Expo (flujo gestionado y bare) como con proyectos de React Native CLI puro.