Les applications React Native affichent des images (locales et distantes) et regroupent des ressources (polices, etc.). Comprendre comment charger les images efficacement, gérer différentes résolutions et optimiser les performances des images est important pour une bonne UX et des performances.
{ } ;
Les images locales utilisent require (regroupées) ; les images distantes utilisent un uri. Les images nécessitent des dimensions explicites (largeur/hauteur) — contrairement au web, elles ne se redimensionnent pas automatiquement à partir du fichier.
→ RESOLUTION: provide @2x and @3x variants (logo.png, [email protected], [email protected]) → RN
picks the right one per device density (crisp on all screens)
→ resizeMode: cover / contain / stretch / center → how the image fits its box
✓ Use APPROPRIATELY-SIZED images (don't load huge images into small views — wastes
memory/bandwidth)
✓ FastImage (react-native-fast-image) → better remote image performance + CACHING
(caches images so they don't re-download; smoother than the default Image for lists)
✓ Use the right FORMAT (WebP for smaller sizes); lazy-load; placeholders while loading
✓ Images are a common source of memory issues / jank in lists → optimize them
Comprendre comment gérer les images et les ressources est précieux car la plupart des applications affichent des images, et le faire efficacement affecte à la fois l'UX et les performances, c'est donc une connaissance pratique utile.
Comprendre le chargement des images — les images locales via require (regroupées au moment de la compilation), les images distantes via un uri, et le point important que les images nécessitent des dimensions explicites dans React Native (contrairement au web, elles ne se redimensionnent pas automatiquement) — est nécessaire pour afficher n'importe quelle image.
Comprendre la gestion des résolutions (fournir des variantes @2x/@3x pour que React Native choisisse la bonne par densité d'appareil pour des images nettes sur tous les écrans) et resizeMode (comment les images s'adaptent à leur zone) est important pour les images qui s'affichent bien sur les densités d'écran diverses d'Android et iOS.
Most importantly, understanding image performance optimization is valuable because images are a common source of memory issues and jank (especially in lists): using appropriately-sized images (not loading huge images into small views, which wastes memory and bandwidth), using FastImage for better remote-image performance and caching (so images don't re-download and lists scroll smoothly — a significant improvement over the default Image for image-heavy lists), using efficient formats (WebP), and lazy-loading with placeholders.
Ces optimisations sont importantes car les applications riches en images (courantes — fils d'actualité, galeries, profils) peuvent souffrir de vrais problèmes de performance si les images ne sont pas gérées correctement.
Puisque la plupart des applications affichent des images et que les gérer correctement (chargement et dimensions corrects, variantes de résolution, et surtout optimisation des performances avec mise en cache et dimensionnement approprié) affecte à la fois l'UX (images nettes, qui se chargent en douceur) et les performances (en évitant les problèmes de mémoire et le jank), comprendre les images et les ressources dans React Native est une connaissance pratique et pertinente — importante pour le besoin courant d'afficher des images, où comprendre le chargement, la résolution, et surtout l'optimisation des performances (mise en cache, dimensionnement) est clé pour construire des applications riches en images lisses et polies.