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 an image's width to 200px as follows:
These features apply only if the file extension is gif|png|jpe?g|webp.

https://xxxx.g.kuroco-img.app/files/user/example.jpg?width=200

You can customize the following parameters:

ItemDescription
autoautomatic format conversion if WebP is supported on the browser(This parameter is enabled by default)
bg-colorbackground color setting
blurblur setting
brightnessbrightness setting
canvascanvas size setting
contrastcontrast setting
cropimage crop setting
disabledisable image enlargement
dprspecify DPR
enableenable image enlargement
fithow to adjust an image when resizing
formatmodify the format
frameextract the first frame of animation GIF
heightimage height
levelrequired decoder function level when converting animation GIF to MP4
optimizeoptimize the image quality automatically
orientmodify the image orientation
padadd a padding to the image frame
precropcrop the image before conversion
profilethe function of video encoder according to the application level of video Bit Stream
qualityimage quality after conversion
resize-filterfilter when resizing
saturationsaturation setting
sharpensharpen the image's edge
trimimage trimming setting
widthimage width

auto

The image gets converted to WebP format automatically if WebP is supported on the browser.This parameter is enabled by default.

TypeExample
webp fix?auto=webp

bg-color

You can specify the background color in RGB. There are 4 ways to set it:

TypeContentExample
{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.

TypeContentExample
{integer}Specify the pixel value by integer.?blur=50
{float}pSpecify 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.

TypeContentExample
{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.

TypeContentExample
sizeSpecify the image size in pixel or percentage value.?canvas=320,240
size,positionSpecify the image size in pixel or percentage value, and the position in offset value.?crop=150,100,x50,y50

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.

TypeContentExample
{integer}p, {integer}pSpecify 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)

Specify offset value of x and y with the origin located at the top left of the screen. The origin of offset-x and offset-y is the center of the image. You can combine x & offset-y or y & offset-x but not x & offset-x or y & offset-y.

TypeContentExample
x{integer},y{integer}Specify the canvas with XY coordinates relative to the top left corner of the screen.?canvas=150,100,x50,y50
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-y50
x{integer},offset-y{integer}Specify the canvas with XY coordinates with X axis relative to the top left corner of the screen and Y axis relative to the center of the image.?canvas=1:1,x250,offset-y50
offset-x{integer},y{integer}Specify the canvas with XY coordinates with X axis relative to the center of the image and Y axis relative to the top left corner of the screen.?canvas=1:1,x50,offset-y250

contrast

You can specify the contrast by an integer between -100 and 100. The default value is 0, and -100 is grayscale.

TypeContentExample
{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.

TypeContentExample
sizeSpecify the image size in pixel or percentage value.?crop=150
size,optionSpecify the image size in pixel or percentage values and how to crop as an option by smart or safe parameter.?crop=150,smart
size,positionSpecify the image size in pixel or percentage value and the position in offset value.?crop=150,100,x50,y50
size,position,optionSpecify 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.

TypeContentExample
{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)

You can specify the offset value with x and y relative to the top left corner of the screen. The origin of offset-x and offset-y is the center of the image. You can combine x & offset-y or y & offset-x but not x & offset-x or y & offset-y.

TypeContentExample
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
x{integer},offset-y{integer}Specify the crop standard value with XY coordinates with X axis relative to the top left corner of the screen and Y axis relative to the center of the image.?crop=1:1,x250,offset-y50
offset-x{integer},y{integer}Specify the crop standard value with XY coordinates with X axis relative to the center of the image and Y axis relative to the top left corner of the screen.?crop=1:1,x50,offset-y250

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.

TypeExample
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.

TypeContentExample
{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.

TypeExample
upscale fix?width=2560&enable=upscale

fit

You can specify how to adjust the image when resized.

TypeContentExample
boundsIt makes the image fit the specified area by decreasing either vertical or horizontal values.?width=150&height=150&fit=bounds
coverIt makes the image fit the specified area by increasing either vertical or horizontal values.?width=150&height=150&fit=cover
cropIt resizes the image to the center so that it fits in the specified area.?width=150&height=150&fit=crop

format

You can modify the format of the image. Available formats are as follows:

  • gif
  • png
  • png8
  • jpg
  • pjpg
  • bjpg
  • webp
  • webpll
  • webply
  • mp4

The setting example is as follows:

?format=png

frame

You can extract the first frame of animation GIF

TypeExample
1 only?frame=1

height

You can specify the image height by absolute value or relative value(percentage).

TypeContentExample
{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}pYou 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:

TypeContentExample
level 1Specify by float between 1.0 and 1.3.?format=mp4&profile=main&level=1.3
level 2Specify by float between 2.0 and 2.2.?format=mp4&profile=main&level=2.0
level 3Specify by float between 3.0 and 3.2(Default is 3.0).?format=mp4&profile=main&level=3.0
level 4Specify by float between 4.0 and 4.2.?format=mp4&profile=main&level=4.0
level 5Specify by float between 5.0 and 5.2.?format=mp4&profile=main&level=5.1
level 6Specify 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.

TypeContentExample
rIt rotates the image to the right.?orient=r
lIt rotates the image to the left.?orient=l
hIt reverses the image horizontally.?orient=h
vIt reverses the image vertically.?orient=v
hv or vhIt reverses the image both vertically and horizontally.?orient=vh
1It is the default. There are no changes to the image orientation.?orient=1
2It reverses the image horizontally just as h.?orient=2
3It reverses the image both vertically and horizontally just as hv or vh.?orient=3
4It reverses the image vertically just as v.?orient=4
5It reverses the image horizontally, then rotates it to the left.?orient=5
6It rotates the image to the right just as r.?orient=6
7It reverses the image horizontally, then rotates it to the right.?orient=7
8It 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.

TypeContentExample
{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, left, bottom.?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.

TypeContentExample
sizeSpecify the image size by pixel or percentage.
size,optionSpecify the image size by pixel or percentage and how to crop for the option by smart or safe parameter.?precrop=150,smart
size,positionSpecify the image size by pixel or percentage and the position by offset value.?precrop=150,100,x50,y50
size,position,optionSpecify 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 application level of video bit stream.

TypeContentExample
baselineThis is a default value and it is suitable for virtual meetings or mobile apps.?format=mp4&profile=baseline&level=5.0
mainstandard quality setting?format=mp4&profile=main&level=5.0
highhigh 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.

TypeContentExample
{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.

TypeContentExample
nearestIt uses the nearest pixel information.?resize-filter=nearest
bilinear or linearIt uses the 2x2 pixel average value.?resize-filter=bilinear
bicubic or cubicIt evaluates the inner value higher using 4x4 pixel average value.?resize-filter=bicubic
lanczos2It reconstructs as much as possible using lanczos filter.?resize-filter=lanczos2
lanczos3 or lanczosIt 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.

TypeContentExample
{integer}Specify the integer between -100 and 100.?saturation=50

sharpen

You can sharpen the edge of the image.

TypeContentExample
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.

TypeContentExample
{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, left, bottom.?trim=25,50,75,100

width

You can specify the image width by absolute value or relative value(percentage).

TypeContentExample
{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}pYou can specify the percentage like "150p" which means 150%.?width=250p