For years, a whole industry has been built around a simple premise: making your website’s images smaller. Companies like ShortPixel, Imagify, and TinyPNG became essential tools for any performance-conscious website owner. You upload an image, their servers work some magic, and you get a smaller file. Simple, effective, and… increasingly obsolete.
The image optimization industry as we know it is dying. Not because we stopped caring about performance, but because the very technology that powers our web experience—the browser—is now powerful enough to do the job itself. The future isn’t about sending images to a remote server for a diet; it’s about optimizing them right on your device before they’re even uploaded.
The Old Way: The Server-Side Squeeze
Traditionally, optimizing an image was a server-side affair. The workflow looked something like this:
- You upload a large, unoptimized image (e.g., a 5 MB JPEG from your camera) to your website’s server.
- A plugin or external service intercepts this upload.
- It sends the image to a third-party server.
- That server resizes, compresses, and converts the image.
- The optimized, smaller image is sent back to your website.
This process, while effective, has significant drawbacks:
- Cost: These services aren’t free. They often charge per image or require a monthly subscription, which adds up quickly.
- Privacy: Your images are sent to a third-party company. For sensitive or private content, this is a major concern.
- Server Load: Your server (and theirs) has to do extra work, which can slow things down, especially during bulk optimizations.
- Inefficiency: Why upload a huge 5 MB file just to shrink it down to 200 KB? It’s a waste of bandwidth for both the user and the server.
The New Wave: Your Browser is the Optimization Engine 🚀
The game-changer is client-side optimization. Instead of relying on a remote server, the user’s own web browser does all the heavy lifting using modern JavaScript APIs and WebAssembly.
Two key technologies are making this possible:
1. The Canvas API
The HTML <canvas> element is essentially a digital drawing board in your browser. Using JavaScript, we can take an image, draw it onto this invisible canvas, and then export it. During this process, we can programmatically:
- Resize: Instantly scale the image down to appropriate dimensions (e.g., a max width of 1920px).
- Adjust Quality: Set the compression level for formats like JPEG or WebP.
- Convert Format: Export the image in a modern, efficient format like WebP.
This means a 5 MB photo can be resized, compressed, and converted to a 200 KB WebP file in milliseconds, right inside the browser tab.
A vibe-coded example of image optimization using Canvas API
2. jSquoosh and WebAssembly (WASM)
While the Canvas API is great for basic optimization, what if you want the absolute best compression available, using advanced codecs like AVIF or MozJPEG? That’s where WebAssembly comes in. WASM allows developers to run high-performance code (originally written in languages like C++ or Rust) directly in the browser at near-native speed.
jSquoosh is a library from the Google Chrome team that packages these powerful image codecs into a simple-to-use JavaScript tool. It’s the engine behind the popular Squoosh.app. By using jSquoosh, a web application can offer cutting-edge image compression that was previously only possible with powerful command-line tools or expensive server software.
The benefits are massive:
It’s Efficient: The server is freed from the task of image processing and just has to store the final, pre-optimized file.
It’s Free: The processing power comes from the user’s device, not a paid service.
It’s Private: Images never leave the browser until they are fully optimized and ready to be uploaded.
It’s Fast: Optimizing happens instantly, and the final upload is a much smaller file, saving time and bandwidth.
A Call to Action: WordPress Must Go Client-Side
A huge portion of the web runs on WordPress, which, out of the box, does very little to optimize images. Users are forced to install third-party plugins, which brings us back to the old, inefficient server-side model.
It’s time for this to change.
WordPress should build client-side optimization directly into its core media uploader. Imagine this workflow:
- You drag a 10 MB photo into the WordPress media library.
- Before the upload even starts, JavaScript kicks in.
- Using the Canvas API and a library like jSquoosh, your browser automatically resizes the image to a sensible maximum width, converts it to WebP, and applies strong but high-quality compression.
- The final, optimized ~300 KB file is then uploaded to the server.
By making this the default behavior, WordPress could single-handedly make millions of websites faster overnight. It would democratize web performance, reduce plugin bloat, and save countless dollars in server costs and subscription fees for its users.
The era of server-side optimization was a necessary step, but its time is coming to an end. The future of a faster web is one where our own devices do the work, creating a more efficient, private, and cost-effective ecosystem for everyone.
Update: The core team is actively working on leveraging modern browser capabilities to handle media tasks, suggesting that WordPress will bring client side media processing eventually. This move aims to significantly enhance performance and user experience by shifting intensive tasks away from the server.
GitHub issue #61447, “Tracking: Client-side media processing,” serves as the central plan for integrating client-side media processing into the WordPress Gutenberg editor.