Resizing Images

While accessing image by a URL, you can use some query string parameters to process the way the image ends up on a page.

/media(abef8eb5-d2a4-4ceb-b2a2-2b0a5990fbb4)?h=300&w=200&action=fill

You can set the image's desired width, height or both as well as apply one of the following actions:

•

stretch: the image will be stretched by the specified sizes; the proportion is not observed

•

fit: the image is proportionally scaled down to the maximum to fit within the specified area (also known as "touch from inside")

•

fill: the image is proportionally scaled down to the minimum to completely fill the specified area (also known as "touch from outside")

•

crop: the image is proportionally scaled down with the parts outside the area's boundaries cropped

Besides, with JPEG image files, you can control the image quality when used with width / height settings or alone when compressing images.

Here are the parameters you can use with the image URL:

Parameter	Definition	Values	Default Value
w	width	any integer	none
h	height	any integer	none
mw	maximum width	any integer	none
mh	maximum height	any integer	none
action	Desired image-processing action	stretch, fit, fill, crop	stretch
q	image quality	any integer between 1 and 100	80

Note: The action parameter is ignored when only one dimension is specified. The image will be scaled down (when necessary) in this case.

Example of usage and description

w=100	With only one dimension specified, the image will be scaled down (when necessary), so that the related result image dimension should not exceed the specified value.
w=100&action=fill	The 'action' parameter is ignored if only one dimension is specified.
w=100&h=100 w=100&h=100&action=stretch	The resulting image dimensions will match the specified values. The image's proportion will be affected by this operation.
w=100&h=100&action=fit mw=100&mh=100¹⁾	This action proportionally scales the image down (when necessary) so that it fits the specified area ("touch from inside").
w=100&h=100&action=fill	This action proportionally scales the image down (when necessary) so that it fills the specified area ("touch from outside").
w=100&h=100&action=crop	This action proportionally scales the image down (when necessary) so that it fills the specified area, and crops the parts outside the area's boundaries.

1) The use of the 'mw' (maximum width) and 'mh' (maximum height) parameters is deprecated. Please use 'w' and 'h' with 'action=fit' instead.

Compressing JPEG images

In Experience Management, you can also control the image quality with the q parameter. You can use it in conjunction with width/height settings:

/media(abef8eb5-d2a4-4ceb-b2a2-2b0a5990fbb4)?w=100&h=100&q=50

or alone - to compress images:

/media(abef8eb5-d2a4-4ceb-b2a2-2b0a5990fbb4)?q=50

When resizing the image, the default value is 80.

You can change the default value in Composite.config:

Open Composite.config.

2. Search for the imageQuality attribute.

Change the value to an integer between 1 and 100.

<Composite.Core.Configuration.Plugins.GlobalSettingsProviderConfiguration defaultGlobalSettingsProvider="ConfigBasedGlobalSettingsProvider">
  <GlobalSettingsProviderPlugins>
    <add type="Composite.Plugins.GlobalSettings.GlobalSettingsProviders.ConfigBasedGlobalSettingsProvider, Composite" name="ConfigBasedGlobalSettingsProvider"
    ...
	  imageQuality="80"
    >
      ...
    </add>
  </GlobalSettingsProviderPlugins>
</Composite.Core.Configuration.Plugins.GlobalSettingsProviderConfiguration>