Image Optimization and Resizing: A Developer's Guide

Previously in this course, we explored Managing Cache via Dashboard and API to control how your assets are stored globally. Now that you can cache files effectively, we’ll move one step further: modifying the assets themselves on the fly to ensure they are perfectly optimized for every user’s device.

Images are often the heaviest part of a web page, and poorly optimized assets are the primary killers of Core Web Vitals, specifically Largest Contentful Paint (LCP). Instead of manually compressing every asset, we will use Cloudflare to handle the heavy lifting.

Understanding Edge-Based Image Optimization

Image Optimization is the process of delivering the smallest possible file size without sacrificing visual quality. In a modern architecture, you shouldn't be serving a 5MB desktop-sized image to a mobile phone on a 3G connection.

Cloudflare provides three primary tools to solve this:

1. Polish: Automatically strips metadata and applies lossless or lossy compression to your images.
2. Mirage: A specialized feature that optimizes the delivery of images for mobile devices by intercepting requests and serving virtualized, lower-resolution versions until the full image is needed.
3. Image Resizing: Allows you to generate variants (different widths, heights, or formats) on demand using URL parameters.

Enabling Polish and Mirage

To start, navigate to your Cloudflare dashboard, select your zone, and go to the Speed tab, then Optimization.

• Polish: You will see "Lossless" and "Lossy" options. Lossless compression is safe for all sites. Lossy is more aggressive—it strips out more data to save space. I recommend starting with Lossless.
• Mirage: Toggle this to "On." It’s particularly effective for mobile users on high-latency networks.

Configuring Image Resizing

While Polish handles general compression, Image Resizing gives you granular control. For example, if you have a high-resolution hero image, you can request a 400px wide version for a mobile sidebar without creating that specific file on your origin server.

To use this, you must first ensure you have the Image Resizing add-on enabled in your billing/plan settings. Once enabled, you trigger resizing via URL parameters.

Worked Example: Dynamic Resizing

If your origin image is located at https://example.com/photo.jpg, you can request a resized version by prefixing the path with /cdn-cgi/image/:

HTML
<!-- Original image -->
style="color:#808080"><style="color:#4EC9B0">img src="https://example.com/photo.jpg" />

<!-- Resized to 400px width, converted to WebP -->
style="color:#808080"><style="color:#4EC9B0">img src="https://example.com/cdn-cgi/image/width=400,format=webp/photo.jpg" />

This request hits the Cloudflare edge, which checks if the 400px WebP version exists in the cache. If not, it fetches the original, processes it, caches the result, and returns it to the user.

Hands-on Exercise: Verify Your Delivery

1. Enable: Turn on "Polish" (Lossless) in your dashboard.
2. Request: Open your browser and navigate to one of your image URLs, appending the resizing parameters: /cdn-cgi/image/width=200/your-image.jpg.
3. Inspect: Open Chrome DevTools, go to the Network tab, and reload.
4. Verify: Click on the image request. Check the Content-Type header (it should be image/webp or image/avif) and the cf-cache-status header. If it says MISS on the first load and HIT on the second, your edge-side optimization is working perfectly.

Common Pitfalls

• Caching Collisions: If you change your origin image but keep the same filename, the edge might serve the old, cached version. Use the purge tools we covered in our Managing Cache via Dashboard and API lesson if you update your assets.
• Over-Compression: Lossy Polish settings can sometimes make gradients look "blocky." If you notice visual artifacts on your site, revert to "Lossless."
• Missing Format Support: Always prefer modern formats like WebP or AVIF. Cloudflare handles the conversion automatically, but ensure your code doesn't hardcode file extensions like .jpg in your <img> tags if you are relying on dynamic format switching.

FAQ

Q: Does Image Resizing work if my images are hosted on a third-party server? A: Yes, as long as that server is behind the same Cloudflare zone, or you have configured the necessary "Allowed Origins" in your Image Resizing settings.

Q: Will this replace my need for responsive srcset attributes? A: Not entirely. While Cloudflare handles the generation of sizes, you should still use <picture> tags or srcset to tell the browser which size to request based on the viewport.

Recap

We’ve learned that modern Image Optimization is an edge-side task. By enabling Polish and Mirage, you offload compression, and by using Image Resizing, you ensure that no user ever downloads an image larger than their device requires. This is a massive win for your Web Vitals scores.

Up next: We will look at Minification and Asset Delivery to further trim your payload size.