Image Resize and Crop
Uploadcare Image Transformations allow you to adjust image size and crop options on the fly, adjust resizing behavior, and set a background fill color when cropping images.
- Resize image proportionally to fit into given dimensions,
preview - Resize image to fit into specified dimensions,
resize - Crop image to specified dimensions implementing offsets,
crop - Scale image and crop it where needed,
scale_crop - Adjust resizing behavior,
stretch - Define fill color to use with
crop,setfill
Responsive Images are crucial to optimizing your image performance. You can check whether or not you are serving appropriately sized images to desktop and mobile layouts via PageDetox, our tool for analyzing and optimizing images.
Resize Image Proportionally, preview
-/preview/-/preview/:two_dimensions/
Reduces an image proportionally for it to fit into the given dimensions in pixels. If dimensions are not specified, we use the default values of 2048x2048 pixels.
/:uuid/-/preview/
/:uuid/-/preview/300x500/
Resize Image, resize
-/resize/:one_or_two_dimensions/
Resizes an image to fit into the specified dimensions. With just a single linear dimension specified, preserves your original aspect ratio and resizes an image along one of its axes.
/:uuid/-/resize/200x200/
/:uuid/-/resize/200x/
/:uuid/-/resize/x200/
Crop Image, crop
-/crop/:two_dimensions/-/crop/:two_dimensions/:two_coords/-/crop/:two_dimensions/center/
Crops an image using specified dimensions and offsets. If no offset values are passed into the operation, the top-left image corner is used by default.
Original image. | /crop/2000x1325/center/ | /crop/960x636/2400,700/ |
If given dimensions are greater than the ones of the original image, the image is rendered inside a color-filled box. The color of that box can be changed via the setfill operation.
Downscale and Crop Image, scale_crop
-/scale_crop/:two_dimensions/-/scale_crop/:two_dimensions/center/
Scales down an image until one of its dimensions gets equal to some of the specified ones; the rest is cropped. This proves useful when your want to fit as much of your image as possible into a box. Let us compare the two resizing methods:
/resize/1024x1024/Requested size. Distorted. | /preview/1024x1024/Adjusted size. No distortion. | /scale_crop/1024x1024/Requested size. No distortion. |
Set resize Behavior, stretch
-/stretch/:mode/
Sets the resize behavior when a source image is smaller than the resulting dimensions. The following modes can apply:
on— stretches an image up, the default option.off— forbids stretching an image along any dimension that exceeds image size along any of its axes.fill— does not stretch an image, the color-filled frame is rendered around instead, the default fill color is used.
/preview/160x160/-/resize/220x/ | /preview/160x160/-/stretch/off/-/resize/220x/ | /preview/160x160/-/stretch/fill/-/resize/220x/ |
Set Fill Color, setfill
-/setfill/:color/
Sets the fill color used with crop, stretch or when converting an alpha channel enabled image to JPEG. The operation uses hexadecimal notation to define colors.
/preview/440x380/-/crop/440x380/center/ | /preview/440x380/-/setfill/ece3d2/-/crop/440x380/center/ | /setfill/ece3d2/-/format/jpeg/ |