Asset Density Handling for Images
In this lesson, you will learn how to optimize image performance by serving the correct file size based on the specific pixel density of a user's device screen.
The Problem: One Size Does Not Fit All
Mobile devices come in varying screen densities. A "high-density" screen (like a modern iPhone) has many more physical pixels packed into the same space compared to a "low-density" screen. If you only provide a single, small image file, it will look pixelated on high-resolution displays. If you only provide one huge image, you waste memory and bandwidth on smaller devices, leading to slower app performance.
The Solution: React Native Asset Suffixes
React Native provides a built-in mechanism to handle this automatically using specific filename suffixes. Instead of manually checking the screen density in your code, you simply provide multiple versions of the same image in your project folder, using the @2x and @3x suffixes.
When you reference an image, React Native detects the device's pixel ratio and automatically selects the most appropriate file.
For example, imagine you have a logo called logo.png. You would place these files in your assets folder:
logo.png(The base version, used for 1x displays)logo@2x.png(Used for devices with 2x pixel density)logo@3x.png(Used for devices with 3x pixel density)
In your code, you don’t need to worry about the suffix:
<Image source={require('./assets/logo.png')} />
Why This Matters
When the app runs on a high-density device, React Native looks for the corresponding @3x file. Because you provided it, the OS displays the high-resolution version, ensuring the image looks crisp. On a lower-density device, the app fetches the standard logo.png, which keeps the app's memory usage lean and reduces the download size for your users.
By following this naming convention, you ensure your app looks sharp on every screen size while maintaining optimal performance.
Key Takeaway: Use @2x and @3x filename suffixes to allow React Native to automatically serve the highest-quality image version tailored to the specific pixel density of the user's hardware.