How to Compress Images for the Web Without Losing Visual Quality

<!-- Modern Responsive Picture Element with WebP & Fallback -->
<picture>
  <source type="image/webp" srcset="/images/hero-mobile.webp 600w, /images/hero-desktop.webp 1200w" sizes="(max-width: 768px) 100vw, 1200px">
  <source type="image/jpeg" srcset="/images/hero-mobile.jpg 600w, /images/hero-desktop.jpg 1200w" sizes="(max-width: 768px) 100vw, 1200px">
  <img src="/images/hero-desktop.jpg" alt="Optimized visual asset" width="1200" height="630" loading="eager" fetchpriority="high">
</picture>

export async function compressImageInBrowser(file, quality = 0.85, maxWidth = 1920) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (event) => {
      const img = new Image();
      img.src = event.target.result;
      img.onload = () => {
        // Calculate proportional scale
        let width = img.width;
        let height = img.height;
        if (width > maxWidth) {
          height = Math.round((height * maxWidth) / width);
          width = maxWidth;
        }

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

        // Export as optimized WebP blob
        canvas.toBlob((blob) => {
          resolve({
            compressedBlob: blob,
            originalSize: file.size,
            compressedSize: blob.size,
            reductionPercentage: (((file.size - blob.size) / file.size) * 100).toFixed(1)
          });
        }, 'image/webp', quality);
      };
    };
  });
}