fix(sbb-image): fix skipLqip mode (#3131)

src/elements/image/image.scss

@@ -85,13 +85,16 @@
 }
 
 .sbb-image__img {
-  position: absolute;
-  inset: 0;
   opacity: 0.000001;
 
   :host([data-loaded]) & {
     opacity: 0.999999;
   }
+
+  :host(:not([skip-lqip])) & {
+    position: absolute;
+    inset: 0;
+  }
 }
 
 .sbb-image__blurred {
@@ -100,6 +103,11 @@
   }
 }
 
+// Avoids unwanted space or small cropping
+picture {
+  display: contents;
+}
+
 // After successful loading an image, the loaded image is faded in over the blurred lqip image with a short transition.
 // To support transparent images, we need also to fade out the blurred lqip image.
 // This is not perfect in the case of a non transparent image, but does not look that bad.

src/elements/image/image.stories.ts

@@ -1,6 +1,6 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
@@ -199,6 +199,15 @@ export const RoundBorderRadius: StoryObj = {
   },
 };
 
+export const SkipLqip: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: {
+    ...defaultArgs,
+    'skip-lqip': true,
+  },
+};
+
 const meta: Meta = {
   decorators: [
     (story) => html`<div style="max-width: 480px;">${story()}</div>`,

src/elements/image/image.ts

@@ -191,7 +191,7 @@ export class SbbImageElement extends LitElement {
    * the idea of lqip here:
    * https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62
    */
-  @property({ attribute: 'skip-lqip', type: Boolean }) public skipLqip = false;
+  @property({ attribute: 'skip-lqip', type: Boolean, reflect: true }) public skipLqip = false;
 
   /**
    * A caption can provide additional context to the image (e.g.

src/elements/image/image.visual.spec.ts

@@ -146,5 +146,16 @@ describe(`sbb-image`, () => {
         await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
       }),
     );
+
+    it(
+      'skipLqip=true',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-image skip-lqip image-src=${imageUrl} aspect-ratio="1-1"></sbb-image>`,
+        );
+
+        await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+      }),
+    );
   });
 });