@magic-modules/picture

this is the @magic-modules Picture component.

wraps <picture> to load modern image formats with fallbacks to jpg|png|gif.

installation

npm install --save-exact @magic-modules/picture

usage

markdown:

<Picture name="image"></Picture>

javascript:

Picture({  name: 'image',})

both examples above output:

<picture class="Picture">  <source type="image/avif" srcset="/image.avif">  <source type="image/webp" srcset="/image.webp">  <img loading="lazy" alt="" role="presentation" src="/image.jpg"></picture>

example:

default values

the following code snippet shows the default values

Picture({  name: 'image',  ext: 'jpg',  imgClass: '',  width: '',  height: '',  alt: '',  lazy: true,  role: 'presentation',  avif: true,})

png or gif files

Picture({  name: 'image',  ext: 'png', // alternative: 'gif',})

renders

<picture class="Picture">  <source type="image/avif" srcset="/image.avif">  <source type="image/webp" srcset="/image.webp">  <img loading="lazy" alt="" role="presentation" src="/image.jpg"></picture>

example:

caveat

at the moment, webp and avif files have to be generated manually. we will automate this task sometime in the future.

source

the source for this page is in the example directory and gets built and published to github using @magic