# bb-img
Lightweight lazy-loading image component. Subtle placeholder, smooth transition.
## Install
```bash
npm install @bbki.ng/bbimg
```
CDN:
```html
```
## Usage
```html
```
## Attributes
| Attribute | Default | Description |
|-----------|---------|-------------|
| `src` | required | Image URL |
| `alt` | "" | Accessibility text |
| `max-width` | "100%" | CSS max-width value. Pure numbers are treated as px (e.g., `max-width="500"` becomes `500px`) |
| `aspect-ratio` | "3/2" | Aspect ratio for placeholder sizing (e.g., `16/9`, `4/3`, `1/1`) |
| `placeholder` | "#f5f5f5" | Loading background color |
| `root-margin` | "50px" | Preload distance |
## Features
- IntersectionObserver lazy loading
- 3% opacity skeleton animation
- 1.2s cubic-bezier fade transition
- Race condition protection
- WebP-friendly min-height calculation
- Zero dependencies
## Examples
### Basic usage
```html
```
### Fixed width (pure number = px)
```html
```
### Custom aspect ratio
```html
```
### Full example
```html
```
See `example/` directory for full demo.
## Why min-height?
WebP images decode asynchronously, which can cause layout shift before the browser determines the image dimensions. `bb-img` calculates and applies a `min-height` based on `max-width` and `aspect-ratio` to ensure the placeholder maintains correct proportions during loading.
## Development
```bash
npm install
npm run prepare
```
## License
MIT