Image Compressor - Compress PNG, JPG & WebP Online

// Client-side image compression using Canvas API
async function compressImage(file, quality = 0.8) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const url = URL.createObjectURL(file);

    img.onload = () => {
      URL.revokeObjectURL(url);

      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;

      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);

      // Determine output type (use WebP if supported, fallback to JPEG)
      const outputType = file.type === 'image/png' ? 'image/png' : 'image/webp';

      canvas.toBlob(
        (blob) => {
          if (!blob) {
            reject(new Error('Compression failed'));
            return;
          }
          resolve({
            blob,
            originalSize: file.size,
            compressedSize: blob.size,
            reductionPercent: Math.round((1 - blob.size / file.size) * 100),
          });
        },
        outputType,
        outputType === 'image/png' ? undefined : quality
      );
    };

    img.onerror = () => {
      URL.revokeObjectURL(url);
      reject(new Error('Failed to load image'));
    };

    img.src = url;
  });
}

// Compress with resize
async function compressAndResize(file, maxWidth, maxHeight, quality = 0.8) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const url = URL.createObjectURL(file);

    img.onload = () => {
      URL.revokeObjectURL(url);

      let { width, height } = img;

      // Calculate new dimensions maintaining aspect ratio
      if (maxWidth && width > maxWidth) {
        height = Math.round((height * maxWidth) / width);
        width = maxWidth;
      }
      if (maxHeight && height > maxHeight) {
        width = Math.round((width * maxHeight) / height);
        height = maxHeight;
      }

      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;

      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);

      canvas.toBlob(
        (blob) => {
          if (!blob) {
            reject(new Error('Compression failed'));
            return;
          }
          resolve({
            blob,
            originalSize: file.size,
            compressedSize: blob.size,
            width,
            height,
            reductionPercent: Math.round((1 - blob.size / file.size) * 100),
          });
        },
        'image/jpeg',
        quality
      );
    };

    img.onerror = () => {
      URL.revokeObjectURL(url);
      reject(new Error('Failed to load image'));
    };

    img.src = url;
  });
}

// Batch compression
async function compressBatch(files, quality = 0.8) {
  const results = [];
  for (const file of files) {
    try {
      const result = await compressImage(file, quality);
      results.push({ filename: file.name, ...result });
    } catch (error) {
      results.push({ filename: file.name, error: error.message });
    }
  }
  return results;
}

// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const files = Array.from(e.target.files);
  const results = await compressBatch(files, 0.8);

  results.forEach((result) => {
    if (result.error) {
      console.error(`${result.filename}: ${result.error}`);
    } else {
      console.log(
        `${result.filename}: ${result.originalSize} -> ${result.compressedSize} (${result.reductionPercent}% reduction)`
      );
    }
  });
});