Images and CDN

Storm Commerce provides a service for scaling and distributing images, documents and videos through a CDN (Content Delivery Network). Each customer is provided a separate storage space and access to CDN. Customer-specific CDN addresses are an option. This documentation describes the non-customer-specific case.

Getting an image

To retrieve an image, use the image key and your client ID.

http://media.cdn.storm.io/<clientId>/<image key>

For example https://media.cdn.storm.io/37/95b48966-178d-4142-97d0-ac61809f8e34

The image server provides a set of options to scale and transform an image. The available directives are:

Width

width=250 or w=250. Valid values are between 1 and 3200. Values outside of this range are ignored (causing the parameter not to be set).

Height

height=210 or h=210. Valid values are between 1 and 3200. Values outside of this range are ignored (causing the parameter not to be set).

Scale

Determine what scaling directions are allowed based on the requested and original image.

scale=<downscaleonly | upscaleonly | both | upscalecanvas> >

• downscaleonly: only scale if the requested size is smaller than original.
• upscaleonly: only scale if the requested size is larger than original.
• both: scale both up and down.
• upscalecanvas: if the requested size is larger than the original, pad the image instead of stretching.

Values are case insensitive.

Fit mode

How to resolve aspect ratio when requested size differs from original mode= max | pad | crop | carve | stretch (m is an alias for mode):

• max: width and height are considered maximum values. The resulting image may be smaller in order to maintain its aspect ratio.
• pad: width and height are considered exact values - padding is used if there's an aspect ratio difference. Use anchor to override middle center default.
• crop: width and height are considered exact values – cropping is used if there is an aspect ratio difference. Use anchor to override the middle center default.
• stretch: width and height are considered exact values. If there is an aspect ratio difference, the image is stretched.

Values are case insensitive.

Anchor

Anchor is used when fit mode is pad or crop, and it determines the anchor point of the scaled image. When fit mode pad is used, it determines where the padding occurs. anchor= topleft | topcenter | topright | middleleft | middlecenter (default) | middleright | bottomleft | bottomcenter | bottomright. a can be used as alias for anchor.

• topleft: puts the padding to the right and bottom.
• Using fit mode crop and anchor bottomleft, crops the requested size out from the bottom left corner of the original image.

Values are case insensitive.

Quality

The image quality setting: quality=90 or q=90. Lower values generates lower resolution/quality but smaller images. Higher generates larger but higher quality images. Valid values are 10-100, 90 is default and recommended.

Background color

Used to specify other than the default white (#ffffff) background for the padding of images.

bgcolor=<3-digit hex code | 6-digit hex code | html named color>

Format

To convert images to another format, use the format (or f) parameter. Valid target image formats are:

• png
• jpg or jpeg
• gif
• webp

Generally format conversions are not necessary. There are some use-cases where conversion to webp is good, but format conversions adds to the response/conversion time. Conversion to to webp might reduce the image size, but there’s no guarantee, it depends on the format and quality of the original image.

PNG output format is not optimized, and will very rarely be a good output format.

CDN

The images can only be accessed through the CDN. The CDN caches the response for the whole URL and query string, so each scaled variant of an image is stored in the CDN.

Performance recommendations

• The larger the image is, the longer time the scaling will take. Scaling will only happen once per CDN edge node per year, for each unique image query string.
• Ensure you use the same query string for all images for the same setting. The two requests /100/abcdef098765fedcba12345?w=100&h=200 and /100/abcdef098765fedcba12345?h=200&w=100 will generate two scalings.
• Don’t use quality > 90 if it’s not really important – images will retain necessary quality for screens with quality=90.

Major loads

When doing changes on a large number of images, please contact Norce (support@storm.io) since traffic patterns that deviates too far from normal load can be blocked (DoS protection). Norce [Storm] can help removing this block, but also help pre-warmning the primary CDN edge nodes to maximize performance.

Legacy Image Server

Legacy Image server is using the CDN http://az666937.vo.msecnd.net. This is using an older Image Resizer plugin and an Azure CDN. Contact Storm Commerce when you want to move from the Legacy Image Server to the current one.

Getting an image

Each image is accessed with an image key which is a GUID that represents the image on the server:

http://az666937.vo.msecnd.net/[storageId]/[guid]

You can try with this image.

http://az666937.vo.msecnd.net/37/95b48966-178d-4142-97d0-ac61809f8e34

Formatting images

The image server is using Image Resizer component to resize images. You can use all parameters supplied to get the format you want. So to get the above image with a fixed width of 100 pixels, you can use this:

http://az666937.vo.msecnd.net/37/95b48966-178d-4142-97d0-ac61809f8e34?w=100

You can find all reformating commands at the Image Resizer documentation.

Resources

Link to Image Resizer (v4)