sunweb

Img

component lazy async image

Definition


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.

c-img

By default, the resolved image will be requested immediately after page load/paint


c-img sync

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.


c-img resolve-intersect

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.


c-img dynamic-ratios

Images can have dynamic ratios across different breakpoints.


c-img is-unresolved

Images can be shown before any image source has been defined yet.