You can add additional Image Transformations within Adaptive Delivery to serve both optimized and enhanced images. There are two ways to add Image Transformations:
- Inline a set of transformations in a single
- Add individual transformations via corresponding data attributes.
Here’s an example of using
data-blink-ops with its syntax similar to inline
<img data-blink-ops='filter: nerion; enhance: 15; mirror' data-blink-src='https://storage.example.com/logo.png' />
If you decide to go with individual data attributes, the above example can be rewritten in the following way,
<img data-blink-filter='nerion' data-blink-enhance='15' data-blink-mirror data-blink-src='https://storage.example.com/logo.png' />
Note, Adaptive Delivery JS SDK adds
automatically. We don’t recommend changing the behavior, since we calculate the
transformation parameters based on the user context.
Provides automatic image enhancement by combining the following transformations:
auto levels, auto contrast, and saturation sharpening. The
should be set in the range from 0 to 100. The default value is 50.
Original image. 10.3Kb
Applies image sharpening, which is specifically useful for downscaled images.
While Adaptive Delivery provides automatic image resizing, you can further tune
your visuals with sharpening.
values can be in the range from 0 to
20; the default is 5.
Downscaled image. 16.1Kb
Applies image blur guided by the
factor. Uploadcare implements
Gaussian Blur with
acting as effect intensity in the range from 0
to 5000. The default value is 10. The transformation provides uniform performance
in the full range of intensities.
Original image. 14Kb
Adjust image color properties by controlling brightness, exposure, gamma, contrast, saturation, vibrance, and warmth.
parameter controls the strength of any applied adjustment.
Ranges of the
parameter differ across image transformations.
to “zero point” leaves images unchanged.
|from -100 to 100||0|
|from -500 to 500||0|
|from 0 to 1000||100|
|from -100 to 500||0|
|from -100 to 500||0|
|from -100 to 500||0|
|from -100 to 100||0|
The first three adjustments:
similar results with the following differences:
to each color channel; out-of-range values are cut.
gammacompress color values distribution thus preserving the details.
The next three operations adjust color diversity and dynamic range in images:
contrastaffects both colors and dynamic range; on increase, images lose both bright and dark details.
saturationuniformly bumps up color intensity leaving the dynamic range unchanged.
vibrancecleverly increases the intensity of muted colors and leaves the well-saturated ones alone.
warmth adjusts color temperature in images.
You can combine any adjustments, and piping the operations won’t get you any performance or precision losses: all adjustments are applied in one pass.
Old photo effect.
You can apply photo filters to your images while keeping them optimized and respnsove with Adaptive Delivery.
The transformation applies one of predefined photo filters by its
Photo filters help streamline your content production through serving consistent
visuals across your site pages or content pieces.
should be set to one of the following:
can be set in the range from -100 to 200 and defaults to 100.
- 0 stands for no changes in the image, the output is equal to the original.
- Values in the range from 0 to 100 gradually increase filter strength; 100 makes filters work as designed.
- Values over 100 emphasizes filter effect: the strength of applied changes.
- Any negative number would mean subtracting the difference between the filtered and original images from the original. That will produce a “negative filter” effect.
All filters provide predictable outputs with the
ranging from 0 to 100.
For some filter presets, setting the
value outside those bounds
may produce weird results.
For example, all filters producing grayscale outputs
will result in a negative image when set to the
greater than 100.
Set to negative values, those will saturate images.
Here’s how all of our filters look like:
You can desaturates images with the
grayscale transformation. It has no
additional parameters and simply produces a grayscale image output when applied.
Here’s an example,
Invert images rendering a “negative” of your input,
An example of inverting an image follows,
Right-angle image rotation, counterclockwise. The value of
must be a
multiple of 90.
The transformation provides image flipping.
The transformation allows mirroring images.
overlay transformation allows to layer images one over another.
One of the most common use cases here are watermarks: semi-transparent images layered over opaque ones to complicate their unauthorized usage, etc.
— UUID of an image to be layered over input. To be recognized by
, that image should be related to any project of your account.
— linear dimensions of the overlay image. The aspect ratio of an overlay is preserved. What you set is a maximum linear size along one of the axes:
-/overlay/:uuid/50%x50%/means any linear dimension of the overlay can not exceed 50% in size. Default size setting is 100%.
— position of the overlay over your input. By default, an overlay is positioned in the top-left corner of an input. Coordinates represent an offset along each of the axes in either pixel or percent format. In general, the coordinate system is similar to the CSS background-position.
— controls the opacity of the overlay in percent format. Your overlay may either be initially semi-transparent or made to be so by tuning
% is an escape char in URLs, it can’t be used as-is and should be
replaced with either
%25 escape sequence or the
p char, which is a more
readable and concise option.
overlay parameter is optional and can be omitted. However, the order of
the parameters should be preserved.
Specifying size and opacity, positioning is omitted.
Specifying size and position, opacity is omitted.
Reduces an image proportionally for it to fit into the given dimensions in
pixels. If dimensions are not specified, we use the default value of
Resizes an image to fit into the specified dimensions. With just a single linear dimension specified, preserves your original aspect ratio and resizes an image along one of its axes.
Crops an image using specified dimensions and offsets. If no offset values are passed into the operation, the top-left image corner is used by default.
is not specified.
The transformation scales down an image until one of its dimensions gets equal to some of the specified ones; the rest is cropped. This proves useful when your want to fit as much of your image as possible into a box. Let us compare the two resizing methods:
is set to
Switching the crop type to smart enables the content-aware mechanics: detecting faces and other visually important objects or areas in images. Specifically, with the setting, Uploadcare applies AI-based algorithms implementing deep neural networks to automatically detect visually important areas in images and crop the rest.
resize behavior when a source image is smaller than the resulting
dimensions. The following modes can apply:
on— stretches an image up, the default option.
off— forbids stretching an image along any dimension that exceeds image size along any of its axes.
fill— does not stretch an image, the color-filled frame is rendered around instead, the default fill color is used.
Converts an image to one of the following formats:
jpeg— JPEG is a lossy image format (good compression, good for photos). JPEG doesn’t support an alpha channel, hence you can use the
setfilloperation that sets a background color. All browsers support JPEG.
png— PNG is a lossless format (good compression only for graphics) with alpha channel support. Supported by all browsers.
webp— WebP is a modern image format that supports alpha channel and lossy compression. The format is good for all kinds of images but supported by a limited number of browsers.
auto— the image format used for content delivery is set according to the presence of an alpha channel in your input and capabilities of a client.
Technically, the default behavior of
auto is about always trying to deliver
WebP images based on checking the
Transparent, size is equal
to the opaque one.
Sets the level of image quality that affects file sizes and hence loading speeds
and volumes of generated traffic.
quality works with JPEG and WebP images.
The following options can apply:
normal— the default setting, suits most cases.
better— can be used to render relatively small and detailed previews. ≈125% file size compared to
best— useful for hi-res images, when you want to get perfect quality without paying much attention to file sizes. ≈170% file size.
lighter— useful when applied to relatively large images to save traffic without significant losses in quality. ≈80% file size.
lightest— useful for retina resolutions, when you don’t have to worry about the quality of each pixel. ≈50% file size.
smart— automatically adjusts image compression and format settings to preserve visual quality while minimizing the file size. The mode is content-aware. Image formats will not be adjusted if you define
Returns a progressive image. The operation does not affect non-JPEG images, and
won’t force the output image format to