web-image-gen-svelte

Svelte component to display modern responsive web image sets that were generated by web-image-gen.

This mostly wraps a svelte component around lazysizes, using their "modern transparent srcset" and "noscript" patterns.

Modern picture/srcset functionality is provided, along with low-quality image placeholders (LQIP), and optional metadata. Older browsers fallback to default images they can handle.

Install

npm install web-image-gen-svelte

Usage

<script lang="ts">
  import type { ImageSet as ImageSetType } from 'web-image-gen-svelte'

  import fruitImageSets from 'src/lib/assets/images/_gen/fruits.json'
  import ImageSet from 'web-image-gen-svelte'

  const set: ImageSetType = fruitImageSets['pear']
  const { meta } = set
</script>

<figure>
  <ImageSet alt={meta.description} {set} />
  <figcaption>
    <a href={meta.link} rel="external">{meta.title}</a> by
    <a href={meta.authorLink} rel="external">{meta.author}</a> -
    <a href={meta.licenseLink} rel="external">{meta.license}</a> License
  </figcaption>
</figure>

<style>
  figure :global(.web-image-gen-img) {
    max-width: 20rem;
    width: 100%;
  }
</style>

Properties

Svelte component properties are:

| Property | Description | | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | alt | Alt text for the image. | | imgClass | Class name (global) to add to inner img tag. | | pictureClass | Class name (global) to add to outer picture tag. | | set | Required ImageSet data structure (example). | | sizes | sizes attribute for source and image tags. Defaults to lazysizes auto setting. Warning! The auto setting is not very reliable, it may be better to provide a value here if possible. |

Styling

Component

The markup output of the component takes this general shape:

<picture class="web-image-gen-picture {pictureClass}">
  <source />
  <source />
  <source />
  <img class="web-image-gen-img {imgClass} lazyload" />
</picture>
<noscript>
  <img class="web-image-gen-img {imgClass}" />
</noscript>

lazysizes

To provide a nice fade from placeholder to loaded image, we suggest these lazysizes global styles:

.lazyload,
.lazyloading {
  filter: blur(5px);
  transition: filter 0.5s;
  will-change: filter;
}
.lazyloaded {
  filter: blur(0);
}

Development

git checkout https://github.com/brev/web-image-gen.git
cd web-image-gen/packages/svelte
npm install -g pnpm
pnpm install
pnpm run clean
pnpm run format
pnpm run lint
pnpm run check
pnpm run test:cover
pnpm run build
pnpm publish

License

MIT