Responsive images are critical for page performance and they’re made easy with
the CldImage component.
The CldImage component takes advantage of responsive images generated using
the Unpic Image component
which allows you to simply specify the sizes you want and the component
handles the rest.
Using the sizes prop, you can configure exactly the sizes you need for your
application, such as:
This would give you roughly full width images on mobile, a 2-column layout on
tablets, and 3-column layout on desktop views.
Responsive Images & CldImage
The difference with the CldImage component is that it utilizes Cloudinary tech
in order to provide the responsive sizing.
In the example above, the output would look like:
Where the image is automatically generated on the fly with Cloudinary by passing
in a URL parameter of w_<width>.
Upscaling Images
By default, the CldImage component uses the limit crop mode which explicitly
prevents Cloudinary from upscaling an image if the size is greater than the original
and instead, opting for the browser to resize the image on its behalf.
To allow Cloudinary to upscale the image and potentially produce blurry images,
you can set the crop mode to scale.
Cropping & Resizing
Part of the benefit of using Cloudinary is access to dynamic cropping and
resizing modes.
In an example such as:
Each image will be cropped to a 1:1 ratio represented by the width and height provided.
As the underlaying Unpic Image component generates an image for each responsive size,
Cloudinary will use those sizes when building the URL, for example:
And so on…
Dynamic Cropping Modes
While some cropping modes will “just work” with responsive sizing, others won’t.
For instance, the crop mode of thumb will dynamically crop an image based on its
size and contents, meaning the resulting crop of a 256x256 image may be different
than a 640x640 image.
The resulting transformations may look like:
This produces inconsistent results depending on the size of the device, which isn’t
a great experience.
To help give visitors that great experience, we can crop our image in two stages
opting to crop an image before any transformations are made, then allowing the
responsive sizing to resize the result.
The resulting transformations may look like:
By using object-syntax for the crop prop and setting source to true, we
are specifying that we want the crop transformation to be applied to the
source image.