api-reference > assets

Image resizing

Last updated Invalid Date

Tipe asset management gives you get access to numerous image transformations. To serve images you load into Tipe, you can easily resize your images dynamically by changing the URL. For example, if you enter the following URL for the Tipe logo into the address bar, you'll see a large version of the Tipe cat:

url
https://cdn.tipe.io/5a715b6a7d31e800136ac91e/f4a35612-98fb-423d-907a-3c1c43eb74f3

You can now edit the width of it by appending ?w=x, where x is the number of the width you want:

url
https://cdn.tipe.io/5a715b6a7d31e800136ac91e/f4a35612-98fb-423d-907a-3c1c43eb74f3?w=150

You can transform just the height, ?h=y where y is the height, or width and height at the same time with ?w=x&h=y:

url
https://cdn.tipe.io/5a715b6a7d31e800136ac91e/f4a35612-98fb-423d-907a-3c1c43eb74f3?w=150&h=150

For more details on resizing and cropping see the imigx documentation.

fit

Use the fit parameter to fit the output image into the desired image size and configure how you want to fill the background. There are nine possible values for fit:

  • clip: resizes the image to fit the specified dimensions maintaining the aspect ratio; fit=clip is the default.
  • clamp: fills the specified dimensions and extends into extra space using the pixels at the edge of the image.
  • crop: crops the image. Make sure to set the h and w parameters.
  • facearea: zeroes in on a face or group of faces. 🎉😎
  • fill: fills the space and maintains ratio. Fills any unused portion of the specified dimensions with a solid color. Make sure to use the bg parameter to specify a color.
  • fillmax: keeps the original size of the image and fill the rest with a solid color.
  • max: keeps original size as the max size. Maintains original aspect ratio.
  • min: resizes and crops to specified dimensions. Won't exceed original dimensions.
  • scale: resizes to fit and doesn't preserve aspect ratio.

For more detailed info on fit, see the imgix documentation on Resize Fit Mode fit.

crop

When using fit=crop, be sure to set w and h. By default, crop crops from the center of the image. To give you more fine-grained control, there are a number of other options for customization which you can use, comma separated. The options are:

  • top: crop from the top
  • bottom: crop from the bottom
  • left: crop from the left
  • right: crop from the right
  • faces: detects and crops to faces
  • focalpoint: specify a focal point for cropping using x, y, and zoom coordinates with fp-x, fp-y, and fp-z
  • edges: looks for edges and crops to an area containing them
  • entropy: crops to busy sections of an image

For more detailed info on crop, see the imgix documentation on Crop Mode crop.

trim

Use trim to take away a border around an image and alter its size. You need set trim in order to use other trim parameters. You can set trim to auto or color:

  • trim=auto: automatically trims the image, based on the border color
  • trim=color: trims the image based on a color you specify

Using trim=auto

When you have set trim=auto, you can use trimsd, as stated in the imgix docs, "to specify the standard deviation among pixels within a border". You can also use trimmd, which is the mean difference threshold for trimming and which defaults to 11. The lower the number, the more aggressive the trim.

Using trim=color

Once you set trim=color, you can use additional trim parameters. Use trimcolor to specify a color using a hex code. Use trimtol to specify a tolerance — it defaults to 0.

For more detailed information about trim and related options, see the imgix Trim documentation.


Still have questions?

If these Assets docs haven't answered all your Tipe Assets questions, email us at support@tipe.io or start a chat with us in the Tipe Dashboard. We're always working on our docs and welcome suggestions.