Output control

Output control includes manipulating image format and quality. A good combination of those provides your web or mobile app with better loading times thus improving conversions and 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 the setfill 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 116Kb
Transparent

400x301 jpeg 16Kb
Opaque

400x301 webp 15Kb,
Transparent, 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 to normal.
  • 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.

1x best 16Kb
Blurry on retina.

1.5x lighter 16Kb
Fits all screens.

2x lightest 16Kb
Perfect for retina.

progressive

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

max_icc_size

-/max_icc_size/0/
-/max_icc_size/:number/

Where :number stands for the maximum allowed ICC profile size in kilobytes.

ICC profile defines how colors in the images should be interpreted and displayed on your screen. Each image can optionally have an embedded ICC profile. If no ICC profile is embedded in an image, its profile should be treated as sRGB. Most of the images on the internet are stored in the sRGB color space, and that's why they don't include any profile embeds.

The problem with some ICC profiles is they can be huge and take up to several megabytes. While the degree of such profiles influencing image representations may not be that great. We solve the extra size problem by getting rid of ICC profiles larger than 10 KB (10240 bytes). Most of the common profiles (sRGB, Display P3, ProPhoto, Adobe RGB, Apple RGB) are below this limit.

The max_icc_size operation allows changing this threshold. For example, -/max_icc_size/0/ will always strip a color profile from an image, while -/max_icc_size/1024/ allows keeping ICC profiles up to one megabyte in size.


Image with the original
Display P3 color profile.

/max_icc_size/0/
No ICC profile, small color shift.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.