diff --git a/README.md b/README.md index 57a1aec..fdbec40 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,8 @@ # unlazy -[![npm version](https://img.shields.io/npm/v/unlazy?color=a1b858&label=)](https://www.npmjs.com/package/unlazy) +[![npm version][npm-version-src]][npm-version-href] +[![bundle][bundle-src]][bundle-href] Universal lazy loading library leveraging native browser APIs. It's intended to be used with the `loading="lazy"` attribute alongside (blurry) placeholder images and with a [BlurHash](https://unlazy.byjohann.dev/placeholders/blurhash) or [ThumbHash](https://unlazy.byjohann.dev/placeholders/thumbhash) string. @@ -16,19 +17,16 @@ Universal lazy loading library leveraging native browser APIs. It's intended to - 🎟 **``**: Supports multiple image tags - 🏎 **Auto-initialize**: Usable without a build step -> [!NOTE] -> Although the `loading="lazy"` attribute is supported in all major browsers, it is only available in Safari 16.4 (released March 2023) and later versions by default. It is important to consider this limitation when using unlazy for your project, as it might impact the user experience for visitors using older Safari versions or other unsupported browsers. - ## Setup > [📖 Read the documentation](https://unlazy.byjohann.dev) ```bash # pnpm -pnpm add unlazy +pnpm add -D unlazy # npm -npm i unlazy +npm i -D unlazy ``` ## Basic Usage @@ -57,3 +55,10 @@ You can target specific images by passing a CSS selector, a DOM element, a list ## License [MIT](./LICENSE) License © 2023-PRESENT [Johann Schopplich](https://github.com/johannschopplich) + + + +[npm-version-src]: https://img.shields.io/npm/v/unlazy?style=flat +[npm-version-href]: https://npmjs.com/package/unlazy +[bundle-src]: https://img.shields.io/bundlephobia/minzip/unlazy?style=flat +[bundle-href]: https://bundlephobia.com/result?p=unlazy diff --git a/docs/guide/installation.md b/docs/guide/installation.md index da50907..d171a05 100644 --- a/docs/guide/installation.md +++ b/docs/guide/installation.md @@ -4,13 +4,13 @@ Install the `unlazy` package using your favorite package manager: ::: code-group ```bash [pnpm] - pnpm add unlazy + pnpm add -D unlazy ``` ```bash [yarn] - yarn add unlazy + yarn add -D unlazy ``` ```bash [npm] - npm install unlazy + npm install -D unlazy ``` ::: @@ -39,10 +39,12 @@ unlazy can be used without a build step. Useful for prototyping or when you don' - Must be used with `