Image Sizes
Note: We provide double size retina images for modules that are up to 6 columns wide. For performance reasons we provide above 6 columns only single size images.
Elements |
Image |
Editor crop |
Editor note |
Srcset type(Display Density,Width Descriptor) |
WCMS src and srcset definition |
Sizes attribute |
|---|---|---|---|---|---|---|
| [E 005] Header | Logo | no, controlled by WCMS | No whitespace | WD | src="122" srcset="78 78w, 122 122w, 244 244w" |
sizes="(max-width: 764px) 15vw, (max-width: 1010px) 13vw, 7vw" |
| [E 006] Footer | Social icons | no, controlled by WCMS | - | DD | src="30" srcset="30 1x, 60 2x" |
- |
| [E 008] Navigation | Img | w: 564 h: flex (1/2w recommended) |
images next to each other must be cropped to the same height | DD | src="282" srcset="282 1x, 564 2x" |
- |
Page frames |
Image |
Editor crop |
Editor note |
Srcset type(Display Density,Width Descriptor) |
WCMS src and srcset definition |
Sizes attribute |
|---|---|---|---|---|---|---|
| [P 301] Product overview | Img | no, controlled by WCMS | - | WD | src="292" srcset="146 146w, 292 292w, 584 584w" |
sizes="(max-width: 764px) 50vw, (max-width: 1010px) 33vw, 15vw" |
| [P 302] Product Details | Key visual | w: 1920 h: flex (0.4w recommended) |
- | WD | src="1440" srcset="960 960w, 1440 1440w, 1920 1920w" |
sizes="100vw" |
| Img product | no, controlled by WCMS | - | WD | src="760" srcset="380 380ww, 760 760w, 1520 1520w" data-zoom-image="1520" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 50vw, 40vw" | |
| Img thumbnail | no, controlled by WCMS | - | DD | src="60" srcset="60 1x, 120 2x" |
- | |
| [P 304] Bookmark list | Img | no, controlled by WCMS | - | DD | src="105" srcset="105 1x, 210 2x" data-zoom-image="300" |
- |
| [P 305] Product comparison list | Img | no, controlled by WCMS | - | DD | src="45" srcset="45 1x, 90 2x" |
- |
| [P 306] Product Details (LS) | Img product | no, controlled by WCMS | - | WD | src="760" srcset="380 380w, 760 760w, 1520 1520w" data-zoom-image="1520" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 50vw, 40vw" |
| Img thumbnail | no, controlled by WCMS | - | DD | src="60" srcset="60 1x, 120 2x" |
- | |
| Pictograms | no, controlled by WCMS | - | DD | src="30" srcset="30 1x, 60 2x" |
- | |
| [P 306] Product Accessories (LS) | Img product | no, controlled by WCMS | - | DD | src="105" srcset="105 1x, 210 2x" |
- |
| [P 308] OS - Product Selector | Img | no, controlled by WCMS | - | DD | src="50" | - |
Modules |
Image |
Editor crop |
Editor note |
Srcset type(Display Density,Width Descriptor) |
WCMS src and srcset definition |
Sizes attribute |
|---|---|---|---|---|---|---|
| [M 001] Product carousel | Img | no, controlled by WCMS | - | WD | src="400" srcset="200 200w, 400 400w, 800 800w" |
sizes="(max-width: 764px) 50vw, (max-width: 1010px) 33vw, 21vw" |
| [M 101 - 104] Full size | Img | s. Img retina | - | background-image URL in HTML | 1920 (max-width: 764px) 900 (max-width: 520px) 600 |
- |
| Img retina | w: 1920 h: 1920 |
- | background-image URL in HTML | 1920 (max-width: 764px) 1800 (max-width: 520px) 1200 |
- | |
| [M 201] Full size - Text on image, video - slider | Img | w: 1920 h: flex (0.4w recommended) |
images must be cropped to the same height | WD | src="1440" srcset="960 960w, 1440 1440w, 1920 1920w" |
sizes="100vw" |
| [M 304] 12 col – Text on image, video | Img | s. Img retina | - | background-image URL in HTML | 1260 (max-width: 764px) 725 (max-width: 520px) 480 |
- |
| Img retina | w: 1260 h: flex |
- | background-image URL in HTML | 1260 (max-width: 764px) 1450 (max-width: 520px) 960 |
- | |
| [M 305] 12 col – Text on image, video - slider | Img | w: 1260 h: 700 (recommended) |
images must be cropped to the same height | WD | src="940" srcset="640 640w, 940 940w, 1260 1260w" |
sizes="(max-width: 1010px) 100vw, 70vw" |
| [M 306] Image slider | Img | w: 1260 h: 700 (recommended) |
images must be cropped to the same height | WD | src="940" srcset="640 640w, 940 940w, 1260 1260w" |
sizes="(max-width: 1010px) 100vw, 70vw" |
| [M 402] 6 col - Text on image, video | Img | w: 1230 h: flex (1/2w recommended) |
images next to each other must be cropped to the same height | WD | src="923" srcset="615 615w, 923 923w, 1230 1230w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 50vw, 33vw" |
| [M 403] 6 col - Text on image, video + text | Img | w: 1230 h: flex (1/2w recommended) |
- | WD | src="923" srcset="615 615w, 923 923w, 1230 1230w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 50vw, 33vw" |
| [M 404] 6 col - Image, video + text | Img | w: 1230 h: flex (1/2w recommended) |
- | WD | src="923" srcset="615 615w, 923 923w, 1230 1230w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 50vw, 33vw" |
| [M 405] 6 col - Image, video + text w/ background | Img | w: 1230 h: flex (1/2w recommended) |
images next to each other must be cropped to the same height | WD | src="923" srcset="615 615w, 923 923w, 1230 1230w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 50vw, 33vw" |
| [M 501] 4, 6, 8 col - Image, video + text w/ background - Slider | 4 col | w: 800 h: flexible (recommended 1w) |
The height of the grey/orange box adapts to the current height of the image. Note: if you add content to the box, please check the layout on all viewports. Images in slider must be cropped to the same height. |
WD | src="600" srcset="400 400w, 600 600w, 800 800w" |
sizes="(max-width: 764px) 100vw, (max-width: 1010px) 30vw, 21vw" |
| 6 col | w: 1230 h: flexible (recommended 0.8w) |
The height of the grey/orange box adapts to the current height of the image. Note: if you add content to the box, please check the layout on all viewports. Images in slider must be cropped to the same height. |
WD | src="923" srcset="615 615w, 923 923w, 1230 1230w" |
sizes="(max-width: 764px) 100vw, (max-width: 1010px) 45vw, 35vw" | |
| 8 col | w: 830 h: flexible (recommended 0.6w) |
The height of the grey/orange box adapts to the current height of the image. Note: if you add content to the box, please check the layout on all viewports. Images in slider must be cropped to the same height. |
WD | src="623" srcset="415 415w, 623 623w, 830 830w" |
sizes="(max-width: 764px) 100vw, (max-width: 1010px) 62vw, 45vw" | |
| [M 502] 4, 6, 8 col - Text on image, video | Note: In WCMS is a toggle to switch between "fix height: yes / no". If yes, use the given heights for cropping. If no, the height can be choosen flexibly. | |||||
| 4 col | w: 800 h: 800 |
Above 1010px vw: fix height of 400px. The height of the grey/orange box adapts to the current height of the image. Note: if you add content to the box, please check the layout on all viewports. |
WD | src="600" srcset="400 400w, 600 600w, 800 800w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 30vw, 21vw" | |
| 6 col | w: 1230 h: 800 |
Above 1010px vw: fix height of 400px. The height of the grey/orange box adapts to the current height of the image. Note: if you add content to the box, please check the layout on all viewports. |
WD | src="923" srcset="615 615w, 923 923w, 1230 1230w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 45vw, 35vw" | |
| 8 col | w: 830 h: 400 |
Above 1010px vw: fix height of 400px. The height of the grey/orange box adapts to the current height of the image. Note: if you add content to the box, please check the layout on all viewports. |
WD | src="623" srcset="415 415w, 623 623w, 830 830w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 62vw, 45vw" | |
| [M 503] 3, 4 col - Text on image, video - Slider | 4 col (3 items) | w: 800 h: 660 (recommended) |
fix proportions for all images in one row | WD | src="600" srcset="400 400w, 600 600w, 800 800w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 30vw, 20vw" |
| 3 col (4 items) | w: 586 h: 660 (recommended) |
fix proportions for all images in one row | WD | src="440" srcset="293 293w, 440 440w, 586 586w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 40vw, 15vw" | |
| [M 513] 3,4 col - Text on image, video | 4 col (3 items) | w: 1420 h: 660 |
fix proportions for all images in one row | WD | src="1040" srcset="710 710w, 1040 1040w, 1420 1420w" |
sizes="(max-width: 764px) 100vw, (max-width: 1010px) 30vw, 21vw" |
| 3 col (4 items) | w: 586 h: 660 (recommended) |
fix proportions for all images in one row | WD | src="440" srcset="293 293w, 440 440w, 586 586w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 45vw, 15vw" | |
| [M 504] 3, 4 col - Image, video + text w/ background - Slider | 4 col (3 items) | w: 800 h: flex (recommended 0.6w) |
images next to each other must be cropped to the same height | WD | src="400" srcset="200w 200w, 400 400w, 800 800w" |
sizes="(max-width: 520px) 45vw, (max-width: 1010px) 30vw, 20vw" |
| 3 col (4 items) | w: 588 h: flex (recommended 0.6w) |
images next to each other must be cropped to the same height | WD | src="294" srcset="147 147w, 294 294w, 588 588w" |
sizes="(max-width: 520px) 45vw, (max-width: 1010px) 20vw, 15vw" | |
| Social icons | no, controlled by WCMS | - | DD | src="40" srcset="40 1x, 80 2x" |
- | |
| [M 514] 3, 4 col - Image, video + text w/ background | 4 col (3 items) | w: 800 h: flex (recommended 0.6w) |
images next to each other must be cropped to the same height | WD | src="400" srcset="200w 200w, 400 400w, 800 800w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 40vw, 21vw" |
| 3 col (4 items) | w: 588 h: flex (recommended 0.6w) |
images next to each other must be cropped to the same height | WD | src="294" srcset="147 147w, 294 294w, 588 588w" |
sizes="(max-width: 520px) 100vw, (max-width: 1010px) 40vw, 15vw" | |
| Social icons | no, controlled by WCMS | - | DD | src="40" srcset="40 1x, 80 2x" |
- | |
| [M 505] 3, 4 col - Benefits | 4 col | w: 240, h: 240 | proportion 1:1 | DD | src="120" srcset="120 1x, 240 2x" |
- |
| 3 col | w: 240, h: 240 | proportion 1:1 | DD | src="120" srcset="120 1x, 240 2x" |
- | |
| [M 506] 2x3 col - Image, video + 6 col - Text | Img | w: 588 h: flex |
- | WD | src="294" srcset="147 147w, 294 294w, 588 588w" |
sizes="(max-width: 520px) 50vw, (max-width: 1010px) 25vw, 15vw" |
| [M 507] 2-9 col - Image, video + text | 9 col | w: 940 h: flex |
- | WD | src="705" srcset="470 470w, 705 705w, 940 940w" |
sizes="(max-width: 520px) 50vw, (max-width: 1010px) 70vw, 50vw" |
| 8 col | w: 830 h: flex |
- | WD | src="623" srcset="415 415w, 623 623w, 830 830w" |
sizes="(max-width: 520px) 50vw, (max-width: 1010px) 60vw, 45vw" | |
| 7 col | w: 724 h: flex |
- | WD | src="543" srcset="326 326w, 543 543w, 724 724w" |
sizes="(max-width: 520px) 50vw, (max-width: 1010px) 55vw, 40vw" | |
| 6 col | w: 1230 h: flex |
- | WD | src="923" srcset="615 615w, 923 923w, 1230 1230w" |
sizes="(max-width: 520px) 50vw, (max-width: 1010px) 45vw, 35vw" | |
| 5 col | w: 1016 h: flex |
- | WD | src="762" srcset="508 508w, 762 762w, 1016 1016w" |
sizes="(max-width: 520px) 40vw, (max-width: 1010px) 40vw, 30vw" | |
| 4 col | w: 800 h: flex |
- | WD | src="600" srcset="400 400w, 600 600w, 800 800w" |
sizes="(max-width: 520px) 30vw, (max-width: 1010px) 30vw, 21vw" | |
| 3 col | w: 584 h: flex |
- | WD | src="438" srcset="292 292w, 438 438w, 584 584w" |
sizes="(max-width: 520px) 30vw, (max-width: 1010px) 22vw, 18vw" | |
| 2 col | w: 372 h: flex |
- | WD | src="279" srcset="186 186w, 279 279w, 372 372w" |
sizes="(max-width: 520px) 20vw, (max-width: 1010px) 14vw, 10vw" | |
| [M 508] 3 col - Image, video + text | Img | w: 430 h: flex |
- | DD | src="215" srcset="215 1x, 430 2x" |
- |
| [M 509] 4x3 col + 2x6 col - Text on Image, Video | 3 col | w: 586 h: 586 |
proportion 1:1 | WD | src="440" srcset="293 293w, 440 440w, 586 586w" |
sizes="(max-width: 520px) 100vw, (max-width: 764px) 46vw, (max-width: 1010px) 30vw, 18vw" |
| 6 col | w: 1230 h: 1230 |
proportion 1:1 | WD | src="923" srcset="615 615w, 923 923w, 1230 1230w" |
sizes="(max-width: 764px) 100vw, (max-width: 1010px) 62vw, 35vw" | |
| [M 604] Image accordion | Img | w: 400, h: 400 | proportion 1:1 | DD | src="200" srcset="200 1x, 400 2x" |
- |
| [M 606] Image carousel | Img | w: 1000 h: 572 |
- | WD | src="750" srcset="500 500w, 750 750w, 1000 1000w" |
sizes="(max-width: 520px) 80vw, (max-width: 1010px) 40vw, 30vw" |
| [M 607] Image topic | Img | w: 1264 h: 760 |
- | WD | src="632" srcset="316 316w, 632 632w, 1264 1264w" |
sizes="(max-width: 520px) 95vw, (max-width: 1010px) 50vw, 35vw" |
| [M 608] Sidebar flag | Img (1 image used) | w: 1244 h: flex (recommended 0.6w) |
- | WD | src="622" srcset="311 311w, 622 622w, 1244 1244w" |
sizes="(max-width: 764px) 100vw, (max-width: 1010px) 65vw, 35vw" |
| Img (2 images used) | w: 1016w h: flex (recommended 0.6w) |
- | WD | src="1016" srcset="254 254w, 508 508w, 1016 1016w" |
sizes="(max-width: 764px) 100vw, (max-width: 1010px) 65vw, 30vw" | |