refactor: use PNG format for all small image exports

- Remove JPEG format, use PNG everywhere for consistency
- Keep transparency (no white background) in small images
- Both export and copy small image now use the same approach:
  scale down until <50KB while preserving transparency

Author: claude

src/components/ChartContainer.jsx

@@ -118,65 +118,50 @@ export default function ChartContainer({
     link.click();
   }, []);
 
-  const exportChartSmallImage = useCallback((id) => {
+  const exportChartSmallImage = useCallback(async (id) => {
     const chart = chartRefs.current.get(id);
     if (!chart) return;
 
     const maxSize = 50 * 1024; // 50KB
     const canvas = chart.canvas;
 
-    // Create a temporary canvas for resizing
     const tempCanvas = document.createElement('canvas');
     const ctx = tempCanvas.getContext('2d');
 
-    // Start with original size and reduce if needed
     let scale = 1;
-    let quality = 0.8;
-    let dataUrl;
+    let blob;
     let attempts = 0;
-    const maxAttempts = 20;
+    const maxAttempts = 10;
 
-    // Try to get image under 50KB by adjusting quality and scale
+    // Use PNG format with scaling to reduce size while keeping transparency
     while (attempts < maxAttempts) {
       const width = Math.floor(canvas.width * scale);
       const height = Math.floor(canvas.height * scale);
 
       tempCanvas.width = width;
       tempCanvas.height = height;
-
-      // Draw with white background (for JPEG)
-      ctx.fillStyle = '#ffffff';
-      ctx.fillRect(0, 0, width, height);
       ctx.drawImage(canvas, 0, 0, width, height);
 
-      dataUrl = tempCanvas.toDataURL('image/jpeg', quality);
-
-      // Calculate approximate file size (base64 is ~33% larger than binary)
-      const base64Length = dataUrl.length - 'data:image/jpeg;base64,'.length;
-      const fileSize = Math.ceil(base64Length * 0.75);
+      blob = await new Promise(resolve => tempCanvas.toBlob(resolve, 'image/png'));
 
-      if (fileSize <= maxSize) {
+      if (blob.size <= maxSize) {
         break;
       }
 
-      // Reduce quality first, then scale
-      if (quality > 0.3) {
-        quality -= 0.1;
-      } else if (scale > 0.3) {
-        scale -= 0.1;
-        quality = 0.7; // Reset quality for new scale
-      } else {
-        // Can't reduce further, use what we have
+      scale -= 0.1;
+      if (scale < 0.2) {
         break;
       }
 
       attempts++;
     }
 
+    const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
-    link.href = dataUrl;
-    link.download = `${id}-small.jpg`;
+    link.href = url;
+    link.download = `${id}-small.png`;
     link.click();
+    URL.revokeObjectURL(url);
   }, []);
 
   const copyChartImage = useCallback(async (id) => {
@@ -209,26 +194,21 @@ export default function ChartContainer({
     let attempts = 0;
     const maxAttempts = 10;
 
-    // Clipboard API only supports PNG, so we reduce size by scaling down
+    // Use PNG with scaling to reduce size while keeping transparency
     while (attempts < maxAttempts) {
       const width = Math.floor(canvas.width * scale);
       const height = Math.floor(canvas.height * scale);
 
       tempCanvas.width = width;
       tempCanvas.height = height;
-
-      ctx.fillStyle = '#ffffff';
-      ctx.fillRect(0, 0, width, height);
       ctx.drawImage(canvas, 0, 0, width, height);
 
-      // Convert to blob for size check
       blob = await new Promise(resolve => tempCanvas.toBlob(resolve, 'image/png'));
 
       if (blob.size <= maxSize) {
         break;
       }
 
-      // Reduce scale to make image smaller
       scale -= 0.1;
       if (scale < 0.2) {
         break;