NextImageOptimized

NextImageOptimized is a powerful React component built on top of Next.js's Image component. It adds advanced features like device-based responsive sizing, aspect ratio handling, percentage-based dimensions, and URL-based image optimization. Perfect for building highly optimized and responsive applications.

🚀 Features

• 📐 Adaptive Sizing: Automatically adjusts image dimensions for desktop, tablet, and mobile using breakpoints.
• 🎨 Aspect Ratio: Easily maintain consistent aspect ratios without manual calculations.
• ⚡ Dynamic URL Optimization: Appends quality, width, height, and format parameters to optimize images dynamically.
• 📱 Responsive by Design: Supports percentage-based width and height for fluid layouts.
• 🔧 Customizable: Accepts className and style for easy customization.

📦 Installation

Install the package via npm or yarn:

1# Using npm
2npm install next-image-optimized
3
4# Using yarn
5yarn add next-image-optimized
6
7
8
9## 🔥 Quick Start
10- Here's how to get started with NextImageOptimized:
11
12import React from "react";
13import NextImageOptimized from "next-image-optimized";
14
15const App = () => (
16  <div>
17  <h1>NextImageOptimized Demo</h1>
18
19   <NextImageOptimized
20    src="/example.jpg"
21    alt="Full Width Image"
22    width="100%"
23    aspectRatio={16 / 9}
24  />
25  
26  </div>
27);
28
29export default App;
30
31
32
33
34
35##  🎨 Customization Examples
36
371. Default Responsive Image
38   Automatically adjusts the width based on the device size:
39
40  <NextImageOptimized
41    src="/example.jpg"
42    alt="Responsive Image"
43    quality={80}
44  />
45
462. Using Aspect Ratio
47Maintain a consistent aspect ratio:
48
49<NextImageOptimized
50  src="/example.jpg"
51  alt="Aspect Ratio Example"
52  aspectRatio={16 / 9}
53  width="100%"
54/>
55
563. Percentage Dimensions
57  <NextImageOptimized
58    src="/example.jpg"
59    alt="Percentage Example"
60    width="50%"
61    height="auto"
62  />
63
644. Dynamic Width and Height
65  <NextImageOptimized
66    src="/example.jpg"
67    alt="Styled Image"
68    className="custom-class"
69    style={{ border: "2px solid #ccc", borderRadius: "8px" }}
70  />
71
725. Custom Styling
73
74<NextImageOptimized
75  src="/example.jpg"
76  alt="Styled Image"
77  className="custom-class"
78  style={{ border: "2px solid #ccc", borderRadius: "8px" }}
79/>
80
816. Dynamic Optimization with External URLs
82Optimize external images by dynamically appending query parameters:
83
84<NextImageOptimized
85  src="https://example.com/image.jpg"
86  alt="External Image"
87  quality={75}
88  width={1200}
89  height={800}
90/>
91
92Default Behavior
93If you don’t provide a deviceSizes prop, the component will use the default sizes:
94
95const defaultDeviceSizes = { desktop: 1920, tablet: 1024, mobile: 768 };
96
97<NextImageOptimized
98  src="/example.jpg"
99  alt="Default Device Sizes"
100/>
101
102Prioritize Mobile-First Design
103
104<NextImageOptimized
105  src="/example.jpg"
106  alt="Mobile-First Design"
107  deviceSizes={{ desktop: 1440, tablet: 1024, mobile: 640 }}
108/>