1---
2title: Use expo-image for Optimized Images
3impact: HIGH
4impactDescription: memory efficiency, caching, blurhash placeholders, progressive loading
5tags: images, performance, expo-image, ui
6---
7 
8## Use expo-image for Optimized Images
9 
10Use `expo-image` instead of React Native's `Image`. It provides memory-efficient caching, blurhash placeholders, progressive loading, and better performance for lists.
11 
12**Incorrect (React Native Image):**
13 
14```tsx
15import { Image } from 'react-native'
16 
17function Avatar({ url }: { url: string }) {
18  return <Image source={{ uri: url }} style={styles.avatar} />
19}
20```
21 
22**Correct (expo-image):**
23 
24```tsx
25import { Image } from 'expo-image'
26 
27function Avatar({ url }: { url: string }) {
28  return <Image source={{ uri: url }} style={styles.avatar} />
29}
30```
31 
32**With blurhash placeholder:**
33 
34```tsx
35<Image
36  source={{ uri: url }}
37  placeholder={{ blurhash: 'LGF5]+Yk^6#M@-5c,1J5@[or[Q6.' }}
38  contentFit="cover"
39  transition={200}
40  style={styles.image}
41/>
42```
43 
44**With priority and caching:**
45 
46```tsx
47<Image
48  source={{ uri: url }}
49  priority="high"
50  cachePolicy="memory-disk"
51  style={styles.hero}
52/>
53```
54 
55**Key props:**
56 
57- `placeholder` — Blurhash or thumbnail while loading
58- `contentFit` — `cover`, `contain`, `fill`, `scale-down`
59- `transition` — Fade-in duration (ms)
60- `priority` — `low`, `normal`, `high`
61- `cachePolicy` — `memory`, `disk`, `memory-disk`, `none`
62- `recyclingKey` — Unique key for list recycling
63 
64For cross-platform (web + native), use `SolitoImage` from `solito/image` which uses `expo-image` under the hood.
65 
66Reference: [expo-image](https://docs.expo.dev/versions/latest/sdk/image/)
67