Qsc Image Scaler
Url format
You can convert and resize images by requesting them using in a certain way formatted URL. So you don’t need to write any code. All you need to do is only change HTML markup of your website to use the new urls. The format is:
https://domain/cdn-cgi/image/options/image-source
Descriptions of each part of the URL:
domain
Your domain name.
/cdn-cgi/image/
A fixed prefix.
options
A comma-separated list of options (for example width, height).
image-source
An absolute URL pointing to an image to resize(http and https supported). The path is not URL-encoded, can be like /cdn-cgi/image/width=100/https://example.com/somepath/someimage.png
.
Here’s an example of a URL with options
set to width=100,quality=85
and a image-source
of https://somesite.com/someimage.png
.
<img src="https.example.com/cdn-cgi/image/width=100,quality=85/https://somesite.com/someimage.png">
Options
Options are comma-separated, spaces are not allowed. At least one option must be specified.
width=x
or w=x
Specifies width of the image in pixels.
height=x
or h=x
Specifies height of the image in pixels.
dpr=x
Device Pixel Ratio. Equals 1 by default. Multiplier for width/height that makes it easier to specify higher-DPI sizes.
fit
Affects interpretation of width and height. All fit modes preserve aspect ratio.
-
fit=scale-down
Image can be shrunk in size to fully fit within the given width or height, but won’t be enlarged.
-
fit=contain
Image will be shrunk or enlarged to be as large as possible.
-
fit=cover
Image will be shrunk or enlarged to exactly fill the entire area specified by width and height. I can be cropped if necessary.
-
fit=crop
Image will be shrunk and cropped if necessary to fit within the area specified by width and height. The image can't be enlarged. For images smaller than the given dimensions it’s the same as scale-down. For images larger than the given dimensions, it’s the same as cover.
-
fit=pad
Image will be shrunk or enlarged to be as large as possible, and the extra area will be filled with a background color (white by default).
gravity
or g
While using fit=cover or fit=crop, specifies the most important part of the image that shouldn’t be cropped off.
-
gravity=side
orgravity=XxY
Ыide (
left
,right
,top
,bottom
) or coordinates specified on a scale from0.0
to1.0
. The X and Y coordinates are separated by lowercase x, e.g.0x0
means left and top,1x1
means right and bottom,0.5x0.5
is the center.
quality=x
or q=x
Specifies quality for JPEG and Webp images. The quality is from 1 to 100 scale.
format=x
or f=x
Defines output format. We support WebP, JPEG, PNG and GIF output formats, or auto
(converts image to WebP if possible).
anim=false
Reduces animations of animated GIFs to still images.
sharpen=x
Specifies strength of sharpening filter. Floating point number between 0 (no sharpening) and 10.
onerror=redirect
In case of a fatal error that prevents the image from being resized or downloaded, redirects to the unresized source image URL specified by (image-source
).
metadata
Controls amount of invisible EXIF metadata in JPEG images.
metadata=keep
Preserve most of the image metadata when possible.
-
metadata=copyright
Discard all metadata except EXIF copyright tag. This is the default one.
-
metadata=none
Discard all invisible metadata.
Supported formats and limitations
The service generates JPEG, PNG, GIF and not animated WebP. It can save animations as GIF.
The service can read JPEG, PNG, GIF (including animations), and not animated WebP images.
Cache Control
Requested images (specified by image-source
value) can be cached following the usual rules of HTTP Cache-Control header. Minimum cache time is 1 hour. Resized images follow the same caching rules as the original image they were resized from. If you want to disable cache add no-store, no-cache, must-revalidate, private values or specify max-age less than one hour in Cache-Control header . We also suppot ETag with If-None-Match header from request.