Image optimization
On this page
Image optimization is essential for improving the performance of your website or application. Resizing your images and compressing them without sacrificing quality are the critical factors to consider:
- Scaling operations, such as various methods of resize and crop, have the biggest effect.
- Automating images with
-/format/auto/
delivers the most efficient format that the client's browser supports. - Further optimization of the image quality of the resulting image.
It's important to use all three types of operations to achieve the best
results. Try -/quality/smart/
operation that adjusts compression and
format automatically to preserve visual quality while minimizing the file size.
Check out our responsive images guide for more details.
How it works
Every URL transformation generates a modified image version on the fly, while the original file stays intact. The transformed image version will be cached on CDN nodes to optimize delivery.
https://ucarecdn.com/:uuid/-/format/auto/-/quality/smart/-/preview/
Also, you can fetch and deliver images to apply operations without explicitly uploading them:
https://yoursite.ucr.io/-/resize/500x/https://yoursite.com/assets/image.jpg
When applying any image operation, a new file is created (cached on our CDN, and not counted towards your storage limits). If not set, this file is encoded with the default quality and original format.
Image processing operation may be applied only to the appropriate file.
On uploading, the file is analyzed by Uploadcare: file type, metadata, and so on;
the file is assigned an attribute is_image
. If this attribute is true
, then
an operation can be applied to the file. See the Limitations section.
Without any image processing operation in the URL, CDN instructs
browsers to show images (Content-Disposition: inline
) and download other file
types (Content-Disposition: attachment
). Browsers may not show all image formats,
such as TIFF
and HEIC
formats. If you need to display an image, add any image
processing operation, -/preview/
for instance.
Limitations
Image processing operations have limits that you should consider:
- Input image formats
- Mandatory usage of core operations
- File size
- Output image dimensions
- SVG files
- Image resolution
- Rotation
- Animated images
Learn more about image processing limitations.
Scaling operations
Rather than delivering large, full-sized images and relying on the browser to resize them, you can do it programmatically:
The advanced scaling operations allows you to resize images more precisely:
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. All browsers support PNG.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.preserve
returns the image in the original format if it is PNG or JPEG, otherwise coerces to PNG or JPEG. This option is useful when you need to save the image, rather than display it to the end-user.
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.
- AVIF is used as output when all the following conditions are met:
- Output image resolution is under the threshold (currently 2 MPx).
image/avif
MIME type is supported by the client.
- WebP is 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 Uploadcare CDN domain ucarecdn.com
.
400x301 png 116KbTransparent | 400x301 jpeg 16KbOpaque | 400x301 webp 15KbTransparent, size is equal to the opaque one. |
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 quality for lossy formats (JPEG, WebP, and AVIF). Since actual settings vary from codec to codec and, more importantly, from format to format, we provide five simple tiers and two automatic values consistent across different formats and other settings and suit most cases of image distribution.
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.
normal
— the default behavior when noquality
operation is applied. The reasonable quality for 1x pixel density.smart
— 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.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
Smart quality modes (-/quality/smart/
or -/quality/smart_retina/
) 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.
1x best 16KbBlurry on retina. | 1.5x lighter 14Kb | 2x lightest 12KbPerfect for all screens. |
1x smart 9.6KbOptimized size for 1x. | 2x smart_retina 17KbOptimized size for retina displays. |
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
.
Baseline loading. | Progressive loading. |
Strip meta information
-/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 to reduce image weight. Currently, you can only keep EXIF meta information. Other storage, such as XMP or IPTC, will always be stripped when creating a new processed image version.
all
— the default behavior when nostrip_meta
operation is applied. No meta information will be added to the processed file.none
— uses the EXIF from the original file. The orientation tag will be set to 1 (normal orientation).sensitive
— uses the EXIF from the original file but skips geolocation. The orientation tag will be set to 1 (normal orientation).
If you need to restrict user access to EXIF information, please protect your images from editing.
Animated images optimization
Video files are much smaller than GIFs, without noticeable quality loss. Their delivery to end users is much faster. Gif to video operation converts animated image files, such as GIF, WebP, and HEIC, to video and transforms them on the fly. Learn more about animated images optimization.