adobe / adobe/aem-core-wcm-components
[Container] Adaptive Image Renditions for Background Images
- Dominant language
- Java
- Stars
- 795
- Forks
- 775
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 8
Description
The WCM Core `Image` component has automatic adaptive images to ensure that appropriately sized images are used given the current viewport and CSS styling. However, this same functionality does not apply for components with background images, such as `Container`. This means if a user uploads a 10MB image for use of a `Container` background, the image will render on the web in its full 10MB glory.
Looking on the online guide for Core components at https://opensource.adobe.com/aem-core-wcm-components/library/container.html it appears there is a *start* of this approach as the image is being loaded with the `coreimg` selector:
```
```
However, when I try this locally I dont actually get a URL rewritten to the `coreimg` selector, but rather the direct path to my image at /content/dam/path/to/my/image.jpg - is this because the online guide is using a sling mapping/rewrite for /content/dam paths? If so, is that standard practice and can that rewrite rule be shared?
Assuming the image does get written with the `coreimg` selector, how much effort do we think it would be to get background images using an appropriately sized rendition?
Contributor guide
Research direction
Start by comparing the Container background-image behavior with the Image component's adaptive-image behavior described in the issue and inspect the generated URLs in the online guide versus a local instance. Done means determining whether the coreimg rewrite is standard or shareable, then defining and implementing appropriately sized background-image renditions if the project supports that approach.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- java
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100