Image optimization

Compression is essential for improving the performance of your website or application. Reducing image size without sacrificing quality and scaling operations are critical factors to consider.

Note: Keep in mind that when applying any image operation, a new file is created (cached on our CDN, and not counted towards your storage limits). This file is encoded with the default format and quality settings; however, you can adjust them to meet your requirements better.

We recommend setting your image quality on autopilot using the -/quality/smart_retina/ operation. This will preserve visual quality while minimizing the file size and choosing the most suitable output format.

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. 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.

Note: We partially support AVIF. See the next chapter for details.

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: AVIF is activated for your project (contact sales); output image resolution is under the threshold (currently 1 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 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>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 — adjusts compression and format automatically to preserve visual quality while minimizing the file size. See the detailed explanation below.
  • smart_retina — similar to smart, yet optimized for double pixel density.
  • normal — the default behavior when no quality operation is applied. The reasonable quality for 1x pixel density.
  • 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 compression

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.

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

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 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 no strip_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.

GIF 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 GIF to video operation.

Resize and crop

Rather than delivering large, full-sized images and relying on the browser to resize them, you can programmatically resize and crop them to reduce file weight further.