How should you optimize images for UI performance without sacrificing quality?

• A. Use WebP/AVIF for images and SVG for icons; compress with progressive rendering; set dimensions; use responsive images with srcset; lazy-load offscreen.
• B. Use JPEG for everything and disable compression.
• C. Serve all images at full resolution and scale with CSS.
• D. Avoid using SVG icons because they are not scalable.

Answer: (A)

Optimizing images for UI performance hinges on choosing efficient formats and smart loading techniques so visuals stay crisp while keeping load times low. Modern formats like WebP or AVIF deliver smaller file sizes than traditional JPEG or PNG with comparable quality, especially for photographs, which helps pages render faster without visible loss. SVG is ideal for icons and simple graphics because it scales without losing sharpness and often files smaller than raster equivalents. Progressive rendering improves perceived performance by displaying a low-quality image quickly and refining it as more data arrives. Setting explicit dimensions prevents layout shifts, which keeps the user experience smooth as content loads. Responsive images with srcset (and sizes) ensure devices get appropriately sized images, reducing download sizes on mobile and high-DPI displays. Lazy-loading offscreen images defers work until they’re actually needed, speeding up the initial render.

Using a single older format for everything and disabling compression wastes bandwidth and degrades quality; serving full-resolution images and scaling them with CSS downloads unnecessarily large files and slows rendering; and avoiding SVG icons because they aren’t scalable is incorrect—SVGs are scalable and are a strong choice for crisp, lightweight icons.