Add support for image optimization

[petrsvihlik]

Kentico Cloud now supports image optimization. It gives developers the option of transforming images using URL parameters. The goal of this task is to implement a helper class that will make generation of image URLs easy for the developers.

The reference code can be observed in the .NET SDK.

The full specification follows:

Example

Scale
image.jpg?mode=scale&width=300
image.jpg?mode=scale&height=150
image.jpg?mode=fit&height=150&width=300

DPR
image.jpg?mode=scale&width=300&dpr=2.0

Specification

If a developer provides a parameter with invalid value or omits a parameter that is required for desired optimization, the Asset API will either ignore this parameter, or return the original asset without any optimizations.

Also, to keep our sanity, we will transform each image optimization parameter independently from others. Yes, this approach might sometimes produce surprising results. However, both Fastly and imgix are designed to handle a set of parameters that do not make sense and we are not making the situation worse.

Regarding requests to the Asset API, the idea is to go through all parameters, transform the supported ones and get rid of everything else.

To get a grasp of the image optimization You can experiment with two identical images:

• https://kentico.imgix.net/src/image.jpg
• https://www.fastly.io/image.jpg

rect=x,y,w,h (incompatible with crop)

-	-
x is not float	Nothing
x < 0.0	Nothing
y is not float	Nothing
y < 0.0	Nothing
w is not float	Nothing
w <= 0.0	Nothing
h is not float	Nothing
h <= 0.0	Nothing
h <= 0.0	Nothing
otherwise	crop={w},{h},x{x},y{y}

If the rect parameter is malformed, just ignore it.

fit=crop&crop=focalpoint&fp-x=x&fp-y=y&fp-z=z (incompatible with rect)

-	-
x is not float	set x as 0.5
y is not float	set y as 0.5
z is not float	Nothing
z <= 1.0	Nothing
1 / z < 1.0	Nothing
otherwise	crop={1 / z},{1 / z},offset-x{(x * z - 0.5) / (z - 1)},offset-y{(y * z - 0.5) / (z - 1) * 100}

Both offset-x and offset-y must be clamped into range from 0 to 100.

imgix supports crop by both rectangle and focal point. Unfortunately, it is not so easy to calculate Fastly parameters. Therefore, let's declare the rect parameter more important. So, if both crop by rectangle and focal point are specified, choose the first.

fm=x

-	-
x = gif	format=gif
x = png	format=png
x = png8	format=png8
x = jpg	format=jpg
x = pjpg	format=pjpg
x = webp	format=webp
otherwise	Nothing

fm=webp&lossless=x

-	-
x = 1	format=webpll
x = true	format=webpll
x = 0	format=webply
x = false	format=webply
otherwise	format=webp

q=x

-	-
x is not float	Nothing
otherwise	quality={x}\

auto=x

-	-
x = format	auto=webp
otherwise	Nothing

Local variables and related functions will be required to transform parameters.

[aweigold]

Looking over this API, this really can be done today in the view layer of whichever rendering engine one picks using this SDK. Since a plethora of rendering engines are available in the Java ecosystem, this SDK was designed with an abstraction layer for rendering inline linked items.

That said, the SDK does provide an optional Thymeleaf rendering engine for inline linked items. The SDK could provide a 'Kentico' Thymeleaf dialect with expression objects to make this (and many other things) easier, as well as potentially being registered into a main application's Thymeleaf rendering engine (outside of inline content).

We have a few things in a custom Thymeleaf dialect that we are using at TrustedChoice.com with Kentico, I'll see what I could carve out some of it and push as a separate Github issue. Once that support is in, then it should be simple to expand it with this.

[aweigold]

Dialect creation issue here: #62

[petrsvihlik]

Ok, thanks @aweigold. That sounds good to me :)