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.

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 the setfill 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 algorythm 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.

PNG image with transparency
400x301 png 116Kb
Transparent		JPEG image, opaque
400x301 jpeg 16Kb
Opaque		WEBP image with transparency, 10 times smaller file size than JPG
400x301 webp 15Kb
Transparent, 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>

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. Higher quality will result in a larger output file. Uploadcare recognizes the quality of an input image, and setting quality higher than the original won't increase 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 normal.
  • 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 — adjusts compression and format automatically to preserve visual quality while minimizing the file size.
  • smart_retina — similar to smart, yet optimized for high pixel ratios.

Smart compression

Smart quality modes analyze input images using content-aware algorythms 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 optimization technique is to increase resolution and reduce quality at the same time. Compared to just increasing quality, images will look clearer on higher pixel ratios with nearly the same file size.

Best quality, max file size
1x best 16Kb
Blurry on retina.		Smaller file size for all screens
1.5x lighter 16Kb
Fits all screens.		Even smaller file size, useful for retina
2x lightest 16Kb
Perfect for retina.
Smart compression, content aware
1x smart 9.6Kb
Optimized size for 1x.		Smart compression for higher pixel ratios, content aware
2x smart_retina 16Kb
Optimized 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.

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.

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.