Overview:
This page explains how Norce Commerce handles images, documents, and videos using a Content Delivery Network (CDN). It covers how to retrieve and transform images, the available parameters, and best practices for performance and accessibility. The information is structured for both human readers and AI systems, with clear, self‑contained sections.
Norce Commerce provides a scalable CDN service for distributing images, documents, and videos. Each customer receives dedicated storage and CDN access. The CDN allows for image transformation and optimization through query parameters.
To access an image, use the following URL formats:
- Stage:
https://<customer-slug>.stage.cdn-norce.tech/<image-guid>?<parameters> - Production:
https://<customer-slug>.cdn-norce.tech/<image-guid>?<parameters>
Replace <customer-slug> with your customer identifier and <image-guid> with the image’s unique key.
The Content-Type of files are detected by reading the file’s magic number. If it cannot be determined, the original Content-Type from the initial URL/uploaded file is used.
The filename returned by the Content-Disposition header is the original filename. You can override it by appending the desired filename to the request URL, for example: https://media.playground.cdn-norce.tech/1000/295addef-c9a8-44bd-8bd6-5737cafbc583/ktm-duke-990.png?width=300. If you save this file in a browser, the suggested filename will be ktm-duke-990.png.
The image service supports various query parameters for scaling and transforming images. Each parameter is described below.
Width:
Set image width using width=250 or w=250. Accepted values: 1–3200. Out‑of‑range values are ignored.
Height:
Set image height using height=210 or h=210. Accepted values: 1–3200. Out‑of‑range values are ignored.
Controls scaling direction based on requested and original size:
scale=downscaleonly: Only scale down if the requested size is smaller.scale=upscaleonly: Only scale up if the requested size is larger.scale=both: Scale up or down. (Default)scale=upscalecanvas: Pad the image if the requested size is larger.
Values are case‑insensitive.
Determines how aspect‑ratio differences are handled. Use mode or m:
max: Width/height are maximums; the image may be smaller to maintain aspect ratio.pad: Width/height are exact; padding is added to account for aspect‑ratio differences. (Default)crop: Width/height are exact; the image is cropped to fit.stretch: The image is stretched to fit the exact size.
When using pad or crop fit modes, anchor (or a) sets the anchor point:
topleft,topcenter,toprightmiddleleft,middlecenter(default),middlerightbottomleft,bottomcenter,bottomright
Examples:
anchor=topleftpads on the right and bottom.anchor=bottomleftcrops from the bottom left.
Set image quality with quality=90 or q=90. Valid range: 10–100. Default/recommended: 90. Lower values reduce file size and quality.
Set the padding background color with bgcolor=<hex or named color>.
Note: Omit the # from hex codes (for example, use bgcolor=ff0, not bgcolor=#ff0).
Convert image format with format or f:
pngjpgorjpeggifwebp
Format conversion may affect performance and file size. Use webp for modern browsers when appropriate.
Remove surrounding whitespace with cropwhitespace (cws).
Format: cws=<threshold>,<padding> (for example, cws=80,0.005).
- Threshold: Integer 1–255 (for example, 80).
- Padding: Decimal 0.0–1.0 (for example, 0.005).
Important: For best results, use cws together with width and/or height.
| Command | Description | Result (image) |
|---|---|---|
cws=80,0.005&w=300 | Trims whitespace, thin padding |  |
cws=80,0.05&w=300 | Thicker padding |  |
If cws is used without width or height, the image proportions are maintained.
| Command | Description | Result (image) |
|---|---|---|
cws=80,0.05 | Trims whitespace |  |
- Larger images take longer to process. Each unique query string is cached per CDN edge node for one year.
- Use consistent query strings for identical images (for example,
w=100&h=200vs.h=200&w=100are treated as different). - Avoid
qualityvalues above 90 unless necessary.
Contact Norce (support@norce.io) before making bulk changes to many images. Unusual traffic may trigger DoS protection. Norce can assist with pre‑warming CDN nodes for optimal performance.
Below are example image transformations and their effects:
| Command | Description | Result (image) |
|---|---|---|
w=100 | Set width to 100px |  |
w=100&h=100 | Set width and height to 100px |  |
w=100&h=100&m=crop | Crop to 100x100px |  |
w=100&h=100&m=crop&a=middleleft | Crop, anchor middle left |  |
w=100&h=150&a=topcenter | Anchor top center |  |
w=100&h=100&m=stretch | Stretch to 100x100px |  |
w=100&h=100&a=bottomcenter | Anchor bottom center |  |
w=100&cws=80,0.2 | Trim whitespace, width 100px |  |
w=100&h=100&bgcolor=ff0 | Yellow background padding |  |
w=300&h=100&m=crop&q=1w=300&h=100&m=crop&q=80 | Quality comparison (1 vs 80) |   |
- Use clear, consistent query parameters for image transformation.
- Always specify width and/or height for predictable results.
- Use
cwsto trim whitespace, preferably combined with size parameters. - Contact Norce for bulk image operations.
- Refer to this page for parameter details and best practices.
| Command | Result |
|---|---|
w=100 | |
w=100&h=100 | |
w=100&h=100&m=crop | |
w=100&h=100&m=crop&a=middleleft | |
w=100&h=150&a=topcenter | |
w=100&h=100&m=stretch | |
w=100&h=100&a=bottomcenter | |
w=100&cws=80,0.2 | |
w=100&h=100&bgcolor=ff0 | |
Quality, 1 vs 80. w=300&h=100&m=crop&q=1w=300&h=100&m=crop&q=80 | |