Optimizely Configured Commerce includes an embedded image resizer that lets you 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.
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.
The Image Resizer will not be available for use if you are using a Content Delivery Network (CDN) to host your image content.
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
| Name | Command | Description |
|---|---|---|
| Constrain by Height | ?height=x | Using this command will constrain the image to a height specified by x (in pixels) |
| Constrain by Width | ?width=y | Using this command will constrain the image to a height specified by y (in pixels) |
| Fit mode: Max | ?w=y&h=x&mode=max | Using 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=crop | Using this command will crop the image to the size specified, starting from the center of the image |
| Fit mode: Pad | ?w=y&h=x | This is the default mode that is applied to images |
| Fit mode: Stretch | ?w=y&h=x&mode=stretch | Using 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=down | Using this command will cause the size of the image to be reduced |
| Scale: Both | ?w=y&h=x&scale=both | Using this command will cause the size of the image to either be reduced or enlarged. Be aware that enlarging an image can cause blurriness and image degradation. |
| Scale: Canvas | ?w=y&h=x&scale=canvas | Using 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 Code | Using 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 gif | Using this command will force the image to be output in a particular format.Be aware that forcing a specific output type may change transparency in the image. |
Change the image anchor point
| Name | Command | Description |
|---|---|---|
| Top Left | ?w=y&h=x&scale=canvas&anchor=topleft | Using 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=topcenter | Using 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=topright | Using 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=middleleft | Using 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=middlecenter | Using 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=middleright | Using 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=bottomleft | Using 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=bottomcenter | Using 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=bottomright | Using this command will set the anchor point for transformations in the bottom right corner of the image |
Please sign in to leave a comment.