f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
54 lines
1.4 KiB
Markdown
54 lines
1.4 KiB
Markdown
---
|
|
title: Use Compressed Images in Lists
|
|
impact: HIGH
|
|
impactDescription: faster load times, less memory
|
|
tags: lists, images, performance, optimization
|
|
---
|
|
|
|
## Use Compressed Images in Lists
|
|
|
|
Always load compressed, appropriately-sized images in lists. Full-resolution
|
|
images consume excessive memory and cause scroll jank. Request thumbnails from
|
|
your server or use an image CDN with resize parameters.
|
|
|
|
**Incorrect (full-resolution images):**
|
|
|
|
```tsx
|
|
function ProductItem({ product }: { product: Product }) {
|
|
return (
|
|
<View>
|
|
{/* 4000x3000 image loaded for a 100x100 thumbnail */}
|
|
<Image
|
|
source={{ uri: product.imageUrl }}
|
|
style={{ width: 100, height: 100 }}
|
|
/>
|
|
<Text>{product.name}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
```
|
|
|
|
**Correct (request appropriately-sized image):**
|
|
|
|
```tsx
|
|
function ProductItem({ product }: { product: Product }) {
|
|
// Request a 200x200 image (2x for retina)
|
|
const thumbnailUrl = `${product.imageUrl}?w=200&h=200&fit=cover`
|
|
|
|
return (
|
|
<View>
|
|
<Image
|
|
source={{ uri: thumbnailUrl }}
|
|
style={{ width: 100, height: 100 }}
|
|
contentFit='cover'
|
|
/>
|
|
<Text>{product.name}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
```
|
|
|
|
Use an optimized image component with built-in caching and placeholder support,
|
|
such as `expo-image` or `SolitoImage` (which uses `expo-image` under the hood).
|
|
Request images at 2x the display size for retina screens.
|