Dynamic conversion of images
You can dynamically modify the size and quality of images just by adding a query string. For example, you can change the width of an image to 200 px as follows (these features apply only if the file extension is .gif, .png, .jpeg, or .webp):
https://xxxx.g.kuroco-img.app/files/user/example.jpg?width=200
You can customize the following parameters:
| Parameter | Description |
|---|---|
| kio | Cancels image optimization behavior. |
| auto | automatic format conversion if WebP is supported on the browser(This parameter is enabled by default) |
| bg-color | background color setting |
| blur | blur setting |
| brightness | brightness setting |
| canvas | canvas size setting |
| contrast | contrast setting |
| crop | image crop setting |
| disable | disable image enlargement |
| dpr | specify DPR |
| enable | enable image enlargement |
| fit | how to adjust an image when resizing |
| format | modify the format |
| frame | extract the first frame of animation GIF |
| height | image height |
| level | required decoder function level when converting animation GIF to MP4 |
| optimize | optimize the image quality automatically |
| orient | modify the image orientation |
| pad | add a padding to the image frame |
| precrop | crop the image before conversion |
| profile | the function of video encoder according to the application level of video Bit Stream |
| quality | image quality after conversion |
| resize-filter | filter when resizing |
| saturation | saturation setting |
| sharpen | sharpen the image's edge |
| trim | image trimming setting |
| width | image width |
kio
Cancels image optimization behavior.
| Type | Example |
|---|---|
| kio fix | ?kio=false |
auto
The image gets converted to WebP format automatically if WebP is supported on the browser.This parameter is enabled by default.
| Type | Example |
|---|---|
| webp fix | ?auto=webp |
bg-color
You can specify the background color in RGB. There are 4 ways to set it:
| Type | Content | Example |
|---|---|---|
| {6 digits string} | Specify a color code in 6 digits without "#" at the beginning from 000000 to FFFFFF. | ?bg-color=c5c5c5 |
| {3 digits string} | Specify a color code in 3 digits without "#" at the beginning from 000 to FFF. | ?bg-color=000 |
| {integer},{integer},{integer} | Specify 3 integers between 0 and 255 and put "," between them. | ?bg-color=0,255,0 |
| {integer},{integer},{integer},{float} | Specify 3 integers between 0 and 255, a float between 0 and 1.0 which is the opacity and put "," between them. | ?bg-color=0,255,0,0.5 |
blur
You can specify the radius of blur by number and percentage.
| Type | Content | Example |
|---|---|---|
| {integer} | Specify the pixel value by integer. | ?blur=50 |
| {float}p | Specify the percentage against image size by float number + "p" at the end. | ?blur=0.5p |
brightness
You can specify the brightness by a number between -100 to 100. The default value is 0, -100 for complete black & 100 for complete white.
| Type | Content | Example |
|---|---|---|
| {integer} | Specify the brightness by integer between -100 and 100. | ?brightness=50 |
canvas
You can change the canvas size of the image. You can specify it to add a frame around the image without changing its size. By combining it with bg-color, you can specify the color of the border.
| Type | Content | Example |
|---|---|---|
| size | Specify the image size in pixel or percentage value. | ?canvas=320,240 |
| size,position | Specify the image size in pixel or percentage value, and the position in offset value. | ?crop=150,100,x50,y50 |
| size,bg-color | Increase the canvas size by 1.1 times in both width and height and add a gray border. | ?canvas=110p,110p&bg-color=c5c5c5 |
size(canvas)
You can specify the size in pixel or percentage. Put , or : between 2 values. First one is for the width and second is for the height.
| Type | Content | Example |
|---|---|---|
| {integer}p, {integer}p | Specify 2 integer values with "p" after each and put , between them. | ?canvas=140p,120p |
| {integer},{integer} | Specify 2 integers which are pixel values and put , between them. First one is the width and second one is the height. | ?canvas=320,240 |
| {integer}:{integer} | Specify the ratio of image by 2 integers and put : between them. | ?canvas=16:9 |
position(canvas)
When specifying x and y, it offsets the image based on the top-left corner as a reference point.
Use offset-x and offset-y to specify the offset values as a percentage.
If the size is specified using a ratio with a colon (e.g., width:height), you cannot specify the position using x and y.
Furthermore, x and offset-y, as well as y and offset-x, can be used together, but combining x with offset-x or y with offset-y is not allowed.
| Type | Content | Example |
|---|---|---|
| x{integer},y{integer} | Specify the canvas with XY coordinates relative to the top left corner of the screen. | ?width=300&canvas=320,240,x10,y10 |
| offset-x{integer},offset-y{integer} | Specify the canvas with XY coordinates relative to the center of the image. | ?canvas=1:1,offset-x25,offset-y25 |
contrast
You can specify the contrast by an integer between -100 and 100. The default value is 0, and -100 is grayscale.
| Type | Content | Example |
|---|---|---|
| {integer} | Specify by an integer between -100 and 100. | ?contrast=50 |
crop
You can crop images. Specify how to crop by size, position, and smart and safe parameters.
| Type | Content | Example |
|---|---|---|
| size | Specify the image size in pixel or percentage value. | ?crop=150 |
| size,option | Specify the image size in pixel or percentage values and how to crop as an option by smart or safe parameter. | ?crop=150,smart |
| size,position | Specify the image size in pixel or percentage value and the position in offset value. | ?crop=150,100,x50,y50 |
| size,position,option | Specify the image size in pixel or percentage value, position in offset value and how to crop as an option by smart or safe parameter. | ?crop=150,100,x50,y50,smart |
size(crop)
You can specify the size by pixel or percentage. You can also specify width and height like 200,400 or using ratio like 16:9.
| Type | Content | Example |
|---|---|---|
| {integer} | Specify the desired integer to crop. | ?crop=150 |
| {float},{float} | Specify the 2 float numbers from 0.01 to 0.99 and put , between them. These are percentage values. | ?crop=0.2,0.4 |
| {number},{number} | Specify the width and height in pixel. | ?crop=200,400 |
| {number}:{number} | Specify the ratio of the image after being cropped. | ?crop=16:9 |
option(crop)
You can specify the option by smart or safe.
smart
The algorithm, which can detect the image's content, crops it to focus on the important part, such as a face.
safe
Normally, the error Invalid transformation for requested image occurs when trying to crop the area outside of the image. By adding safe option, you can avoid this error.
Please note that the cropped image size might be different than the specified size.
position(crop)
When specifying x and y, it offsets the image based on the top-left corner as a reference point.
Use offset-x and offset-y to specify the offset values as a percentage.
If the size is specified using a ratio with a colon (e.g., width:height), you cannot specify the position using x and y.
Furthermore, x and offset-y, as well as y and offset-x, can be used together, but combining x with offset-x or y with offset-y is not allowed.
| Type | Content | Example |
|---|---|---|
| x{integer},y{integer} | Specify the crop standard value with XY coordinates relative to the top left corner of the screen. | ?crop=150,100,x50,y50 |
| offset-x{integer},offset-y{integer} | Specify the crop standard value with XY coordinates relative to the center of the image. | ?crop=1:1,offset-x25,offset-y50 |
disable
You can disable the enlargement of the image. The enlargement is disabled by default, so use the enable parameter to enable it. If combined with width and such, you can use it to disable enlarging the image even if a larger value than the original size is specified.
| Type | Example |
|---|---|
| upscale fix | ?width=2560&disable=upscale |
dpr
You can specify the device pixel ratio. You can use it in order to be responsive to high resolution displays such as Retina display. Combine with parameters such as width parameter.
| Type | Content | Example |
|---|---|---|
| {number} | Specify the DPR with the number. | ?width=200&dpr=2 |
enable
You can enable the enlargement of the image. The enlargement is disabled by default so by combining with parameters such as width, it can enable the enlargement when the bigger number than the original image is specified.
| Type | Example |
|---|---|
| upscale fix | ?width=2560&enable=upscale |
fit
You can specify how to adjust the image when resized.
| Type | Content | Example |
|---|---|---|
| bounds | Resize the image to fit entirely within the specified region, making one dimension smaller if needed. | ?width=150&height=150&fit=bounds |
| cover | Resize the image to entirely cover the specified region, making one dimension larger if needed. | ?width=150&height=150&fit=cover |
| crop | Resize and crop the image centrally to exactly fit the specified region. | ?width=150&height=150&fit=crop |
format
You can modify the format of the image. Available formats are as follows:
gifpngpng8jpgpjpgbjpgwebpwebpllwebplymp4
The setting example is as follows:
?format=png
frame
You can extract the first frame of animation GIF
| Type | Example |
|---|---|
| 1 only | ?frame=1 |
height
You can specify the image height by absolute value or relative value(percentage).
| Type | Content | Example |
|---|---|---|
| {integer} | Specify the pixel value by integer between 1 and 8192. | ?height=200 |
| {float} | Specify the reduction rate by percentage between 0 and 0.99. | ?height=0.5 |
| {integer}p | You can specify the percentage like "150p" which means 150%. | ?height=150p |
level
You can use with profile parameter when converting the animation GIF to MP4 format. You can specify the required decoder function level by profile parameter.
Available values are as follows:
| Type | Content | Example |
|---|---|---|
| level 1 | Specify by float between 1.0 and 1.3. | ?format=mp4&profile=main&level=1.3 |
| level 2 | Specify by float between 2.0 and 2.2. | ?format=mp4&profile=main&level=2.0 |
| level 3 | Specify by float between 3.0 and 3.2(Default is 3.0). | ?format=mp4&profile=main&level=3.0 |
| level 4 | Specify by float between 4.0 and 4.2. | ?format=mp4&profile=main&level=4.0 |
| level 5 | Specify by float between 5.0 and 5.2. | ?format=mp4&profile=main&level=5.1 |
| level 6 | Specify by float between 6.0 and 6.2. | ?format=mp4&profile=main&level=5.1 |
optimize
You can choose among 3 values, which can optimize the quality automatically.
- Low
- Medium
- High
Example is as follows:
?optimize=low
orient
You can modify the image orientation.
| Type | Content | Example |
|---|---|---|
| r | It rotates the image to the right. | ?orient=r |
| l | It rotates the image to the left. | ?orient=l |
| h | It reverses the image horizontally. | ?orient=h |
| v | It reverses the image vertically. | ?orient=v |
| hv or vh | It reverses the image both vertically and horizontally. | ?orient=vh |
| 1 | It is the default. There are no changes to the image orientation. | ?orient=1 |
| 2 | It reverses the image horizontally just as h. | ?orient=2 |
| 3 | It reverses the image both vertically and horizontally just as hv or vh. | ?orient=3 |
| 4 | It reverses the image vertically just as v. | ?orient=4 |
| 5 | It reverses the image horizontally, then rotates it to the left. | ?orient=5 |
| 6 | It rotates the image to the right just as r. | ?orient=6 |
| 7 | It reverses the image horizontally, then rotates it to the right. | ?orient=7 |
| 8 | It rotates the image to the left just as l. | ?orient=8 |
pad
You can add padding to the image frame. You can also add color to the frame by combining bg-color. Specify an integer for the pixel value and float below 1.0 for the percentage.
| Type | Content | Example |
|---|---|---|
| {integer} | Specify one integer if you want to add frames with the same width on all sides. | ?pad=20 |
| {integer},{integer} | Specify 2 integers, the first one for the top and bottom sides and the second for the left and right sides. | ?pad=25,100 |
| {integer},{integer},{integer} | Specify 3 integers: the first one for the top side, the second for the left and right side, and the third for the bottom side. | ?pad=25,50,100 |
| {integer},{integer},{integer},{integer} | Specify 4 integers, each for one side in this particular order: top, right, bottom, left. | ?pad=25,50,75,100 |
precrop
It crops the image as crop. The difference is that precrop is executed before the image conversion. Available parameters are the same as crop.
| Type | Content | Example |
|---|---|---|
| size | Specify the image size by pixel or percentage. | |
| size,option | Specify the image size by pixel or percentage and how to crop for the option by smart or safe parameter. | ?precrop=150,smart |
| size,position | Specify the image size by pixel or percentage and the position by offset value. | ?precrop=150,100,x50,y50 |
| size,position,option | Specify the image size by pixel or percentage, position by offset value and how to crop for the option by smart or safe parameter. | ?precrop=150,100,x50,y50,smart |
profile
You can specify with level parameter when converting animation GIF to MP4 format.
You can specify the function of video encoder according to the app level of video bit stream.
| Type | Content | Example |
|---|---|---|
| baseline | This is a default value and it is suitable for virtual meetings or mobile apps. | ?format=mp4&profile=baseline&level=5.0 |
| main | standard quality setting | ?format=mp4&profile=main&level=5.0 |
| high | high quality setting | ?format=mp4&profile=high&level=5.0 |
quality
You can specify the image quality after the conversion. If the browser supports WebP, you can set quality for the WebP in the second value. Combine with auto parameter when using the second value.
| Type | Content | Example |
|---|---|---|
| {integer} | Specify the quality of the image to output by an integer less than 100. | ?quality=85 |
| {integer},{integer} | Specify 2 integers, first for the normal image quality and second for the image quality in WebP. | ?format=pjpg&auto=webp&quality=85,75 |
resize-filter
You can specify the filter to resize the image.
| Type | Content | Example |
|---|---|---|
| nearest | It uses the nearest pixel information. | ?resize-filter=nearest |
| bilinear or linear | It uses the 2x2 pixel average value. | ?resize-filter=bilinear |
| bicubic or cubic | It evaluates the inner value higher using 4x4 pixel average value. | ?resize-filter=bicubic |
| lanczos2 | It reconstructs as much as possible using lanczos filter. | ?resize-filter=lanczos2 |
| lanczos3 or lanczos | It optimizes using snc function. | ?resize-filter=lanczos3 |
saturation
You can specify the saturation by the integer between -100 and 100. The default value is 0, and -100 is grayscale.
| Type | Content | Example |
|---|---|---|
| {integer} | Specify the integer between -100 and 100. | ?saturation=50 |
sharpen
You can sharpen the edge of the image.
| Type | Content | Example |
|---|---|---|
| a{number},r{number},t{number} | Specify the amount on a, radius on r and threshold on t. | ?sharpen=a5,r2,t0 |
trim
You can trim the image. Specify integer for the pixel and float below 1.0 for percentage.
| Type | Content | Example |
|---|---|---|
| {integer} | It trims the same width on all sides. | ?trim=20 |
| {integer},{integer} | Specify 2 integers: the first one for the top and bottom sides and the second for the left and right sides. | ?trim=25,100 |
| {integer},{integer},{integer} | Specify 3 integers: the first one for the top side, the second for the left and right side, and the third for the bottom side. | ?trim=25,50,100 |
| {integer},{integer},{integer},{integer} | Specify 4 integers, each for one side in this particular order: top, right, bottom, left. | ?trim=25,50,75,100 |
width
You can specify the image width by absolute value or relative value(percentage).
| Type | Content | Example |
|---|---|---|
| {integer} | Specify the pixel value by integer between 1 and 8192. | ?width=200 |
| {float} | Specify the reduction rate by percentage between 0 and 0.99. | ?width=0.5 |
| {integer}p | You can specify the percentage like "150p" which means 150%. | ?width=250p |
Support
If you have any other questions, please contact us or check out Our Slack Community.