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.
Converts an image to one of the following formats:
jpegis a lossy image format (good compression for photos). JPEG doesn’t support an alpha channel; hence you can use the
setfilloperation that sets a background color. All browsers support JPEG.
pngis a lossless format (good compression only for graphics) with alpha channel support. PNG is supported by all browsers.
webpis 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.
autois an automatic image format selection based on alpha channel presence and a client's device and browser.
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/webpis 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.
You can use
<picture> tag to render WebP image on client when possible. Place
<picture> and add
<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.
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
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 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
format explicitly while using
smart_retina. In this case, the image format won't be adjusted, but the
compression will. For example:
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.
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
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.