SpeedSize Transformation Parameters

SpeedSize provides a range of powerful transformation parameters that allow you to control media format, resizing, cropping, background modifications, and more. These parameters enable dynamic adjustments to your images and videos, ensuring optimal quality and performance across all devices.

This article contains the following topics:

• Example of Usage
• Detailed breakdown of each transformation option
  • Format & Delivery Options
  • Resizing & Scaling
  • Cropping & Positioning
  • Visual Effects & Background Adjustments
  • Video-Specific Parameters
  • Custom Parameters

Example of Usage

To apply a parameter, simply add it to the end of your media URL after ?speedsize= using the following structure:

https://aicdn.speedsize.com/CLIENT_ID/your-website.com/img/sample.jpg?speedsize=w_800,h_800

Multiple parameters can be combined using commas.

Detailed breakdown of each transformation option

Format & Delivery Options

• f_FORMAT – Specifies the desired output format (e.g., jpeg, webp, png, mp4, vp9, hevc, av1, gif, svg, jxr, jp2, avif).
  • f_auto (default) automatically selects the best available format based on browser support, the Accept header, and other request parameters.
  • f_legacy ensures compatibility with older browsers by delivering the most suitable format they support.
• s_FORMAT – Explicitly indicates format support (jpeg, webp, png, mp4, vp9, hevc, av1, gif, svg, jxr, jp2, avif) for browsers.
• ns_atwebp – Explicitly indicates the lack of support for displaying animated WebP images with transparency, even if the corresponding support is indicated by the Accept header (Safari-specific).
• ns_aavif - Disables animated AVIF output. Useful for browsers or environments where animated AVIF support is limited.
• rstrz – Converts vector-based images (SVG) into rasterized formats where applicable.

Resizing & Scaling

• w_n – Scales the media to a width of n pixels while maintaining the aspect ratio if height is not specified.
• h_n – Scales the media to a height of n pixels while maintaining the aspect ratio if width is not specified.
• mxw_n – Limits the maximum width to n pixels by selecting the nearest larger resolution from the predefined standard sizes: 
  64, 96, 128, 160, 192, 256, 320, 360, 480, 600, 640, 720, 768, 800, 1024, 1080, 1200, 1280, 1366, 1440, 1536, 1680, 1920, 2048, 2560, 2880, 3440, 3840.
• cwidth_n – A dynamic width transformation parameter that automatically adjusts the requested image width based on the visitor’s device pixel ratio (DPR) and the configured SpeedSize DPR value (default: 1.5, representing the recommended intrinsic-to-rendered image ratio).
  This parameter is designed for responsive websites that use srcset/sizes. On high-DPR devices, browsers often select image variants that are 3× or more larger than their rendered dimensions. cwidth_n dynamically adjusts the requested width to achieve an intrinsic-to-rendered ratio close to the recommended 1.5–2× range using the following formula:
  effective mxw = requested width / detected DPR × SpeedSize DPR
cwidth_n uses the same predefined width variants as mxw_n. In many integrations (for example, Shopify), it is enabled automatically through URL rewriting, transparently replacing the standard width parameter.
• ar_n:m - Resizes images or videos to the specified aspect ratio while preserving content proportions. Examples: ar_1:1, ar_16:9.
  Can be used on its own or in combination with either w_n or h_n. It should not be used together with both w_n and h_n, as this may produce unintended results.

Cropping & Positioning

• c_auto – Automatically crops the most important area of the image according to the dimensions specified in the w_n and h_n parameters, while preserving the requested aspect ratio when the specified width or height exceeds the original image dimensions.

• c_manual – Manually crops the image using w_n and h_n, along with x_n and y_n for precise positioning.
• p_POSITION – Positions an image on a background when using r_contain, with options like top, righttop, right, rightbottom, bottom, leftbottom, left, lefttop, centre by default.

Visual Effects & Background Adjustments

• b_COLOR – Sets a custom background color (e.g., b_D3D3D3 for light grey).

• fltn (fltn_COLOR) – Merges transparent backgrounds with a white color by default or a specified hex-code RGB color (e.g., fltn_D3D3D3 for light grey).

• r_contain – Maintains the aspect ratio during resizing while applying letterboxing to reach the specified width and height where necessary. The letterbox color can be customized with the b_COLOR parameter, defaulting to white.

• r_inside – Preserves the aspect ratio during resizing, ensuring the image fits within the specified width and height without exceeding them. Letterboxing is not applied.

• trm - Trims the image background. Can be used as a standalone parameter (trm), in which case the system automatically detects the dominant background color and trims the image accordingly, or with a specific background HEX value (for example, trm_D3D3D3), which trims only the specified background color.
• trmt_n - An optional parameter that can be used in conjunction with trm to define the color threshold. This is useful when dealing with gradient backgrounds that cannot be fully removed by trimming a single color value. Allowed values for n range from 0 to 255.
• xt_n – Extends all edges of an image by n pixels with a specified background color (b_COLOR, default white). Useful for adding padding or extending canvas size without resizing the original image.
• xtt_n, xtr_n, xtl_n, xtb_n – Extend the top, right, left, or bottom edge of an image, respectively.
• gs – Converts an image to grayscale (black & white).

• blr or blr_N – Applies a mild blur effect by default. If N is provided, it applies a blur using a Gaussian mask with a sigma value of 1 + radius / 2. The value of N can range from 0 to 1000.

Video-Specific Parameters

• v_muted – Removes the audio track from a video. Useful when videos are intended to autoplay silently or be used as background/hero media.
• pstr - Generates a poster image from the first frame of a video. The generated poster can be further resized using mxw_n, w_n, or h_n. This is useful for video previews, placeholders, or when a poster image is required for performance or UX reasons.
• s_videoimg – Enables video files to be displayed within the <img> element instead of an animated image (Safari-specific).

Custom Parameters

SpeedSize offers a variety of custom transformation parameters tailored to specific client needs. If you require additional customization, please reach out to SpeedSize support for guidance.