Skip to main content

Image Rendering

There are a number of techniques used to render images on the CMS app.

  1. next/image component
  2. Cloudinary image transformations
  3. HTML Picture element
  4. BlurHash style rendering

HTML Picture Element​

In instances where there are either different images or different size images on small screens compared to large screens, then the <picture> element will be used instead of the next/image - next/image is the default rendering technique.

BlurHash style rendering​

This describes the technique of requesting a flat color or very low resolution image that can be presented to a user on initial page render before the full resolution images have loaded in.

More detail on how to use this can be found in the readme of the CMS app.