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