Processing an image
Processing images with imgproxy is really easy: just send an HTTP GET
request to imgproxy and imgproxy will respond with a processed image.
imgproxy responds with an image file and uses an image/*
Content-Type
header, so you can put imgproxy's URLs right into src
attributes of your <img/>
HTML tags or into url()
CSS values
The request URL path should consist of a signature, processing options, a source URL, and optionally an extension, like this:
http://imgproxy.example.com/%signature/%processing_options/plain/%source_url@%extension
http://imgproxy.example.com/%signature/%processing_options/%encoded_source_url.%extension
http://imgproxy.example.com/%signature/%processing_options/enc/%encrypted_source_url.%extension
Check out the example at the end of this guide.
Signature
The signature part should always be present in a URL. If the signature check is disabled (no key/salt pairs are provided), the signature part may contain anything (for example, unsafe
or _
).
A signature protects your URL from being altered by an attacker. It is highly recommended to sign imgproxy URLs when imgproxy is being used in production.
Once you set up your URL signature, check out the Signing the URL guide to find out how to sign your URLs. Otherwise, since the signature still needs to be present, feel free to use any string here.
Processing options
Processing options should be specified as URL parts divided by slashes (/
). A processing option has the following format:
%option_name:%argument1:%argument2:...:%argumentN
You can redefine the arguments separator with the the IMGPROXY_ARGUMENTS_SEPARATOR config. For example, if you set IMGPROXY_ARGUMENTS_SEPARATOR=","
, processing options will have the following format:
%option_name,%argument1,%argument2,...,%argumentN
The list of processing options does not define imgproxy's processing pipeline. Instead, imgproxy already comes with a specific, built-in image processing pipeline for maximum performance. Read more about this in the About processing pipeline guide.
imgproxy supports the following processing options:
Resize
resize:%resizing_type:%width:%height:%enlarge:%extend
rs:%resizing_type:%width:%height:%enlarge:%extend
This is a meta-option that defines the resizing type, width, height, enlarge, and extend. All arguments are optional and can be omitted to use their default values.
Size
size:%width:%height:%enlarge:%extend
s:%width:%height:%enlarge:%extend
This is a meta-option that defines the width, height, enlarge, and extend. All arguments are optional and can be omitted to use their default values.
Resizing type
resizing_type:%resizing_type
rt:%resizing_type
Defines how imgproxy will resize the source image. Supported resizing types are:
fit
: resizes the image while keeping aspect ratio to fit a given size.fill
: resizes the image while keeping aspect ratio to fill a given size and crops projecting parts.fill-down
: the same asfill
, but if the resized image is smaller than the requested size, imgproxy will crop the result to keep the requested aspect ratio.force
: resizes the image without keeping the aspect ratio.auto
: if both source and resulting dimensions have the same orientation (portrait or landscape), imgproxy will usefill
. Otherwise, it will usefit
.
Default: fit
Resizing algorithm pro
resizing_algorithm:%algorithm
ra:%algorithm
Defines the algorithm that imgproxy will use for resizing. Supported algorithms are nearest
, linear
, cubic
, lanczos2
, and lanczos3
.
Default: lanczos3
Width
width:%width
w:%width
Defines the width of the resulting image. When set to 0
, imgproxy will calculate width using the defined height and source aspect ratio. When set to 0
and resizing type is force
, imgproxy will keep the original width.
Default: 0
Height
height:%height
h:%height
Defines the height of the resulting image. When set to 0
, imgproxy will calculate resulting height using the defined width and source aspect ratio. When set to 0
and resizing type is force
, imgproxy will keep the original height.
Default: 0