Optimizing image with nz-image

optimized | unoptimized

Device pixel ratio: -
Viewport width: -px
Available screen width: -px

A dog staring at the cameraThe newborn puppiesA dog walking with its owner in the forestA cat looking into the distance

Automatically add <link rel="preload"> tags to make the browser load images in a higher priority.

By adding srcset attribute to HD displays(retina screens), the browser will automatically load image which has the most suitable pixel ratio of the device.

The component is friendly to image CDN providers, you can either use the built-in CDN loader or customize it.

Black and white photo of a kittenA cat with its tongue out lying on the bed
View source on GitHub