1---
2title: Use Compressed Images in Lists
3impact: HIGH
4impactDescription: faster load times, less memory
5tags: lists, images, performance, optimization
6---
7 
8## Use Compressed Images in Lists
9 
10Always load compressed, appropriately-sized images in lists. Full-resolution
11images consume excessive memory and cause scroll jank. Request thumbnails from
12your server or use an image CDN with resize parameters.
13 
14**Incorrect (full-resolution images):**
15 
16```tsx
17function ProductItem({ product }: { product: Product }) {
18  return (
19    <View>
20      {/* 4000x3000 image loaded for a 100x100 thumbnail */}
21      <Image
22        source={{ uri: product.imageUrl }}
23        style={{ width: 100, height: 100 }}
24      />
25      <Text>{product.name}</Text>
26    </View>
27  )
28}
29```
30 
31**Correct (request appropriately-sized image):**
32 
33```tsx
34function ProductItem({ product }: { product: Product }) {
35  // Request a 200x200 image (2x for retina)
36  const thumbnailUrl = `${product.imageUrl}?w=200&h=200&fit=cover`
37 
38  return (
39    <View>
40      <Image
41        source={{ uri: thumbnailUrl }}
42        style={{ width: 100, height: 100 }}
43        contentFit='cover'
44      />
45      <Text>{product.name}</Text>
46    </View>
47  )
48}
49```
50 
51Use an optimized image component with built-in caching and placeholder support,
52such as `expo-image` or `SolitoImage` (which uses `expo-image` under the hood).
53Request images at 2x the display size for retina screens.
54