From 9db4a81f0914bd7393df1b45696a4d73a3ed74fe Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Mon, 19 Feb 2024 22:43:34 +0100 Subject: [PATCH] feat: Image srcset documentation (#1066) Co-authored-by: Vincent Smedinga --- .../storybook-react/src/Image/Image.docs.mdx | 18 +++++++++++++++++- .../src/Image/Image.stories.tsx | 16 ++++++++++++++++ .../src/Overlap/Overlap.stories.tsx | 1 - 3 files changed, 33 insertions(+), 2 deletions(-) diff --git a/storybook/storybook-react/src/Image/Image.docs.mdx b/storybook/storybook-react/src/Image/Image.docs.mdx index 78ec3e86ea..3d04e50d55 100644 --- a/storybook/storybook-react/src/Image/Image.docs.mdx +++ b/storybook/storybook-react/src/Image/Image.docs.mdx @@ -1,4 +1,4 @@ -import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as ImageStories from "./Image.stories.tsx"; import README from "../../../../packages/css/src/components/image/README.md?raw"; @@ -6,6 +6,22 @@ import README from "../../../../packages/css/src/components/image/README.md?raw" {README} +## Examples + + +## Provide multiple sources + +Use the srcSet prop, which controls the corresponding HTML attribute (see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)), to let the browser select the optimal source file for the image. +A mobile device can often download a smaller file, saving the user’s bandwidth and time. + + + +## Prevent unnecessary loading + +Set the `loading` attribute (see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading)) to `lazy` and the browser will wait to load the image until it is close to the viewport. +Consider setting this for images below the top area of the page. + + diff --git a/storybook/storybook-react/src/Image/Image.stories.tsx b/storybook/storybook-react/src/Image/Image.stories.tsx index 27eda6dc6a..0b401a427f 100644 --- a/storybook/storybook-react/src/Image/Image.stories.tsx +++ b/storybook/storybook-react/src/Image/Image.stories.tsx @@ -21,3 +21,19 @@ export const Default: Story = { src: 'https://picsum.photos/640/360', }, } + +export const MultipleSources: Story = { + args: { + alt: '', + srcSet: 'https://picsum.photos/640/360 640w, https://picsum.photos/1280/720 1280w', + sizes: '(max-width: 36rem) 640px, 50vw', + }, +} + +export const LazyLoading: Story = { + args: { + alt: '', + src: 'https://picsum.photos/2560/1440', + loading: 'lazy', + }, +} diff --git a/storybook/storybook-react/src/Overlap/Overlap.stories.tsx b/storybook/storybook-react/src/Overlap/Overlap.stories.tsx index ee439db302..456a95edb5 100644 --- a/storybook/storybook-react/src/Overlap/Overlap.stories.tsx +++ b/storybook/storybook-react/src/Overlap/Overlap.stories.tsx @@ -30,7 +30,6 @@ export const Default: Story = { alt="" cover sizes="(max-width: 36rem) 640px, (max-width: 68rem) 1280px, 1600px" - src="https://picsum.photos/640/180" srcSet="https://picsum.photos/640/180 640w, https://picsum.photos/1280/360 1280w, https://picsum.photos/1600/450 1600w" /> ,