@joassanon/optimized-image 0.1.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +95 -0
- package/dist/types/OptimizedImage.test.d.ts +1 -0
- package/package.json +17 -12
package/README.md
CHANGED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
# @joassanon/optimized-image
|
|
2
|
+
|
|
3
|
+
A lightweight React image component for responsive image delivery using query-based optimization.
|
|
4
|
+
|
|
5
|
+
It builds `srcset` and `sizes` automatically, renders a modern `img` element, and can optionally overlay a blurred placeholder image.
|
|
6
|
+
|
|
7
|
+
> Note: This package currently assumes your image optimization endpoint is available at `/img` and uses query parameters `src`, `w`, `q`, and `fm`.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- Responsive image `srcset` generation from width presets
|
|
12
|
+
- Automatic `sizes` support for fluid layouts
|
|
13
|
+
- Lazy loading by default, eager loading when `priority` is enabled
|
|
14
|
+
- Optional blurred placeholder overlay
|
|
15
|
+
- Built for React 18+ with TypeScript support
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @joassanon/optimized-image
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
or
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
yarn add @joassanon/optimized-image
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { OptimizedImage } from '@joassanon/optimized-image';
|
|
33
|
+
|
|
34
|
+
export default function Example() {
|
|
35
|
+
return (
|
|
36
|
+
<OptimizedImage
|
|
37
|
+
src="https://example.com/photo.jpg"
|
|
38
|
+
alt="A responsive optimized photo"
|
|
39
|
+
widths={[320, 640, 960, 1280, 1600]}
|
|
40
|
+
sizes="(max-width: 768px) 100vw, 50vw"
|
|
41
|
+
quality={80}
|
|
42
|
+
format="webp"
|
|
43
|
+
priority={false}
|
|
44
|
+
placeholder="https://example.com/photo-placeholder.jpg"
|
|
45
|
+
className="responsive-image"
|
|
46
|
+
style={{ borderRadius: '8px' }}
|
|
47
|
+
/>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Props
|
|
53
|
+
|
|
54
|
+
| Prop | Type | Default | Description |
|
|
55
|
+
| --- | --- | --- | --- |
|
|
56
|
+
| `src` | `string` | required | Source image URL passed to the optimizer endpoint |
|
|
57
|
+
| `alt` | `string` | `''` | Alternative text for the image |
|
|
58
|
+
| `widths` | `number[]` | `[320, 480, 768, 1024, 1366, 1600, 1920]` | List of widths used to generate `srcset` |
|
|
59
|
+
| `sizes` | `string` | `100vw` | Value for the image `sizes` attribute |
|
|
60
|
+
| `quality` | `number` | `75` | Image quality setting used by the optimizer endpoint |
|
|
61
|
+
| `format` | `string` | `undefined` | Optional output format, appended as `fm` query parameter |
|
|
62
|
+
| `priority` | `boolean` | `false` | When `true`, uses `loading="eager"` |
|
|
63
|
+
| `placeholder` | `string null` | `null` | Optional placeholder image URL rendered on top with blur |
|
|
64
|
+
| `className` | `string` | `''` | CSS class name for the rendered image |
|
|
65
|
+
| `style` | `React.CSSProperties` | `{}` | Inline styles for the rendered image |
|
|
66
|
+
|
|
67
|
+
## How it works
|
|
68
|
+
|
|
69
|
+
The component builds an optimized image URL using the internal base path `/img` and appends the following query parameters:
|
|
70
|
+
|
|
71
|
+
- `src` — source image URL
|
|
72
|
+
- `w` — requested image width
|
|
73
|
+
- `q` — requested image quality
|
|
74
|
+
- `fm` — optional output format
|
|
75
|
+
|
|
76
|
+
It renders a normal `<img>` tag with both `src` and `srcSet` attributes so the browser can choose the best size.
|
|
77
|
+
|
|
78
|
+
When `placeholder` is provided, the component renders a second absolutely positioned blurred image overlay for better progressive loading.
|
|
79
|
+
|
|
80
|
+
## Build
|
|
81
|
+
|
|
82
|
+
This repository uses Rollup to generate CommonJS and ES module bundles.
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
npm run build
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Peer dependencies
|
|
89
|
+
|
|
90
|
+
- `react@>=18`
|
|
91
|
+
- `react-dom@>=18`
|
|
92
|
+
|
|
93
|
+
## License
|
|
94
|
+
|
|
95
|
+
Add your license information here.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@joassanon/optimized-image",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"main": "dist/index.cjs.js",
|
|
5
5
|
"module": "dist/index.esm.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -12,6 +12,18 @@
|
|
|
12
12
|
"react": ">=18",
|
|
13
13
|
"react-dom": ">=18"
|
|
14
14
|
},
|
|
15
|
+
"scripts": {
|
|
16
|
+
"build": "rollup -c",
|
|
17
|
+
"prepublishOnly": "npm run build",
|
|
18
|
+
"test": "vitest run",
|
|
19
|
+
"test:watch": "vitest"
|
|
20
|
+
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"@rollup/plugin-commonjs": "^29.0.3",
|
|
23
|
+
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
24
|
+
"rollup-plugin-dts": "^6.4.1",
|
|
25
|
+
"tslib": "^2.8.1"
|
|
26
|
+
},
|
|
15
27
|
"devDependencies": {
|
|
16
28
|
"@babel/core": "^7.22.0",
|
|
17
29
|
"@babel/preset-react": "^7.22.5",
|
|
@@ -21,17 +33,10 @@
|
|
|
21
33
|
"@rollup/plugin-typescript": "^12.3.0",
|
|
22
34
|
"@types/react": "^19.2.17",
|
|
23
35
|
"rollup": "^3.30.0",
|
|
24
|
-
"typescript": "^6.0.3"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
"prepublishOnly": "npm run build"
|
|
29
|
-
},
|
|
30
|
-
"dependencies": {
|
|
31
|
-
"@rollup/plugin-commonjs": "^29.0.3",
|
|
32
|
-
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
33
|
-
"rollup-plugin-dts": "^6.4.1",
|
|
34
|
-
"tslib": "^2.8.1"
|
|
36
|
+
"typescript": "^6.0.3",
|
|
37
|
+
"vitest": "^1.5.5",
|
|
38
|
+
"@testing-library/react": "^14.0.0",
|
|
39
|
+
"@testing-library/jest-dom": "^6.0.0"
|
|
35
40
|
},
|
|
36
41
|
"publishConfig": {
|
|
37
42
|
"access": "public"
|