Update XB's `image` SDC to comply with best practices, and document those best practices
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3468944. -->
Reported by: [wim leers](https://www.drupal.org/user/99777)
>>>
<h3 id="overview">Overview</h3>
<p>See <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3467972" title="Status: Closed (fixed)">#3467972: Unable to save node article form — remove obsolete TwoTerribleTextAreasWidget + fix duplicate `XB:image` SDC</a></span>.</p>
<p><code>components/image/image.component.yml</code> was added long ago, in <code>795f4db30</code>, on April 26, before DrupalCon Portland — see <a href="https://wimleers.com/xb-week-5">https://wimleers.com/xb-week-5</a>.</p>
<p>Some would argue it is unnecessarily nested, and @pdureau certainly has done that at <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3446722" title="Status: Closed (fixed)">#3446722: Introduce an example set of representative SDC components; transition from "component list" to "component tree"</a></span>:</p>
<blockquote><p>
<code>$refs</code> resolution don't seem to work yet in Experience Builder, so the component was not fully tested, but the component template is surprising: </p>
<pre><img src="{{ image.src }}" alt="{{ image.alt }}" width="{{ image.width }}" height="{{ image.height }}"></img> </pre><p>What is the purpose of this component? </p>
<ul>
<li>it has a single prop, also called "image", so the component looks like a meaningless wrapper around this single prop</li>
<li>it doesn't use the expected <code>attributes</code> object</li>
<li>no HTML classes (and the component has no dedicated CSS), so no specific UI purpose</li>
<li>it is nothing more than a rigid HTML element, like an image renderable but less powerful because with hardcoded attributes (so not compatible with lazy loading or any API working with images)</li>
</ul>
<p>Am I missing something?</p>
</blockquote>
<h3 id="proposed-resolution">Proposed resolution</h3>
<p>TBD</p>
<h3 id="ui-changes">User interface changes</h3>
<p>TBD</p>
> Related issue: [Issue #3467972](https://www.drupal.org/node/3467972)
> Related issue: [Issue #3446722](https://www.drupal.org/node/3446722)
> Related issue: [Issue #3455036](https://www.drupal.org/node/3455036)
> Related issue: [Issue #3535453](https://www.drupal.org/node/3535453)
issue