Blog / Announcements

Image Transformations — Master Responsive Design with Kentico Cloud


by Lukas Turek

Jun 28, 2018

Support for image transformation in Kentico Cloud is here. What is it all about and why should you care? Let's find out.

If you are already familiar with the headless approach, you will know that its main principle is to have a single source for your content and adjust it on the presentation layer to fit your application design. It is pretty straightforward as far as text is concerned. But how about images?

In most projects, you need to adjust images somehow. For a website, you need to optimize them for smaller screens, for other channels, you need to transform them to fit the context. What are typical situations? And how should you deal with them?  Well, so far, just by having multiple image variants uploaded in the asset library. However, these separate silos are calling out for a better solution... and it's here—transforming images on the fly via API. But before I give you some tips on the actual implementation, let's start with the motivation first.

Why Should You Transform Images?

There might be many reasons for displaying modified versions of a single image. Let's look at the most common cases by taking our Dancing Goat sample site as an example. As you can see, there is a header at the top and some articles below.

A Header Image for Different Screen Widths

You typically want the header image to fit the width of the window. Often the case would not be just resizing both width and height, but rather cropping from left and right. In our example, we just crop the image to the center so the coffee beans stay visible, but it could be any object in the image you want to zoom in on, such as a face. This cropping technique is usually called art direction.

You set responsive break points to display the cutout with the main object zoomed in. When the threshold is hit, you serve the cropped version of the original image.

Image Thumbnail

Another common case is having a lower resolution variant of the image as a thumbnail. Looking at the sample project, there is a list of articles on the home page with a preview of the images. When you click the link, a detail with a high-resolution image appears.

<img alt="Article On Roasts" src="https://assets-us-01.kc-usercontent.com/975bf280-fd91-488c-994c-2f04416e5ee3/988caa85-d8fe-4c72-9b26-180d8822a14e/brazil.jpg?w=300&h=200" title="Article On Roasts" width="300" height="200">

Multiple Channels

So far we've been demonstrating the image transformations using a website as an example. But you might not truly appreciate the beauty of it until you start thinking omnichannel. When you are delivering images to different devices with different screen sizes, you usually create multiple layouts where the resizing and cropping take place. This is another example where the art direction would take place as you would, for example, display a whole landscape for the desktop application while choosing a detail of the image for the mobile app.

How to Do It

So far, we've covered the main requirements but haven't offered much information about the actual implementation. Let's look at it from more practical aspects.

Developers and Content Editors Working Together

Since the image transformation is done using the API, it is completely under the direction of the developer, and content contributors don't need to worry about it. However, developers need to be sure that content editors upload the appropriate image. Image size often matters,  for example, you might rely on a minimum width of the image to further transform it or some exact dimensions when using cropping. Also, you need to ensure that you get the right file format that can be manipulated via the API (these are png, gif, jpg, and webp).

For these reasons, image transformations in Kentico Cloud come with limitation settings for asset and rich text element in a content type. You can limit the file type to only adjustable images as well as limit the width and height.

Save Loading Time and Your Work

So are there other options for implementing multiple image variants? Definitely, yes. Content editors could upload different image variants directly to the asset library, but this creates an additional maintenance overhead for the future. You could also resize the image using just CSS, but the main motivation is usually to save the loading time and data for the user. Therefore, the right implementation matters as well. If you tried using CSS or JavaScript to dynamically change the source image, the original image would already be loaded. This is why HTML provides a srcset attribute.

<img
    alt="Professional Espresso Machine"
    class="article-tile-image"
    sizes="(min-width: 1120px) 540px, (max-width: 1120px) and (min-width: 768px) 736px, (max-width: 768px) and (min-width: 330px) 468px, 300px"
    src="https://assets-us-01.kc-usercontent.com/975bf280-fd91-488c-994c-2f04416e5ee3/e700596b-03b0-4cee-ac5c-9212762c027a/coffee-beverages-explained-1080px.jpg"
    srcset="https://assets-us-01.kc-usercontent.com/975bf280-fd91-488c-994c-2f04416e5ee3/e700596b-03b0-4cee-ac5c-9212762c027a/coffee-beverages-explained-1080px.jpg?w=200 200w,
            https://assets-us-01.kc-usercontent.com/975bf280-fd91-488c-994c-2f04416e5ee3/e700596b-03b0-4cee-ac5c-9212762c027a/coffee-beverages-explained-1080px.jpg?w=400 400w,
            https://assets-us-01.kc-usercontent.com/975bf280-fd91-488c-994c-2f04416e5ee3/e700596b-03b0-4cee-ac5c-9212762c027a/coffee-beverages-explained-1080px.jpg?w=600 600w,
            https://assets-us-01.kc-usercontent.com/975bf280-fd91-488c-994c-2f04416e5ee3/e700596b-03b0-4cee-ac5c-9212762c027a/coffee-beverages-explained-1080px.jpg?w=800 800w,
            https://assets-us-01.kc-usercontent.com/975bf280-fd91-488c-994c-2f04416e5ee3/e700596b-03b0-4cee-ac5c-9212762c027a/coffee-beverages-explained-1080px.jpg?w=1000 1000w"
    title="Professional Espresso Machine"
>

There Is More...

In this blog post, we have covered mainly responsive design in terms of image resizing and cropping. Another useful feature is setting a device pixel ratio (DPR) to improve the user experience for displays with a higher density of pixels, such as retina displays. Using our API, you can also change the quality of the image or change the output format. See our documentation to learn more about all the supported features.

I believe you will have fun playing with image transformation and that it will help you to build projects with optimized page load time and bandwidth. But we haven't stopped looking ahead, so in the future, there might be even more transformations available such as smart cropping or other automation.

Now it's your turn. Try it, and share your experience with us!