Image optimization in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is image optimization in mobile apps?

Image optimization means making images smaller in file size without losing much quality. This helps apps load faster and use less data.

beginner

Why should you use resizeMode in React Native's Image component?

resizeMode controls how the image fits inside its container. Using it properly avoids stretching or pixelation, improving appearance and performance.

intermediate

What is the benefit of using Image.prefetch() in React Native?

Image.prefetch() loads images into cache before they are shown. This makes images appear faster when needed, improving user experience.

intermediate

How does using different image formats affect optimization?

Formats like WebP or HEIC offer better compression than JPEG or PNG. Using modern formats reduces file size and speeds up loading.

beginner

What is lazy loading of images?

Lazy loading means loading images only when they are about to appear on screen. This saves memory and speeds up app start.

Which React Native property helps control how an image fits its container?

A resizeMode

B imageStyle

C source

D cacheControl

resizeMode sets how the image scales or stretches inside its container.

What does Image.prefetch() do?

A Compresses the image file

B Loads image into cache before display

C Changes image format

D Removes image from memory

Prefetching loads images early to make them appear faster when needed.

Which image format is known for better compression and smaller file size?

A JPEG

B PNG

C WebP

D BMP

WebP offers better compression than JPEG or PNG, reducing file size.

What is the main advantage of lazy loading images?

A Caches all images at once

B Increases image quality

C Changes image format

D Improves app startup speed

Lazy loading delays image loading until needed, speeding up app start.

Which of these is NOT a good practice for image optimization?

A Loading all images at app start

B Using modern image formats

C Using appropriate image sizes

D Prefetching images before display

Loading all images at start wastes memory and slows app launch.

Explain how you would optimize images in a React Native app to improve performance and user experience.

Think about loading speed, memory use, and image quality.

Describe the benefits of using Image.prefetch() and lazy loading in mobile apps.

Focus on how these techniques affect app speed and resource use.