1.0.0 • Published 6 months ago

@unpic/webc v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

tree

@unpic/webc

WebC component for responsive, high-performance images. Perfect for Eleventy. Generates a responsive <img> tag that follows best practices, with the correct srcset, sizes and styles. Detects image URLs from most image CDNs and CMSs and can resize images with no build step.

Features

  • Just an <img> tag! No extra elements, no runtime JavaScript. Easy to style.
  • Automatically generates correct srcset and sizes attributes for responsive images
  • Handles responsive resizing of images, preserving aspect ratio
  • Uses native lazy loading and aync decoding for offscreen images
  • Handles different image layouts: fixed, constrained and full width
  • Uses eager loading and high priority fetching for important images
  • Delivers modern image formats, including WebP and AVIF if supported by your browser
  • No build step or server-side rendering required: uses your existing image CDN or CMS, with no additional configuration
  • Uses unpic to support most image CDNs, including Cloudinary, Imgix, and Shopify
  • Can generate a low-res background image for a blurred placeholder effect

Installation and usage

npm install @unpic/webc

The requires @11ty/webc version 0.9.0 or later, because it uses the new webc.attributes feature.

If you are using this with Eleventy, there are a number of ways of defining WebC components. In the example we're using webc:import, but check out the docs for other options that handle imports automatically. You can then use the component in your templates:

<unpic-img
  webc:import="npm:@unpic/webc"
  src="https://cdn.shopify.com/static/sample-images/bath_grande_crop_center.jpeg"
  layout="constrained"
  width="{800}"
  height="{600}"
  alt="A lovely bath"
></unpic-img>

For the supported props, see the docs.

1.0.0

6 months ago

0.0.44

7 months ago

0.0.43

1 year ago

0.0.41

1 year ago

0.0.40

1 year ago

0.0.39

1 year ago

0.0.38

1 year ago

0.0.37

1 year ago

0.0.36

1 year ago

0.0.35

2 years ago

0.0.34

2 years ago

0.0.20

2 years ago

0.0.21

2 years ago

0.0.22

2 years ago

0.0.23

2 years ago

0.0.24

2 years ago

0.0.25

2 years ago

0.0.18

2 years ago

0.0.19

2 years ago

0.0.30

2 years ago

0.0.33

2 years ago

0.0.26

2 years ago

0.0.27

2 years ago

0.0.28

2 years ago

0.0.29

2 years ago

0.0.16

2 years ago

0.0.17

2 years ago

0.0.10

2 years ago

0.0.11

2 years ago

0.0.12

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.15

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago