Compression
Optimizing images means making them load faster at a minimum visual quality loss. This mainly includes manipulating image format and quality. A right balance of those helps improving conversions and bounce rates; it positively affects your SEO ranking.
Format
-/format/:format/
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 thesetfill
operation 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
the image/webp
MIME-type and you are running the default Uploadcare setup with
our storage and the default CDN domain,
ucarecdn.com
.
400x301 png 116KbTransparent | 400x301 jpeg 16KbOpaque | 400x301 webp 15KbTransparent, size is equal to the opaque one. |
Beside using -/format/auto/
, there is another way to control which image format
is delivered to a client. In HTML 5, you can force the browser to automatically
choose a WebP image version over others. This is done by using <picture>
.
Simply, wrap your <img>
element with <picture>
and add <source>
having its
type set to type="image/webp"
. Compatible browsers will then automatically
load the WebP image version; others will take either JPEG or PNG.
<picture>
<source srcset="//ucarecdn.com/:uuid/:operations/-/format/webp/" type="image/webp"/>
<img src="//ucarecdn.com/:uuid/:operations/-/format/auto/"/>
</picture>
Quality
-/quality/:value/
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 tonormal
.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 defineformat
explicitly.
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
.
GIF to Video
Uploadcare Image Transformations features GIF to Video conversion that provides better loading times thus reducing your bounce rate. The feature is available on paid plans only.
GIF to Video workflow is the same as with other image
transformations. The only difference is the gif2video
URL directive should be
included after the /
separator, not /-/
.
/:uuid/gif2video/
gif2video
converts GIF files to video on the fly. Video files are much smaller
than GIFs, without any quality loss. Their delivery to end users is much faster.
In case your source file is not an animated GIF or the conversion feature is
disabled for your project, you’ll get an HTTP 400 error.
Please note, even though you don’t use /-/
after :uuid
with the gif2video
directive, the separator is used with specific operations designed for the GIF
to Video workflow: format
and quality
. We use such approach for our parser
to tell the format
and quality
operations related to GIF to Video from their
general versions.
Set Output Video Format, format
-/format/:value/
Converts an animated GIF to one of the following formats:
mp4
— H.264 video format. The format is supported by all major browsers. When no format is specified,mp4
is used by default.webm
— WebM video format. Supported in Google Chrome, Firefox, and Opera.
When embedding videos, the best practice is to specify both formats and let clients choose a more suitable one:
<video width="384" height="216" autoplay loop muted webkit-playsinline playsinline>
<source src="https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/format/webm/road.gif" type="video/webm"/>
<source src="https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/format/mp4/road.gif" type="video/mp4"/>
</video>
Original GIF: 6.5MB, MP4: 251KB, WebM: 202KB
Set Output Video Quality, quality
-/quality/:value/
Sets both quality and compression ratio for the output video.
There are five :value
levels: from better compression to better quality:
lightest
, lighter
, normal
, better
, best
.
When quality
is not explicitly specified, normal
is used by default.