Img component is capable to render an image asynchronously, with a low resolution blurry placeholder. Resolving to better image, can happen on load, on intersect or on demand.
However another important benefit, is the smart sizes resolver. Once the placeholder is requested to be resolved with a better image, the requested size is chosen by computing the current size on screen, and choosing final size from a known range.
By default, the resolved image will be requested immediately after page load/paint
The sync property skips the placeholder and renders the good resolution directly. It's only recommended on those cases where the image is relatively small and does not change ratio or size in between breakpoints.
Resolve on intersect will subscribe the image to be observed, and the resolve action will be triggered once the image is close to enter on viewport.
Images can have dynamic ratios across different breakpoints.
Images can be shown before any image source has been defined yet.