<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" fill="none">
  <!-- Background -->
  <rect width="400" height="400" fill="#f8fafc"/>

  <!-- Gradient definitions -->
  <defs>
    <linearGradient id="imageGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="compressionGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="arrowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
    </linearGradient>
  </defs>

  <!-- Decorative background elements -->
  <circle cx="60" cy="60" r="40" fill="#d1fae5" opacity="0.6"/>
  <circle cx="340" cy="340" r="50" fill="#dbeafe" opacity="0.6"/>
  <circle cx="320" cy="80" r="30" fill="#d1fae5" opacity="0.5"/>

  <!-- Large image file (before) -->
  <g transform="translate(40, 120)">
    <!-- File icon -->
    <rect x="0" y="0" width="120" height="150" rx="8" fill="white" stroke="url(#imageGradient)" stroke-width="3"/>
    <path d="M 80 0 L 120 40 L 80 40 Z" fill="url(#imageGradient)" opacity="0.3"/>

    <!-- Image placeholder inside -->
    <rect x="15" y="20" width="90" height="70" rx="4" fill="#e0e7ff"/>
    <circle cx="35" cy="40" r="8" fill="#fbbf24"/>
    <path d="M 15 75 L 45 55 L 75 70 L 105 50 L 105 90 L 15 90 Z" fill="#8b5cf6" opacity="0.6"/>

    <!-- File size label -->
    <rect x="15" y="100" width="90" height="35" rx="4" fill="#fee2e2"/>
    <text x="60" y="115" text-anchor="middle" font-family="system-ui" font-size="11" fill="#dc2626" font-weight="700">LARGE</text>
    <text x="60" y="128" text-anchor="middle" font-family="monospace" font-size="14" fill="#991b1b" font-weight="700">5.2 MB</text>
  </g>

  <!-- Compression arrow -->
  <g transform="translate(180, 190)">
    <!-- Arrow shaft -->
    <rect x="0" y="0" width="40" height="8" rx="4" fill="url(#arrowGradient)"/>
    <!-- Arrow head -->
    <path d="M 40 -8 L 56 4 L 40 16 Z" fill="url(#arrowGradient)"/>

    <!-- Compression icon above arrow -->
    <g transform="translate(12, -20)">
      <rect x="0" y="0" width="20" height="3" rx="1.5" fill="#10b981"/>
      <rect x="0" y="6" width="16" height="3" rx="1.5" fill="#10b981"/>
      <rect x="0" y="12" width="12" height="3" rx="1.5" fill="#10b981"/>
      <rect x="0" y="18" width="8" height="3" rx="1.5" fill="#10b981"/>
    </g>

    <!-- Percentage text -->
    <text x="20" y="32" text-anchor="middle" font-family="system-ui" font-size="16" fill="#10b981" font-weight="700">-75%</text>
  </g>

  <!-- Small compressed file (after) -->
  <g transform="translate(240, 140)">
    <!-- File icon (smaller) -->
    <rect x="0" y="0" width="100" height="120" rx="8" fill="white" stroke="url(#compressionGradient)" stroke-width="3"/>
    <path d="M 70 0 L 100 30 L 70 30 Z" fill="url(#compressionGradient)" opacity="0.3"/>

    <!-- Image placeholder inside -->
    <rect x="12" y="18" width="76" height="56" rx="4" fill="#e0e7ff"/>
    <circle cx="28" cy="34" r="6" fill="#fbbf24"/>
    <path d="M 12 60 L 38 45 L 60 56 L 88 42 L 88 74 L 12 74 Z" fill="#8b5cf6" opacity="0.6"/>

    <!-- File size label -->
    <rect x="12" y="82" width="76" height="28" rx="4" fill="#d1fae5"/>
    <text x="50" y="94" text-anchor="middle" font-family="system-ui" font-size="10" fill="#059669" font-weight="700">SMALL</text>
    <text x="50" y="105" text-anchor="middle" font-family="monospace" font-size="12" fill="#047857" font-weight="700">1.3 MB</text>
  </g>

  <!-- Quality indicator -->
  <g transform="translate(50, 300)">
    <!-- Quality meter bars -->
    <rect x="0" y="0" width="8" height="40" rx="4" fill="#10b981"/>
    <rect x="12" y="5" width="8" height="35" rx="4" fill="#10b981"/>
    <rect x="24" y="10" width="8" height="30" rx="4" fill="#10b981"/>
    <rect x="36" y="15" width="8" height="25" rx="4" fill="#10b981"/>
    <rect x="48" y="20" width="8" height="20" rx="4" fill="#94a3b8"/>
    <rect x="60" y="25" width="8" height="15" rx="4" fill="#94a3b8"/>

    <text x="35" y="58" text-anchor="middle" font-family="system-ui" font-size="11" fill="#059669" font-weight="600">Quality: 85%</text>
  </g>

  <!-- Format icons -->
  <g transform="translate(260, 290)">
    <!-- JPG badge -->
    <rect x="0" y="0" width="35" height="20" rx="4" fill="#3b82f6"/>
    <text x="17.5" y="14" text-anchor="middle" font-family="system-ui" font-size="10" fill="white" font-weight="700">JPG</text>

    <!-- PNG badge -->
    <rect x="40" y="0" width="35" height="20" rx="4" fill="#8b5cf6"/>
    <text x="57.5" y="14" text-anchor="middle" font-family="system-ui" font-size="10" fill="white" font-weight="700">PNG</text>

    <!-- WebP badge -->
    <rect x="80" y="0" width="40" height="20" rx="4" fill="#10b981"/>
    <text x="100" y="14" text-anchor="middle" font-family="system-ui" font-size="9" fill="white" font-weight="700">WebP</text>
  </g>

  <!-- Floating decorative elements -->
  <g opacity="0.7">
    <!-- Sparkle 1 -->
    <circle cx="180" cy="80" r="3" fill="#10b981"/>
    <path d="M 180 70 L 180 90 M 170 80 L 190 80" stroke="#10b981" stroke-width="2" stroke-linecap="round"/>

    <!-- Sparkle 2 -->
    <circle cx="350" cy="160" r="2.5" fill="#3b82f6"/>
    <path d="M 350 152 L 350 168 M 342 160 L 358 160" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round"/>

    <!-- Sparkle 3 -->
    <circle cx="80" cy="340" r="2" fill="#8b5cf6"/>
    <path d="M 80 334 L 80 346 M 74 340 L 86 340" stroke="#8b5cf6" stroke-width="1.5" stroke-linecap="round"/>
  </g>

  <!-- Speed lines (compression effect) -->
  <g opacity="0.4">
    <line x1="165" y1="180" x2="155" y2="180" stroke="#10b981" stroke-width="2" stroke-linecap="round"/>
    <line x1="165" y1="190" x2="150" y2="190" stroke="#10b981" stroke-width="2" stroke-linecap="round"/>
    <line x1="165" y1="200" x2="145" y2="200" stroke="#10b981" stroke-width="2" stroke-linecap="round"/>
    <line x1="165" y1="210" x2="150" y2="210" stroke="#10b981" stroke-width="2" stroke-linecap="round"/>
  </g>

  <!-- Before/After labels -->
  <g transform="translate(50, 40)">
    <rect x="0" y="0" width="60" height="24" rx="12" fill="#fee2e2"/>
    <text x="30" y="16" text-anchor="middle" font-family="system-ui" font-size="11" fill="#991b1b" font-weight="600">Before</text>
  </g>

  <g transform="translate(260, 60)">
    <rect x="0" y="0" width="60" height="24" rx="12" fill="#d1fae5"/>
    <text x="30" y="16" text-anchor="middle" font-family="system-ui" font-size="11" fill="#047857" font-weight="600">After</text>
  </g>

  <!-- Checkmark for optimization -->
  <g transform="translate(310, 240)">
    <circle cx="20" cy="20" r="18" fill="#10b981"/>
    <path d="M 12 20 L 18 26 L 30 14" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
  </g>
</svg>
