I integrated the Squoosh CLI into my web app to optimize images. Although Squoosh offers a great CLI, I needed its functionality within my app. Leveraging my experience with FFMPEG in web apps, I adapted the Squoosh CLI code, replacing Node.js dependencies with web APIs. Now, I can call Squoosh's 'run' method directly in my app to resize and compress images. This unofficial solution works for now, but a dedicated browser API would be ideal for broader integration in CMS platforms, performance analysis tools, and other web applications.
Optimizing images for the web is crucial for Core Web Vitals, but the process is overly complex. While tools like Squoosh and web.dev guides offer help, developers still struggle with image optimization. This difficulty stems from needing to consider file size, resolution, codec support, lazy loading, and more. CDNs offer a solution but introduce centralization. To simplify this, I created a prototype tool (https://just-gimme-an-img.vercel.app/) that generates optimized HTML for images, handles AVIF conversion, creates multiple image sizes, and does it all client-side using Squoosh's CLI. The tool aims to make image optimization easier and more accessible, especially for common use cases like hero images. I'm hoping this sparks further discussion and improvements in image optimization tooling to simplify the process for all developers.
I've just added the pinch-zoom-element web component to my photography blog. It's a tiny (~3kb), dependency-free custom element that allows for easy pinch-zooming on any HTML element. Check out the implementation on my blog (touch-enabled device/trackpad needed for testing) and see how simple it is to integrate! This element was crucial for the Squoosh app and perfectly exemplifies the power of web components for clean, reusable UI. I hope to see wider adoption of elements like these, especially for common use-cases like image zooming on e-commerce sites.
