Describe an image strategy for a media-heavy site such as a marketplace or social feed.

Treat images as an architecture concern, because they are usually the largest bytes on the page. The strategy has three parts: a pipeline, the markup, and perceived speed.

Pipeline:

• Users upload originals once.
• An image CDN (content delivery network) or image service resizes, crops and converts them on the fly. It produces AVIF or WebP with a fallback, and caches the results.
• URLs encode the width and quality, so the client can request exactly what it needs.

Markup:

• Use srcset and sizes, so each device downloads a suitable width.
• Set explicit width/height or aspect-ratio. This prevents layout shift, where content jumps as images load.
• Use loading="lazy" for images below the fold.
• Load the hero image, or the first feed image, eagerly with fetchpriority="high". It is often the LCP element. LCP (Largest Contentful Paint) is when the biggest image or text block appears.

Perceived speed: store a tiny blurred placeholder or a dominant colour with the image metadata. Then the grid looks complete instantly. The API returns the dimensions and placeholder data with each item.

In a framework, a component like next/image wraps most of this. But the API must provide dimensions for it to work well.