Compresseur d'assets React Native

• Génération instantanée des variantes @1x @2x @3x : générez les trois variantes de densité React Native à partir d'une seule image source en quelques secondes, entièrement dans votre navigateur. Le compresseur réduit votre source @3x en @2x et @1x avec une interpolation Canvas de haute qualité, sans envoi au serveur et sans attente.
• Compresseur d'assets React Native en ligne sécurisé : vos images ne quittent jamais votre appareil. Le compresseur s'exécute entièrement dans votre navigateur : aucun envoi au serveur, aucune transmission de données, 100 % privé. Sûr pour les icônes d'apps propriétaires, les écrans de démarrage et les assets React Native de production.
• Traitement par lots de plusieurs images : envoyez plusieurs images simultanément et générez les variantes de densité pour toutes en une seule passe. Tous les fichiers de sortie sont regroupés dans une archive ZIP prête à l'emploi respectant la convention de nommage React Native : image.png, [email protected], [email protected].
• 100 % gratuit pour toujours : le compresseur d'assets React Native est entièrement gratuit, sans inscription, sans offre premium, sans limite de taille de fichier et sans publicité. Générez un nombre illimité de variantes de densité d'assets React Native, gratuitement et pour toujours.

• Génération d'icônes d'app pour toutes les densités d'écran : générez les variantes @1x, @2x et @3x de vos icônes d'app React Native en une seule étape. Le compresseur garantit que vos icônes restent nettes sur tous les appareils, des écrans Android basse densité aux écrans Retina d'iPhone haute densité, sans redimensionnement manuel dans Photoshop ou Figma.
• Optimisation des écrans de démarrage et des images d'onboarding : compressez et redimensionnez les écrans de démarrage et les illustrations d'onboarding pour les trois variantes de densité. Le compresseur réduit la taille des fichiers tout en préservant la qualité visuelle, ce qui accélère le chargement de votre app et réduit la taille totale du bundle pour les soumissions à l'App Store et au Play Store.
• Préparation d'assets d'interface et d'illustrations : préparez les illustrations d'interface, les images de fond et les assets décoratifs de vos écrans React Native. Le compresseur génère des variantes de densité correctement nommées que React Native sélectionne automatiquement à l'exécution : aucun changement de code, il suffit de déposer les fichiers dans votre dossier d'assets.
• Projets Expo et React Native CLI : fonctionne parfaitement avec Expo comme avec les projets React Native CLI bruts. Le compresseur produit des fichiers suivant la convention de nommage standard de React Native (image.png, [email protected], [email protected]) que le bundler Metro d'Expo comme de React Native reconnaît automatiquement.
• Passation de design et export d'assets : convertissez vos exports de design Figma, Sketch ou Adobe XD en variantes de densité prêtes pour React Native. Le compresseur accepte tout export PNG, JPEG ou WebP et produit les trois fichiers de densité dans un ZIP, prêts à être transmis aux développeurs ou déposés directement dans le projet.
• Préparation des soumissions App Store et Play Store : réduisez la taille du bundle de votre app React Native avant la soumission à l'App Store et au Play Store en compressant tous les assets image. Le compresseur applique une compression de qualité à chaque variante de densité, ce qui vous aide à respecter les limites de taille et à améliorer les taux de conversion des téléchargements.

React Native utilise un système de densité de pixels pour servir la bonne résolution d'image sur chaque écran. Les trois densités standard sont @1x (résolution de base, ~1 pixel CSS = 1 pixel d'appareil), @2x (Retina / haute densité standard, 2 pixels d'appareil par pixel CSS) et @3x (écrans iPhone et Android haut de gamme haute densité, 3 pixels d'appareil par pixel CSS). Quand vous référencez une image avec require('./image.png'), React Native sélectionne automatiquement la bonne variante de densité à l'exécution selon la densité d'écran de l'appareil. Notre compresseur d'assets React Native génère les trois variantes à partir d'une seule image source, correctement nommées et compressées.

1. 1 Envoyez votre image source : glissez-déposez une image PNG, JPEG, WebP, GIF ou BMP. Utilisez votre asset de plus haute résolution comme source, idéalement la version @3x ou un export de design à 3× la taille d'affichage prévue. Le fichier est chargé dans votre navigateur : aucune donnée n'est envoyée à un serveur.
2. 2 Choisissez le format de sortie, la qualité et les variantes de densité : sélectionnez PNG (recommandé pour les icônes et les assets transparents) ou JPEG (plus léger pour les photos). Choisissez la qualité JPEG le cas échéant. Sélectionnez les variantes de densité à générer : les trois, uniquement @2x et @3x, ou uniquement @3x. Le traitement s'exécute entièrement dans votre navigateur via l'API Canvas.
3. 3 Téléchargez et ajoutez à votre projet : toutes les variantes de densité sont regroupées dans une archive ZIP. Extrayez-la et placez les trois fichiers dans le même dossier de votre projet React Native. Référencez l'asset avec require('./image.png') : React Native s'occupe automatiquement du reste.

• Variante @1x (image.png) : la résolution de base, soit un tiers des dimensions de l'image source. Utilisée sur les écrans basse densité et comme solution de repli. Généralement le plus petit fichier des trois variantes.
• Variante @2x ([email protected]) : deux tiers des dimensions de l'image source. Utilisée sur les écrans Retina standard (la plupart des iPhone et des appareils Android milieu de gamme). La variante la plus servie en pratique.
• Variante @3x ([email protected]) : les dimensions complètes de l'image source. Utilisée sur les appareils haut de gamme haute densité (iPhone Pro, Android haut de gamme). Fichier le plus volumineux, mais rendu le plus net sur les écrans compatibles.
• Compression appliquée : la sortie PNG supprime les métadonnées et est réencodée sans perte. La sortie JPEG applique le niveau de qualité sélectionné (60-90 %) pour réduire encore la taille. Une réduction d'échelle Canvas de haute qualité (imageSmoothingQuality : 'high') est utilisée pour toutes les variantes.

Le bundler Metro de React Native utilise une convention de nommage précise pour identifier les variantes de densité : image.png pour @1x, [email protected] pour @2x et [email protected] pour @3x. Les trois fichiers doivent se trouver dans le même dossier. Le compresseur d'assets React Native produit des fichiers respectant exactement cette convention : aucun renommage nécessaire. Cela fonctionne avec Expo (workflow géré et bare) comme avec les projets React Native CLI bruts.