Image-convertor-and-compressor

🖼️ Cool Image Converter https://imagconvertor.netlify.app/

A modern, responsive web application for converting and compressing images with a beautiful user interface. Built with HTML5, CSS3, and JavaScript.

✨ Features

🎯Core Functionality

• Multi-format Conversion: Convert between JPG, PNG, WEBP, and GIF formats
• Real Image Compression: Actually reduce file sizes, not just simulation
• Batch Processing: Upload and convert up to 5 images simultaneously
• Drag & Drop: Intuitive file upload with drag and drop support

🎨User Experience -Modern Design: Clean, professional interface with smooth animations

• Responsive Layout: Works perfectly on desktop, tablet, and mobile
• Real-time Preview: See converted images with detailed information
• Progress Feedback: Loading animations and detailed conversion status

⚙️Advanced Options

• Quality Control: Adjustable quality slider (10% - 100%)
• Compression Toggle: Enable/disable compression with smart defaults
• Format Selection: Choose output format with format-specific optimizations
• Size Optimization: Automatic dimension reduction for better compression

🚀 Quick Start

Prerequisites

• Any modern web browser (Chrome, Firefox, Safari, Edge)
• No server or backend required - runs entirely in the browser

Installation 1.Download**: Clone or download the project files 2.Open**: Simply open index.html in your web browser 3.Start Using**: The application is ready to use immediately!

# If using git
git clone <repository-url>
cd image-converter
# Open index.html in your browser

📖 How to Use

1. Upload Images

• Click the upload area or drag & drop images
• Supports: JPG, JPEG, PNG, GIF, WEBP
• Maximum: 5 files at once
• File size: No limit (browser-dependent)

2. Configure Settings

• Output Format: Choose PNG, JPG, WEBP, or GIF
• Quality Level: Adjust from 10% to 100%
• Compression: Toggle compression on/off

3. Convert & Download

• Click "Convert Images" to start processing
• Watch the loading animation
• Download individual converted files
• View compression statistics

🎯 Compression Examples

Original Size	Quality Setting	Expected Result	Use Case
1 MB	90%	~900 KB	High quality, minimal compression
1 MB	70%	~700 KB	Good balance of quality and size
1 MB	50%	~500 KB	Moderate compression for web
1 MB	30%	~300 KB	Maximum compression for storage

🛠️ Technical Details

Technologies Used

• HTML5: Semantic markup and canvas API
• CSS3: Modern styling with gradients and animations
• JavaScript ES6+**: Class-based architecture
• Canvas API**: Real image processing and conversion
• File API: Client-side file handling

Key Features Implementation

Real Image Compression

// Dimension reduction for better compression
if (compressionEnabled) {
    const maxDimension = 1920;
    if (img.width > maxDimension || img.height > maxDimension) {
        // Resize while maintaining aspect ratio
    }
}

Quality-Based Compression