Image File Type

Serving your image files with the right dimensions is the simplest way to improve your website performance. It means less load on your site and faster images for your users. And with Rock, it couldn't be easier!

We think you’ll find the information below helpful and straightforward on how to use these tools for your best benefit. Oh, and if you are anything like us you might even find yourself having a little too much fun with your content. So, we will spare you and only go over the primary and most useful commands, knowing that this is a powerful tool where the sky is the limit.

Before anything – you have to set up an image attribute on your content channel or whatever it is you are standardizing such as page attributes.

Alright let's look at an example. Let's say you have a content channel with an item attribute named "Public Photo." Normally in your Lava you would add that image to your mark up like this:
GetImage.ashx?Guid={{ detailImageGuid }}

Here we see the original photo without any resizing.

Let's make this image smaller. GetImage.ashx?Guid={{ detailImageGuid }}&w=468&h=232

Those are super basic. Let’s add some extra commands. Say we always want the images to be a certain aspect ratio and if the image uploaded doesn’t meet that size, then a black border will fill in the rest of the area and the image will align to the top center. Our command would then look something like this:GetImage.ashx?Guid={{ detailImageGuid }}&w=768&h=432&mode=pad&bgcolor=black&anchor=topcenter&quality=100

That’s just a glimpse of how you can use these tools to standardize your content.

Commands

Width and Height

• &w= sets the width of the image in pixels.
• &h= sets the height of the image in pixels.

If only the width and height is set, then the aspect ratio of the image is maintained and defaults to the width size.

Modes
&mode=

• max Resizes the image to fit within the width and height boundaries without cropping or distorting the image. The resulting image will match one of the constraining dimensions, while the other size is altered to maintain the same aspect ratio of the input image.
• pad Resizes the image to fit within the width and height dimensions without cropping or distorting the image and fills the remaining space with a solid color. Use the bgcolor command to set the color to fill the space.
• stretch Stretches the images to the W and H parameters regardless of the actual size of the image.

Background Color
&bgcolor=
Named colors and hex values are supported.

Alignment
&anchor=
The alignment parameter allows you to specify the starting location within the size parameters. Valid values are:
topleft
topcenter
topright
middleleft
middlecenter
middleright
bottomleft
bottomcenter
bottomright

Crop
&crop=
Resizes the image to fill the width and height dimensions and crops any excess image data. The resulting image will match the width and height constraints without distorting the image. Cropping is used by coordinates, x1, y1, x2, y2.

Disable Optimizations
&disableoptimizations=true
Allows disabling resizing by adding disableoptimizations=true to the query string. This allows a CDN or image optimization service to do the resizing. Without this, the query string parameters for resizing will often conflict causing both Rock and the CDN to resize and optimize the file.

Compression and Performance

Compression helps remove unnecessary data from your images, while providing the control you need for high quality at small sizes.

• format The output format to convert the image to. Valid options are jpg, png, gif.

• quality Controls the output quality. Valid values are in the range of 0-100, and the default is 90. Quality can often be set much lower than the default, especially when serving high-DPR images.