Image Resize Transformation

The Resize feature allows you to dynamically scale images to your desired dimensions while preserving the original aspect ratio. This is essential for optimizing image delivery, improving page load times, and ensuring your images look great on any device.

Basic Usage

To resize an image using Vyso DAM, simply specify the desired width or height (or both) in your image URL:

Parameters

How Resize Works

The Resize operation works in the following ways:

• Width only (w): The image is resized to the specified width while maintaining its aspect ratio.
• Height only (h): The image is resized to the specified height while maintaining its aspect ratio.
• Both width and height (w and h): The behavior depends on the fit parameter:
  • fit_inside: Image is resized to fit within the specified dimensions (default)
  • fit_outside: Image is resized to cover the specified dimensions

Examples

Resize by Width

To resize an image to 800 pixels wide while maintaining the aspect ratio:

Resize by Height

To resize an image to 600 pixels tall while maintaining the aspect ratio:

Resize with Maximum Dimensions

To resize an image to fit within a 800×600 box:

Resize with Quality Control

To resize an image to 1000 pixels wide with 75% quality:

Best Practices

• Use responsive sizes - Provide different image sizes for different viewport widths.
• Don't upscale unnecessarily - Avoid resizing images to dimensions larger than the original, as this can reduce quality.
• Balance quality and performance - Adjust the quality parameter to find the sweet spot between file size and visual quality.
• Consider image content - Use the appropriate fit parameter based on the content of your image and its display context.

Code Examples

Responsive Images with HTML

<img 
  srcset="
    https://assets.vyso.io/{account_id}/image/{asset_id}/resize,w_400/asset.jpg 400w,
    https://assets.vyso.io/{account_id}/image/{asset_id}/resize,w_800/asset.jpg 800w,
    https://assets.vyso.io/{account_id}/image/{asset_id}/resize,w_1200/asset.jpg 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  src="https://assets.vyso.io/{account_id}/image/{asset_id}/resize,w_800/asset.jpg"
  alt="Responsive image example"
/>

React Component

import React from 'react';

const ResponsiveImage = ({ assetId, alt }) => {
  return (
    <img 
      srcSet={[
        `https://assets.vyso.io/{accountId}/image/${assetId}/resize,w_400/image.jpg 400w`,
        `https://assets.vyso.io/{accountId}/image/${assetId}/resize,w_800/image.jpg 800w`,
        `https://assets.vyso.io/{accountId}/image/${assetId}/resize,w_1200/image.jpg 1200w`,
      ].join(', ')}
      sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
      src={`https://assets.vyso.io/{accountId}/image/${assetId}/resize,w_800/image.jpg`}
      alt={alt}
      className="responsive-image"
    />
  );
};

export default ResponsiveImage;