-
Type:
Feature Request
-
Status: Pending Further Research
-
Priority:
Minor
-
Resolution: Unresolved
-
Affects Version/s: None
-
Fix Version/s: None
-
Component/s: CKEditor, Out of the box Fragments > Image
Background
Part of the Web Vitals initiative from Google to deliver a great user experience on the web is Cumulative Layout Shift(CLS).
Issue
When posting an image in Liferay, the image is rendered with something like this:
<img src="/documents/20124/0/LBDLC.png/02956bfc-f95b-cf02-fb01-70e339ba332b?t=1614666679643" alt="the description">
Image tag do not include the dimensions, which is one of the causes of poor CLS score.
Steps to reproduce
1. Start a clean bundle
2. Login
3. Go to Documents and Media and upload an image file
4. Go to Web Content and add a new Web Content with any title
5. For the body, click on the [+] button and click on the image selector
6. Select the uploaded image and click Add
7. Switch to Code View
Note that the IMG tag only has the SRC parameter, no dimensions specified
8. Publish
9. Preview the article and inspect the code
Note that the IMG tag only has the SRC parameter, no dimensions specified
Expectations
Images should both width/height and css aspect ratio boxes. Image should be rendered like this:
<img src="/documents/20124/0/LBDLC.png/02956bfc-f95b-cf02-fb01-70e339ba332b?t=1614666679643" width="1550" height="550" style="width:100%; max-width:1550px; height:auto;">
Here's a guide on CLS Optimization:
https://web.dev/optimize-cls/
Reproduced in
7.2.x-private (e0386d24c6a6c0425878cb1c1322f57f3da7f4be)