Widget, client-side optimizations

  • This documentation is for the version 3.3.0 of the widget. If you're looking for the widget v2 docs, check here.

Quite often, you don’t want hi-res original images uploaded to your account. Transferring those can be inefficient, especially over mobile networks: it is rather slow and expensive on both ends. Uploadcare provides client-side image optimization via the image shrink widget option or data-image-shrink.

The option is passed into your widget as a string holding your preferred resolution and, optionally, a JPEG quality of the resulting image. Even though we ask you to provide the preferred resolution, we preserve the aspect ratio of the original image. Note, image shrink outputs to a JPEG: your layers and alpha channel data will be lost. Here are some examples,

  • 800x600, shrinks images to 0.48 megapixels with the default JPEG quality of 80%.
  • 1600x1600 95%, shrinks images to 2.5 megapixels with 95% JPEG quality.

The optimization resolution you set should not exceed 5 megapixels. All EXIF info from your original images will be copied to the resized ones. This includes orientation, camera model, geolocation, and settings.

Images will not be resized in the following cases,

  • If a client browser does not support all the required APIs.
  • If images are uploaded from social media or URLs.
  • If images are less than two times larger than the preferred size. For example, you can not shrink a 2560x1560px (4 MP) image to 1600x1600px (2.5 MP) while this works with a 2448x3264px (8 MP) original. The reason for that is to preserve the optimal ratio of a decline in quality to drop in file size.

Examples

Resize to 1024x1024px on a client

<input type="hidden" role="uploadcare-uploader" name="my_file"
  data-preview-step=""
  data-image-shrink="1024x1024"
/>

Resize multiple files to 640x640px on a client

<input type="hidden" role="uploadcare-uploader" name="my_files"
  data-multiple=""
  data-image-shrink="640x480"
/>

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.