Configuring Cloudflare Images and fixing ERROR 9421: Too many redirects

Modern websites are rich with images, videos, and other media, making image optimization crucial for faster load times. Images can be part of your codebase or sourced externally, such as hotel images from suppliers stored on cloud services like AWS S3.

For images from your design team, request compression before use if possible. However, sometimes you might forget to optimize images before uploading. For external images, third-party services like Cloudflare Images or Cloudinary can help.

Using Cloudflare Images with my domain trungvose.com, I leveraged two features:

1. Efficient storage and delivery of images with dynamic variants.
2. Optimization of externally stored images via transformation requests.

With GatsbyJS and my images deployed on Netlify, I use Cloudflare Images to optimize externally stored images.

Enable Transformation

Transformations let you optimize images stored outside of Cloudflare Images. Cloudflare will automatically cache every transformed image on its global network, so you only need to store the original image at your origin.

1. Log in to the Cloudflare dashboard and select your account.
2. Go to Images > Transformations.
3. Select the domain where you want to enable transformations.
4. Click Enable.

After clicking Enable, the button will change to Disable, indicating that transformations are now enabled for your domain.

Transform Images

After enabling transformations, you can now transform images using two approaches:

1. Using a specially-formatted URL.
2. Through Cloudflare Workers.

Supported Input Formats

• JPEG
• PNG
• GIF (including animations)
• WebP (including animations)
• SVG

Using a Specially-Formatted URL

To get started, I’ll use a specially-formatted URL. You can read more here.

You can convert and resize images by requesting them via a specially-formatted URL. This way, you do not need to write any code, only change the HTML markup of your website to use the new URLs. The format is:

https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

• <ZONE>: Your domain, e.g., trungvose.com.
• /cdn-cgi/image/: A fixed prefix that identifies this as a special path handled by Cloudflare’s built-in Worker. This path will work when you have enabled transformations for your domain.
• <OPTIONS>: A comma-separated list of options such as width, height, and quality.
• <SOURCE-IMAGE>: The URL of the original image.

Example

I have this image inside my source code, uploaded to Netlify:

https://trungvose.com/img/speaking/2024-10-19-javascript-bangkok-01.jpg

Applying the above, the optimized image URL with a width of 1280px would be:

https://trungvose.com/cdn-cgi/image/format=auto,width=1280/img/speaking/2024-10-19-javascript-bangkok-01.jpg

Error 9421: Too Many Redirects

After opening the above image URL in the browser, I encountered this error:

Error 9421: Too many redirects

Searching Google, I found a Cloudflare community post that explains the issue.

Cloudflare Community Post: Pages&Images: ERROR 9421: Too many redirects

The post mentioned:

If your site’s SSL/TLS mode is set to “Flexible”, change it to “Full (strict)”. Pages does not work with plain HTTP traffic, only HTTPS.

I changed the SSL/TLS mode to Full (strict), and the issue was resolved.

Result and Comparison

Before

The original image:

https://trungvose.com/img/speaking/2024-10-19-javascript-bangkok-01.jpg

• Size: 3.8MB
• Dimensions: 4032 x 3024
• Format: image/jpeg

After

The optimized image:

https://trungvose.com/cdn-cgi/image/format=auto,width=1280/img/speaking/2024-10-19-javascript-bangkok-01.jpg

• Size: 243KB
• Dimensions: 1280 x 960
• Format: image/avif

Cloudflare Dashboard

In the Cloudflare dashboard, you can view detailed metrics for transformed images, including:

• Bandwidth Saved: The amount of data saved by using optimized images.
• Original Size: The size of the image before transformation.
• Resized: The size of the image after transformation.

Conclusion

Cloudflare Images is a powerful tool to optimize images stored outside of Cloudflare. By enabling transformations, you can resize, convert, and optimize images on the fly. If you encounter ERROR 9421: Too many redirects, check your SSL/TLS mode and ensure it is set to Full (strict).

While URL transformation is straightforward, it lacks the flexibility of Cloudflare Workers, which allow for custom image transformations. In a future article, I’ll explore using Cloudflare Workers. Here are some advantages:

• Custom URL schemes: Use preset names like thumbnail and large instead of pixel dimensions.
• Hide original image locations: Store images in an external S3 bucket or a hidden server folder without exposing URLs.
• Content negotiation: Dynamically adapt image sizes, formats, and quality based on device and network conditions.