Image Resize Settings in 2sxc
This explains the Settings which will be used by subssystemms which...
- ...generate links for the Image Resizer using the Link.Image(...) API
- ...generate
img
andpicture
tags using the IImageService
It is part of the System Settings.
Settings seen here start with System.Images.
...
Predefined Image Settings - Overview
These are the names of the predefined configurations.
You can always create your own and give them other names (like Blog
) or override these settings.
You can do this at the global, site or app level.
Content
for any kind of images in the normal content of a pageLightbox
for images which should open in a lightbox - usually almost full-screenScreen
for images which cover the entire screen, like page-background imagesSection
for images used in page sections, like parallax backgrounds
Configurations on these Settings
Each of these settings have the following properties:
Width
determines how wide an image should be - this should always be set, as it's very important for image resizingHeight
determines how tall an image should be - in most cases this should be emptyAspectRatio
also determines theheight
of the image, but using a factor of the width - so 2:1 means twice as wideResizeMode
how images are resized on the server - typicallycrop
is what is usedScaleMode
determines if resizing also happens, if the desired size is larger than the original image (upscaling)Advanced
a complex JSON configuration used for advanced tuning of resizing and generation ofimg
andpicture
tags. It uses the ImageService.
👉 see Recipes in Image Resize Settings in 2sxc
Note
We recommend to use AspectRatio
instead of Height
to determine the image height, as it often makes a more consistent look and feel.
If both Height
and AspectRatio
are set, then AspectRatio
takes precendence.
Values in the Images Settings of v12.04 and later
Part | Key | Value in Default | Introduced | Comments |
---|---|---|---|---|
Images.Content | v12.04 | For sizing Content-Images | ||
Images.Content | Width | # 1400 |
v12.04 | Full-Content-Width images |
Images.Content | Height | # 865 |
v12.04 | Based on golden ratio |
Images.Content | Quality | # 75 |
v12.04 | Good average jpg/png compression |
Images.Content | AspectRatio | # 1.618 |
v12.04 | Golden Ratio |
Images.Content | ResizeMode | $ crop |
v12.04 | Will fill area exactly |
Images.Content | ScaleMode | $ both |
v12.04 | Up-scale small images |
Images.Content | Advanced | $ {complex} |
v13.10 | Sizes to use for SrcSets |
Images.Lightbox | v12.04 | For Lightbox-Images | ||
Images.Lightbox | Width | # 2000 |
v12.04 | Full-screen Lightboxes |
Images.Lightbox | Height | # 1500 |
v12.04 | 4:3 |
Images.Lightbox | Quality | # 75 |
v12.04 | Good average jpg/png compression |
Images.Lightbox | AspectRatio | # 1.333 |
v12.04 | 4:3 |
Images.Lightbox | ResizeMode | $ max |
v12.04 | Will keep image shape |
Images.Lightbox | ScaleMode | $ down |
v12.04 | Only down-scale, never up-scale |
Images.Lightbox | Advanced | $ {complex} |
v13.10 | Sizes to use for SrcSets |
Images.Screen | v12.04 | For Screen-Size related images like backgrounds | ||
Images.Screen | Width | # 2000 |
v12.04 | Full-Content-Width images |
Images.Screen | Height | # 1500 |
v12.04 | 4:3 |
Images.Screen | Quality | # 60 |
v12.04 | Stronger jpg/png compression |
Images.Screen | AspectRatio | # 1.333 |
v12.04 | 4:3 |
Images.Screen | ResizeMode | $ crop |
v12.04 | Will fill area exactly |
Images.Screen | ScaleMode | $ both |
v12.04 | Up-scale small images |
Images.Screen | Advanced | $ {complex} |
v13.10 | Sizes to use for SrcSets |
Images.Section | v12.04 | For Backgrounds in Content-Area | ||
Images.Section | Width | # 1600 |
v12.04 | Full-Content-Width images |
Images.Section | Height | # 1200 |
v12.04 | Based on golden ratio |
Images.Section | Quality | # 60 |
v12.04 | Stronger jpg/png compression |
Images.Section | AspectRatio | # 1.333 |
v12.04 | 4:3 |
Images.Section | ResizeMode | $ crop |
v12.04 | Will fill area exactly |
Images.Section | ScaleMode | $ both |
v12.04 | Up-scale small images |
Images.Section | Advanced | $ {complex} |
v13.10 | Sizes to use for SrcSets |
Images.Wysiwyg | v12.04 | For Backgrounds in Content-Area | ||
Images.Section | Width | # 1400 |
v16.01 | Full-Content-Width images |
Images.Section | Height | `` | v16.01 | None, show as-is |
Images.Section | Quality | # 75 |
v16.01 | Stronger jpg/png compression |
Images.Section | AspectRatio | `` | v16.01 | None, show as-is |
Images.Section | ResizeMode | $ max |
v16.01 | Preserve aspect ratio |
Images.Section | ScaleMode | $ both |
v16.01 | Up-scale small images |
Images.Section | Advanced | $ {complex} |
v16.01 | Sizes to use for SrcSets |
History
- Full Settings Stack introduced in v12.04 and includes the here mentioned Image settings
- Advanced Json configuration with recipes added in v13.05
- Images.Wysiwyg added in v16.01