Compression
When processing images, the result will be encoded to the new image on the fly. The compression operations allow you to control this process. Format and quality operations affect loading speed and visual quality. The right balance of those helps improve conversions and bounce rates.
Format
-/format/:format/
Converts an image to one of the following formats:
jpeg
is a lossy image format (good compression for photos). JPEG doesn’t support an alpha channel; hence you can use thesetfill
operation that sets a background color. All browsers support JPEG.png
is a lossless format (good compression only for graphics) with alpha channel support. PNG is supported by all browsers.webp
is a modern format with more efficient compression than JPEG and with alpha channel support. It works well for all images, yet not all browsers and OSs support it.auto
is an automatic image format selection based on alpha channel presence and a client's device and browser.
How auto
works and prioritize image formats
First, the algorithm checks the Accept
header with MIME types to figure out
what image format a client browser supports.
- WebP is a primary option. It's used when
image/webp
is one of the supported MIME types. - JPEG is used when the original image is fully opaque.
- PNG is used when the source image has an alpha channel with non-opaque pixels.
Note: auto
works when you use primary Uploadcare storage (not S3
Bucket) and the default CDN domain ucarecdn.com
.
HTML5 image auto format example
You can use <picture>
tag to render WebP image on client when possible. Place
<img>
within <picture>
and add <source>
with type="image/webp"
.
<picture>
<source srcset="//ucarecdn.com/:uuid/:operations/-/format/webp/" type="image/webp"/>
<img src="//ucarecdn.com/:uuid/:operations/-/format/jpeg/"/>
</picture>
html
Browsers that support WebP will load this image version, while others will display JPEG or PNG instead.
Quality
-/quality/:value/
Sets output JPEG and WebP quality. Since actual settings vary from codec to codec, and more importantly, from format to format, we provide five simple tiers and two automatic values which suits most cases of image distribution and are consistent.
A higher quality level will typically result in a larger output file. However, setting the quality level higher than the original level of the uploaded image won’t increase your file size.
smart
— the default behavior when noquality
operation is applied. Adjusts compression and format automatically to preserve visual quality while minimizing the file size. See the detailed explanation below.smart_retina
— similar tosmart
, yet optimized for double pixel density.normal
— reasonable quality for 1x pixel density.better
— can be used to render relatively small and detailed previews. ≈125% file size compared tonormal
.best
— can be used to deliver images close to their pristine quality (e.g., for artwork). ≈170% file size.lighter
— useful when applied to relatively large images to save traffic without significant quality loss. ≈80% file size.lightest
— highest compression ratio for high pixel ratio. ≈50% file size.
Smart compression
By default, every processed image has smart
quality if no quality
operation is specified.
Smart quality modes analyze input images using content-aware algorithms to determine maximum compression that won't cause noticeable visual artifacts.
Prior to compression, a smart mode selects an output image format. It can be PNG
for images with flat colors (like graphs, charts or web graphics). You can
define format
explicitly while using smart
and
smart_retina
. In this case, the image format won't be adjusted, but the
compression will. For example:
-/quality/smart/-/format/jpeg/
Optimizing for high pixel ratios
A great approach for high pixel densities is to increase images resolution
and reduce quality at the same time. Compared to just increasing quality,
images will look clearer on all screens with nearly the same file size.
To adjust quality, you can use lighter
and lightest
presets, or we can
adjust quality more precisely for this case on the per-image basis with
smart_retina
preset.
Progressive JPEG
-/progressive/yes/
-/progressive/no/
Returns a progressive image. In progressive images, data are compressed in
multiple passes 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
to JPEG
.
Meta information control
-/strip_meta/all/
-/strip_meta/none/
-/strip_meta/sensitive/
The original image often comes with additional information built into the image file. In most cases, this information doesn't affect image rendering and thus can be safely stripped from the processed images. However, you can control this behavior with this option. This could be helpful if you want to keep meta information in the processed image.
Currently, you can keep only EXIF meta information. Other storages, such as XMP or IPTC, will always be stripped.
all
— the default behavior when nostrip_meta
operation is applied. No meta information will be added to the processed file.none
— copies the EXIF from the original file. The orientation tag will be set to 1 (normal orientation).sensitive
— copies the EXIF from the original file but skips geolocation. The orientation tag will be set to 1 (normal orientation).
Automatic compression with Adaptive delivery
The operations described on this page can be applied to a particular image and to groups of images. If you want set it and forget it option, use Adaptive Delivery and it'll take care of balancing compression for all images delivered with Uploadcare.
When Adaptive Delivery is on, you can still tweak individual images to apply certain compression and format options.