Image Crop Transformation

The Crop feature allows you to extract a specific portion of an image while discarding the rest. This is useful for focusing on the most important parts of an image or creating consistent aspect ratios across your digital assets.

Basic Usage

To crop an image using Vyso DAM, you can specify the following parameters in your image URL:

https://assets.vyso.io/account_id/image/asset_id/crop,w_500,h_300,x_100,y_50/asset.jpg

Parameters

Parameter	Description	Example
`w`	Width of the cropped area in pixels	`w_500`
`h`	Height of the cropped area in pixels	`h_300`
`x`	X-coordinate of the top-left corner of the crop	`x_100`
`y`	Y-coordinate of the top-left corner of the crop	`y_50`

Examples

Centered Crop

To crop an image to 400×400 pixels from the center:

https://assets.vyso.io/account_id/image/asset_id/crop,w_400,h_400,g_center/asset.jpg

Custom Position Crop

To crop a 300×200 pixel area starting at position (100, 150):

https://assets.vyso.io/account_id/image/asset_id/crop,w_300,h_200,x_100,y_150/asset.jpg

Best Practices

Know your source dimensions - Understand the dimensions of your original image to avoid cropping outside its boundaries.
Consider focal points - When cropping, ensure important elements of the image remain visible.
Use with responsive designs - Combine cropping with responsive widths to ensure images look good on all devices.

Code Examples

HTML

<img 
  src="https://assets.vyso.io/{account_id}/image/{asset_id}/crop,w_400,h_300/product.jpg" 
  alt="Cropped product image" 
/>

React

import React from 'react';

const ProductImage = ({ productId }) => {
  const imageUrl = "https://assets.vyso.io/{accountId}/image/" + productId + "/crop,w_400,h_300/product.jpg";
  
  return (
    <img 
      src={imageUrl}
      alt="Cropped product image" 
      className="product-thumbnail"
    />
  );
};

export default ProductImage;