* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #f5f5f5; } .header-old { background: white; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .logo { font-size: 24px; font-weight: bold; color: #333; text-decoration: none; } .container { max-width: 900px; margin: 40px auto; padding: 20px; } .tool-card { background: white; padding: 40px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1 { color: #333; margin-bottom: 10px; text-align: center; } .description { text-align: center; color: #666; margin-bottom: 30px; } .upload-area { border: 3px dashed #ddd; padding: 60px 20px; text-align: center; border-radius: 10px; cursor: pointer; transition: all 0.3s; } .upload-area:hover { border-color: #4285f4; background: #f8f9fa; } .upload-area.dragover { border-color: #4285f4; background: #e3f2fd; } input[type="file"] { display: none; } .btn { background: #4285f4; color: white; border: none; padding: 15px 30px; border-radius: 6px; cursor: pointer; font-size: 16px; margin: 10px; } .btn:hover { background: #357ae8; } .quality-control { margin: 30px 0; } .slider { width: 100%; } .preview { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; } .preview-box { text-align: center; } .preview-box img { max-width: 100%; border-radius: 8px; border: 2px solid #ddd; } .info { background: #e3f2fd; padding: 15px; border-radius: 6px; margin-top: 10px; }

📦 Image Compressor

Compress JPG, PNG images without losing quality

📁

Click to upload or drag & drop image

Supports: JPG, PNG, WebP