Adding additional image transformations is simple. There are two ways to add them to your image.
Firstly, you can use
data-blink-ops. This approach has syntax similar to inline CSS:
<img data-blink-ops='filter: nerion; enhance: 15; mirror' data-blink-src='https://storage.example.com/logo.png' />
Secondly, you can use specific data attributes. Example from the above can be rewritten in the following way and produce the same result:
<img data-blink-filter='nerion' data-blink-enhance='15' data-blink-mirror data-blink-src='https://storage.example.com/logo.png' />
Adaptive Delivery SDK adds
quality by default. We don’t
recommend changing it, because it calculates parameters based on the device context.
Below is the full list of transformations with the relevant examples.
Auto-enhances an image by performing the following operations: auto levels, auto
contrast, and saturation sharpening.
:strength values should be in the range
from 0 to 100. The default value is 50.
Original image. 10.3Kb
Sharpens an image, might be especially useful with images that were subjected to
:strength can be in the range from 0 to 20 and defaults to the
value of 5.
Downscaled image. 16.1Kb
Blurs images by the
:strength factor. The filtering mode is Gaussian Blur,
:strength parameter sets the blur radius — effect intensity. Technically,
:strength controls the Gaussian Blur standard deviation multiplied by ten.
The value of
:strength might come up to 5000, while the default value is 10.
:strength values do not affect the operation performance.
Original image. 14Kb
Uploadcare features a set of operations for adjusting color properties of an image.
:value parameter controls the strength of any applied adjustment.
Ranges of the
:value parameter differ between operations.
There also is a zero point for each operation —
the value producing outputs equal to original images.
|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 operations:
are very similar.
brightness works in a straightforward manner:
:value gets added to each color channel; out-of-range values are cut.
Thus, when increasing brightness, brighter image features can be lost.
Same works for darker features on brightness decrease.
gamma compress color values distribution
in either lighter or darker areas depending on the provided
thus preserving 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. The operation produces more realistic results when applied to typical photos.
Last but not least, the
warmth operation adjusts color temperature in images.
You can combine any adjustments to achieve the needed outputs. Piping the operations won't get you any performance or precision losses since all adjustments are applied in one pass.
Old photo effect.
Applies one of predefined photo filters by its
The way your images look affects their engagement rates.
You apply filters thus providing beautiful images consistent
across content pieces you publish.
:name should be one of the following:
:amount 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
:value ranging from 0 to 100.
For some filter presets, setting the
:amount 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
:amount greater than 100.
Set to negative values, those will saturate an image.
Here's how all of our filters look like:
Desaturates images. The operation has no additional parameters and simply produces a grayscale image output when applied.
Inverts images rendering a 'negative' of the input.
Right-angle image rotation, counterclockwise. The value of
:angle must be a
multiple of 90.
overlay operation 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— UUID of an image to be layered over input. To be recognized by
:uuid, that image should be related to any project of your account.
:relative_dimensions— 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%.
:relative_coordinates— 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.
:opacity— 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
parameter URL directives should be preserved.
Specifying size and opacity, positioning is omitted.
Specifying size and position, opacity is omitted.
Resizing and Cropping
Reduces an image proportionally for it to fit into the given dimensions in
pixels. If dimensions are not specified, we use the default values 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.
:type is not specified.
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:
:type 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.
Compression and Performance
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
Accept header. We do it if a client supports
image/webp MIME-type and you are running the default Uploadcare setup with
our storage and the default CDN domain,
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.
When your input and output are both JPEGs and no destructive operations are
applied, your output image quality is limited to the initial input quality:
when you upload a highly compressed image, you can use the
normal setting or
go even higher, but it will not affect neither your compression settings nor file size.
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.
Returns a progressive image. In progressive images, data is compressed in
multiple parts of progressively higher detail. This is ideal for large images
that will be displayed while downloading over a slow connection allowing a
reasonable preview after receiving only a portion of the data.
The operation does not affect non-JPEG images; does not force image formats