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:

`bash

Using npm

npm install next-image-optimized

Using yarn

yarn add next-image-optimized

🔥 Quick Start

• Here's how to get started with NextImageOptimized:

import React from "react"; import NextImageOptimized from "next-image-optimized";

const App = () => (

export default App;

🎨 Customization Examples

1. Default Responsive Image Automatically adjusts the width based on the device size:

   <NextImageOptimized src="/example.jpg" alt="Responsive Image" quality={80} />

2. Using Aspect Ratio Maintain a consistent aspect ratio:

<NextImageOptimized src="/example.jpg" alt="Aspect Ratio Example" aspectRatio={16 / 9} width="100%" />

1. Percentage Dimensions <NextImageOptimized src="/example.jpg" alt="Percentage Example" width="50%" height="auto" />

2. Dynamic Width and Height <NextImageOptimized src="/example.jpg" alt="Styled Image" className="custom-class" style={{ border: "2px solid #ccc", borderRadius: "8px" }} />

3. Custom Styling

<NextImageOptimized src="/example.jpg" alt="Styled Image" className="custom-class" style={{ border: "2px solid #ccc", borderRadius: "8px" }} />

1. Dynamic Optimization with External URLs Optimize external images by dynamically appending query parameters:

<NextImageOptimized src="https://example.com/image.jpg" alt="External Image" quality={75} width={1200} height={800} />

Default Behavior If you don’t provide a deviceSizes prop, the component will use the default sizes:

const defaultDeviceSizes = { desktop: 1920, tablet: 1024, mobile: 768 };

<NextImageOptimized src="/example.jpg" alt="Default Device Sizes" />

Prioritize Mobile-First Design

<NextImageOptimized src="/example.jpg" alt="Mobile-First Design" deviceSizes={{ desktop: 1440, tablet: 1024, mobile: 640 }} />