Performance has always been an important consideration with web development. It’s pretty much the first thing a user is going to reflect on while they twiddle their thumbs waiting for your page to load. Slow site = bad user experience. It also influences how your website is ranked by search engines. Slow site = poorly ranked site.
The Wrong Type of Image
Images on a web page can be a big contributor to slowing sites down—but, given we’re visual creatures, the solution isn’t to avoid using them - but rather to stop using the wrong ones. By "wrong" I don’t mean images that are too dark or out of focus, but rather, images that cause performance issues because they:
- Are dimensionally a lot bigger than the device they are being shown on
- Are unnecessarily large in file size, and eat up a lot of bandwidth
- Aren't in an ideal or supported format for the target device
The Right Type of Image
Looking at the list above, it's clear that one of the challenges presented by images is making sure they are optimized for the device they're being displayed on. Using just one image that you send to all devices—regardless of their screen size or bandwidth—is increasingly seen as poor practice. In an ideal world, images would be resized, cropped, re-formatted, art directed, etc. as required with the target device in mind.
HTML now supports markup that facilitates loading and displaying images targeted to devices or screen dimensions, such as the srcset attribute or the picture tag. These days, the challenge isn't how to display the image, but rather, how to create all the images you need in the first place. Thankfully, this is where image transformation in Kentico Cloud's Delivery API comes to the rescue.
Real-Time Image Transformation
Launched last month, this new feature lets you transform an image stored in Kentico Cloud into one or many new images in real-time. Better still, these transformed images are cached in Kentico Cloud. This improves performance the next time that transformed image is requested. So how many ways can images on Kentico Cloud now be transformed? The answer is many!
Kitten Demo 🐱
Let's play around with a huge image of a rather disgruntled looking kitten:
(We're a using thumbnail here so that you can see it on this post, but you can also open up the full image in another window, if desired.)
This behemoth is 4.4MB in file size and measures 3840 pixels wide and 5760 pixels tall. Have fun downloading that on a mobile with poor connection! All the transformations described below are done by requesting the URL of the image from Kentico Cloud and passing query string parameters. I'm just showing a few highlights today, but note that there are a lot of additional great transformations available.
Changing the image size
There are many options available when it comes to changing the size of an image. The obvious place to start is by tacking a width (query string parameter, w) or height (query string parameter, h) to end, e.g:
For many of the transformation values that you can pass, you have the options of passing in a number of pixels (1 and above) or a percentage (0 to 1), e.g., moody-cat.jpg?w=0.1.
Cropping the image
You can also crop the image. If I want to crop a nice wide version of the kitten and get rid of some of that height, I can do that by passing parameters to select a sub-region of the image. These parameters are rect, the coordinates x and y and the width (w) and height (h) of the rectangle, e.g:
Note that I've also transformed the cropped image to a width of 500 pixels (w=500) here. That's another neat feature of the transformation API: you can combine transformations.
For even more transformation options, go to the Kentico docs on transforming size.
Focal point cropping
Kentico Cloud also allows you to do a bit of art direction to crop an image based on the focal point. In this case, our point of interest is the grumpy kitten, and we might want to focus on it for certain devices and get rid of the background. We can do this by using the focal point query string parameters of fp-x (the x coordinate), fp-y (the y coordinate) and fp-z (the zoom). Two other parameters are also required: fit=crop and crop=focalpoint.
So, how do we use these parameters?
Our focal point is where the two red lines (horizontal being fp-x and vertical being fp-y). The black box surround this focal point is determined by the zoom parameter fp-z. Putting that all together, the query string is:
For more notes on focal point cropping, go to the Kentico Cloud docs.
Have a png but want to send a jpg? Want to send webp images if the browser supports them? No worries! Just use the format parameter (fm); e.g., moody-cat.jpg?w=400&fm=webp.
Quality / File Size
You can also change the quality of the image (compression), which will reduce the file size (as will lowering the dimensions). The transform the quality you add the q parameter to the query string; e.g., moody-cat.jpg?w=400&q=50. Note: without this parameter Kentico Cloud will return your image with the quality set to 85% of the original by default. If you want the original, then pass q=100.
Need more info on formatting in Kentico Cloud? You got—go to the docs.
All this, and no upgrade!
These new image transformation features are available today. The rollout of new features like this is one of my favourite things about the cloud hosted, Software as a Service (SaaS) model used by Kentico Cloud. Making use of them is a lot faster thanks to not having to spend effort upgrading the CMS platform. Be sure to check out the Kentico Cloud product roadmap to see what's coming next!