Detail section - how to use
Changing the image
The image can be modified by adding various parameters to the URL. Parameters are added with a '&' and always have the same structure.
For example
//yourdomain .com/fsi/server?type=image&source=images/samples/sample.jpg&width=300
This means that the image will be delivered with a width of 300 pixels.
Dimensions
For image requests, at least one of the parameters width or height must be provided. The value is interpreted in pixels and the result is an image scaled to fit the requested dimension.
Changing the width
The width of the image can be easily changed by modifying the width
parameter.
If you set the parameter to &width=200
, the image will be 200 pixels wide:
//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&width=200
Changing Height
Height is defined in the same way as width. By adding &height=200
to the base URL, the image will be served with a height of 300px:
//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&height=200
Changing width & height at the same time
It's also possible to specify both width and height. By default, the aspect ratio is preserved, so if you specify both width and height, the resulting image may be smaller than the desired size, as the value closest to the aspect ratio is chosen. to the aspect ratio.
//yourdomain.com/fsi/server?type=image&source=images/samples/sample2.jpg&width=300&height=300
We requested a square, so to ensure the aspect ratio, the image is delivered as 300x188.
This is calculated as follows: [INSERT FORMULA]
You can use the effect pad to ensure that the image is displayed in the desired dimensions while maintaining the aspect ratio. This may only be suitable for images with a solid background, as the gaps will be filled with a solid colour.
Image Format
With &format
you can specify the format in which the image will be delivered.
If you do not specify a format, the default is auto
, which automatically chooses the best format depending on the browser.
Alternatively you can select WEBP, JPEG, PNG or GIF.
Auto adaptively delivers images as WEBP in supporting browsers, and switches to PNG or JPEG in browsers that do not support WEBP.
Please note that some browsers (currently Safari and Internet Explorer) do not support WEBP and will not display the image.
If you want to use WEBP, the best way is to set the format to auto
.
//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&width=300&format=png
Image Quality
If you want to serve WebP or JPG, you can also set the image quality by adding &quality
.
If you do not specify a quality, the value defined in the renderer default.yml
will be used, which is 92% by default.
//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&width=300&quality=5
Rect
The optional rect parameter can be used in image requests and allows images to be cropped prior to scaling.
//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&width=200&rect=0.04653,0.24601,0.52918,0.7114
The value is expected to be four comma separated float values. The first two values define the upper left corner and the other two values define the lower right corner of the cropped area. All values are expected to be normalised, i.e. the valid values range from 0 to 1, where 0 is left or top and 1 is right or bottom.
Left, Top, Right, Bottom
The left, top, right, bottom parameters are a more human-readable version of the rect parameter described above. The values are identical.
//yourdomain.com/fsi/server?type=image&source=images/samples/sample.jpg&width=200&right=0.5&top=0.5