Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Image resizer

Describes how to use the image resizer in Optimizely Configured Commerce.

Optimizely Configured Commerce includes an embedded image resizer that allows you quickly and resize and repurpose an image across your website. This is accomplished by appending different variables and commands on an image location. This guide gives a quick overview and "How To" for using the Image Resizing capabilities found in Configured Commerce.

📘

Note

The Image Resizer will not be available for use if you are using a Content Delivery Network (CDN) to host your image content.

The resizing options should be only be used when absolutely > necessary. If resize commands are appended to image URLs, those images > are resized on every page load and are not cached. This results in a > significant load on the CPU to resize the images and could potentially > bring down the web server down depending on the number of images using > resize commands and the amount of web traffic.

Use the image resizer

The Image Resizer works by appending commands to the end of an image path (either an image already uploaded to Configured Commerce or a hotlinked URL). This is accomplished by adding a question mark to the end of the image path, and then the command. For Example: www.yourwebsite.com?[commands] OR /images/products/productimage.jpg?[commands]

Image resizer basic commands

The following basic commands can be used to transform and resize an image to fit your needs. Each of these commands can be applied to an image after the question mark. To use multiple commands with each other, add an ampersand between each command. For Example: www.yourwebsite.com?command1=X&command2=Y

NameCommandDescription
Constrain by Height?height=xUsing this command will constrain the image to a height specified by x (in pixels)
Constrain by Width?width=yUsing this command will constrain the image to a height specified by y (in pixels)
Fit mode: Max?w=y&h=x&mode=maxUsing this command will resize the image to fit within the width and height boundaries without cropping or scaling the image, but will not increase the size of the image if it is smaller than the output size
Fit mode: Crop?w=y&h=x&mode=cropUsing this command will crop the image to the size specified, starting from the center of the image
Fit mode: Pad?w=y&h=xThis is the default mode that is applied to images
Fit mode: Stretch?w=y&h=x&mode=stretchUsing this command will allow the image to be stretched to fill the specified dimensions, without maintaining the original image aspect ratio
Scale: Down?w=y&h=x&scale=downUsing this command will cause the size of the image to be reduced
Scale: Both?w=y&h=x&scale=bothUsing this command will cause the size of the image to either be reduced or enlarged. Enlarging an image can cause blurriness and image degradation.
Scale: Canvas?w=y&h=x&scale=canvasUsing this command will cause the size of the image to enlarge. The image itself will not upscale, however the border around it will grow to fill the dimensions specified.
Background Color?w=y&h=x&bgcolor=Name or Hex Color CodeUsing this command will change the color of the padding used around an image when using Fit Mode: Pad or Scale: Canvas
Format?w=y&h=x&format=jpg, png, or gifUsing this command will force the image to be output in a particular format. Forcing a specific output type may change transparency in the image.

Change the image anchor point

NameCommandDescription
Top Left?w=y&h=x&scale=canvas&anchor=topleftUsing this command will set the anchor point for transformations in the top left corner of the image
Top Center?w=y&h=x&scale=canvas&anchor=topcenterUsing this command will set the anchor point for transformations in the top middle point of the image
Top Right?w=y&h=x&scale=canvas&anchor=toprightUsing this command will set the anchor point for transformations in the top right corner of the image
Middle Left?w=y&h=x&scale=canvas&anchor=middleleftUsing this command will set the anchor point for transformations in the middle left point of the image
Middle Center?w=y&h=x&scale=canvas&anchor=middlecenterUsing this command will set the anchor point for transformations in the middle of the image. This is the default anchor point for images.
Middle Right?w=y&h=x&scale=canvas&anchor=middlerightUsing this command will set the anchor point for transformations in the middle right point of the image
Bottom Left?w=y&h=x&scale=canvas&anchor=bottomleftUsing this command will set the anchor point for transformations in the bottom left corner of the image
Bottom Center?w=y&h=x&scale=canvas&anchor=bottomcenterUsing this command will set the anchor point for transformations in the bottom middle point of the image
Bottom Right?w=y&h=x&scale=canvas&anchor=bottomrightUsing this command will set the anchor point for transformations in the bottom right corner of the image