Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback


Optimizely <<product-name>> 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 <<product-name>>.

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 <<product-name>> 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: <span style="color: #0c5797;">www.yourwebsite.com?</span><span style="color: #759742;">\[commands\]</span> OR<span style="color: #0c5797;"> /images/products/productimage.jpg?</span><span style="color: #759742;">\[commands\]</span>

## 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: <span style="color: #0c5797;">www.yourwebsite.com?</span><span style="color: #759742;">command1=X</span>&<span style="color: #a50c75;">command2=Y</span>

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