Image and raw image components in Unity - Performance & Optimization

Performance: Image and raw image components

MEDIUM IMPACT

This affects how quickly images appear on screen and how smoothly the UI responds during interactions.

Displaying UI graphics efficiently

Unity

Use Image component for sprites and UI elements that use sprite atlases or compressed textures.

Image component uses Unity's optimized sprite batching and compression, reducing GPU cost.

📈 Performance GainReduces GPU load and improves frame rate stability.

Displaying UI graphics efficiently

Unity

Using RawImage for all UI elements regardless of texture type, e.g., RawImage with compressed sprite textures.

RawImage bypasses sprite optimizations and causes more GPU work and slower rendering.

📉 Performance CostIncreases GPU load and can cause frame drops on complex UIs.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Image component with sprite atlas	Minimal UI elements	None	Low GPU cost due to batching	[OK] Good
RawImage with uncompressed textures	More UI elements	None	High GPU cost, no batching	[X] Bad

Rendering Pipeline

Image components use sprite atlases and GPU batching to reduce draw calls, while RawImage renders raw textures directly, increasing GPU work.

→Texture Upload

→Draw Calls

→GPU Rasterization

⚠️ BottleneckGPU Rasterization due to unbatched draw calls with RawImage

Core Web Vital Affected

LCP

This affects how quickly images appear on screen and how smoothly the UI responds during interactions.

Optimization Tips

1Use Image component for UI sprites to leverage batching.

2Reserve RawImage for special cases needing raw texture display.

3Optimize textures with atlases and compression to improve LCP.

Performance Quiz - 3 Questions

Which component is better for optimized UI rendering in Unity?

A Image component using sprite atlases

B RawImage component with raw textures

C Using both interchangeably without consideration

D Neither affects performance

DevTools: Unity Profiler

How to check: Open Unity Profiler, select GPU module, and observe draw calls and GPU time when using Image vs RawImage components.

What to look for: Lower draw calls and GPU time indicate better performance with Image component.